Hướng dẫn Portal 2 như DesignerVN.Net

Thảo luận trong 'Addon, Styling and Customization Questions' bắt đầu bởi hardcore, 14/07/2017.

  1. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    361
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Chào các bác, lâu rồi em mới viết bài mong các bác ủng hộ. Hôm nay, em xin share cái portal 2 của DesignerVN.Net như nhiều bác yêu cầu. Không dài dòng nữa, vào vấn đề luôn.
    1. Yêu cầu
    2. Thay toàn bộ template EWRporta2.css bằng code sau:
      Mã:
      .xenForm .textHeading .selectAll {
          float: right
      }
      .xenForm .categoryUnit li {
          display: inline-block;
          width: 185px
      }
      .xenForm .categoryUnit dd {
          padding-right: 0px
      }
      .authorUnit {}
      .authorUnit .authorImage .img {
          display: block;
          float: left;
          width: 150px;
          height: 200px
      }
      .authorUnit .secondaryContent {
          margin-left: 160px
      }
      .authorUnit .secondaryContent .name {
          font-size: 28px
      }
      .authorUnit .secondaryContent .muted {
          margin-bottom: 15px
      }
      .authorUnit .secondaryContent .controls {
          float: right;
          margin-right: 10px
      }
      .authorUnit .secondaryContent .avatar {
          float: right
      }
      .authorUnit {
          zoom: 1
      }
      .authorUnit:after {
          content: '.';
          display: block;
          height: 0;
          clear: both;
          visibility: hidden
      }
      .keyIcon {
          background-image: url('styles/default/xenforo/xenforo-ui-sprite.png');
          background-repeat: no-repeat;
          margin: 0 4px 0 0;
          float: left;
          width: 16px;
          height: 16px
      }
      .keyIcon.category {
          background-position: 0px 1px;
          margin-top: 3px;
          width: 14px
      }
      .keyIcon.comments {
          background-position: -65px -16px;
          width: 14px
      }
      .keyIcon.redirect {
          background-position: -48px -16px;
          margin-top: 3px
      }
      .keyIcon.sticky {
          background-position: 0px -16px
      }
      .keyIcon.views {
          background-position: -144px -17px;
          width: 18px
      }
      .xenForm .date {
          background-image: url("styles/8wayrun/calendar.png");
          background-position: right center;
          background-repeat: no-repeat
      }
      .copyright {
          text-align: center;
          font-size: 11px;
          margin: 10px;
          clear: both
      }
    3. Thay toàn bộ template EWRporta2_ArticleList.css bằng code sau:
      Mã:
      .articleItem {}
      
      .articleItem .subHeading {
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }
      
      .articleItem .metaData {
        padding-bottom: 5px;
        margin-bottom: 10px;
        border-bottom: 1px dashed rgb(236, 236, 236);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }
      
      .articleItem .metaData .statData {
        margin-left: 10px;
        float: right
      }
      
      .articleItem .excerptContent {}
      
      .articleItem .sectionFooter {}
      
      .articleItem .sectionFooter .continue {
        float: right
      }
      
      .articleItem .sectionFooter .categories {
        overflow: hidden
      }
      
      .articleItem .sectionFooter .categories li {
        display: inline-block
      }
      
      .articleItem .primaryContent {
        zoom: 1;
        background-color: white
      }
      
      .articleItem .primaryContent:after {
        content: '.';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden
      }
      
      .articleItem .sectionFooter {
        zoom: 1
      }
      
      .articleItem .sectionFooter:after {
        content: '.';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden
      }
      
      .articleItem .dateBlock {
        margin: 10px 10px 0px -20px;
        text-align: center;
        float: left;
        position: relative;
        z-index: 100
      }
      
      .articleItem .dateBlock .heading {
        padding-bottom: 5px;
        margin: 0;
        text-transform: uppercase
      }
      
      .articleItem .dateBlock .secondaryContent {
        font-weight: bold;
        font-size: 24px;
        padding: 5px
      }
      
      .articleItem .excerptOffset {
        margin-left: 32px
      }
      
      .articleItem .headerBlock a {
        display: block;
        background-size: 100%;
        line-height: 0
      }
      
      @media screen and (max-width:900px) {
        .articleItem .headerBlock a img {
          max-width: 100%;
          -webkit-transform: none;
          -ms-transform: none;
          transform: none
        }
      }
      
      .articleItem img {
        min-height: 120px
      }
      
      .articleItem .headerBlock a img del {
        max-width: 100%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(0%, -25%);
        -ms-transform: translate(0%, -25%);
        -webkit-transform: translate(0%, -25%);
        -ms-transform: translate(0%, -25%);
        transform: translate(0%, -25%)
      }
      
      
      }
      .articleItem .messageUserBlock {
        margin-left: 10px;
        float: right
      }
      .articleItem .messageUserBlock a {
        background-size: 100%;
        display: block;
        line-height: 0
      }
      .articleItem .messageUserBlock a img {
        max-width: 200px;
        height: auto
      }
      .ArticlesMason.articlesGrid {
        margin: 5px -5px -5px
      }
      .ArticlesMason.articlesGrid .articleItem {
        display: inline-block;
        vertical-align: top;
        width: 50%
      }
      .ArticlesMason.articlesGrid .articleItem .sectionMain {
        margin: 5px
      }
      @media (max-width:800px) {
        .Responsive .ArticlesMason.articlesGrid .articleItem {}
      }
      @media (max-width:610px) {
        .Responsive .ArticlesMason.articlesGrid .articleItem {
          width: 100%
        }
      }
      @media (max-width:480px) {
        .Responsive .ArticlesMason.articlesGrid .articleItem {}
      }
      .articleControl {
        display: none;
        font-size: 10px;
        text-align: center;
        position: fixed;
        right: 10px;
        bottom: 0;
        z-index: 1000
      }
      .articleControl .resume {
        display: none
      }
      .articleControl .resume .muted {
        margin-bottom: 5px
      }
      #infscr-loading {
        background-color: rgb(255, 255, 255);
        padding: 10px;
        margin: 10px auto;
        border: 1px solid rgb(3, 124, 83);
        border-radius: 10px;
        position: fixed;
        right: 10px;
        bottom: 0;
        z-index: 1001;
        text-align: center
      }
      @media (max-width:480px) {
        .Responsive .articlesGrid .articleItem .messageUserBlock {
          display: inline-block;
          float: none;
          margin-bottom: 10px;
          white-space: nowrap
        }
      }
      .articleItem
      .textEWR {
        padding: 10px;
      }
      .articleItem
      h6 {
        font-size: .75rem;
        line-height: 18px;
        margin: 0 0 3px;
        text-transform: uppercase;
      }
      @media (max-width: 800px) {
        .articleItem .headerBlock a
      img {
          width: 100% !important;
          height: auto !important;
        }
      }
      @media (max-width: 610px) {
        .articleItem .headerBlock a
      img {
          width: 100% !important;
          height: auto !important;
        }
        .articleItem
      .textEWR {
          display: none;
        }
        .articleItem
      h3 {
          margin-bottom: 10px !important;
        }
        .articleItem
      .prefix {
          display: none;
        }
      }
      .articleItem .headerBlock a
      img {
        width: 100% !important;
        height: auto !important;
      }
      @media (min-width: 768px) {
        .articleItem
      img {
          min-height: 250px;
        }
      }
      .articleItem
      h3 {
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        font-size: 1.25rem;
        overflow: hidden;
        line-height: 1.3;
        font-weight: 300;
        margin-bottom: 10px;
      }
      .articleItem h3
      a {
        color: #454545;
      }
      .articleItem
      .primaryContent {
        padding: 10px 15px 10px 15px;
        height: auto;
        border-bottom: none !important;
      }
      .articleItem
      .sectionFooter {
        padding: 0;
      }
      .articleItem .sectionFooter
      .button {
        font-size: 11px;
        line-height: 23px;
        padding: 0px 6px;
        height: 23px;
        display: block;
        border-radius: 0px;
      }
      @media screen and (max-width: 900px) {
        .headerBlock {
          position: relative;
          color: #fff;
          overflow: hidden;
          position: relative;
        }
      }
      .headerBlock {
        position: relative;
        color: #fff;
        overflow: hidden;
        position: relative;
      }
      .headerBlock .post-meta-info {
        position: absolute;
        width: 100%;
        left: 0px;
        bottom: 0px;
        background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.55) 10%,
          rgba(0, 0, 0, 0) 90%
        );
        font-size: 20px;
        color: #fff;
      }
      .headerBlock .post-meta-date {
        padding: 5px 20px;
      }
      .headerBlock .post-meta-date
      .counter {
        margin-left: 10px;
        line-height: 1 !important;
      }
      .articleItem
      .keyIcon {
        display: none;
      }
      .articleItem .sectionFooter { background: none; border: none }
      .articleItem .textEWR { padding: 5px }
      .categories li { display: inline-block }
      .categories > li > a { line-height: 2!important }
    4. Thay toàn bộ template EWRporta2_ArticleList_Bit bằng code sau:
      Mã:
      <xen:require css="EWRporta2_ArticleList.css" />
      
      <div class="articleItem" id="article_{$article.thread_id}">
        <xen:if hascontent="true">
          <div class="headerBlock">
              <xen:contentcheck>
              <xen:if is="{$article.article_icon.type} == 'attach'">
                <a class="attachHolder" href="{xen:link threads, $article}"><img src="//imagizer.imageshack.us/a/img924/3151/lXCkG6.png" style="background: transparent url('{xen:link attachments, $article.article_icon.data}'); background-position: center center;
          background-size: cover" alt="{$article.article_icon.data.filename}'')"/></a>
              <xen:elseif is="{$article.article_icon.type} == 'image'" />
                <a class="attachHolder" href="{xen:link threads, $article}"><img src="//imagizer.imageshack.us/a/img924/3151/lXCkG6.png" alt="{$article.article_icon.data.file}" style="background: transparent url('{$article.article_icon.data.url}'); background-position: center center;
          background-size: cover"/></a>
              <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio, $article.article_icon.data}');"
                  href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                  data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                    <img src="styles/8wayrun/EWRmedio_play.png" />
                </a>
              </xen:if>
              </xen:contentcheck>
      
            <div style="margin-left:20px;top:10px;position: absolute;">
              <xen:include template="EWRporta2_Article_Categories">
                           <xen:map from="$article.categories.cats" to="$categories" />
                      </xen:include>
            </div>
      
            <div class="post-meta-info">
      
              <div class="post-meta-date">
                <i class="fa fa-clock-o" aria-hidden="true"></i> {xen:time $article.article_date} - {xen:date $article.article_date} <span class="counter" style=""><i class="fa fa-user" aria-hidden="true"></i> {$article.username}</span>
                <span class="counter"><i class="fa fa-eye" aria-hidden="true"></i> {xen:number $article.view_count}</span>
                <span class="counter"><i class="fa fa-comments-o" aria-hidden="true"></i> {xen:number $article.reply_count}</span>
                <div class="textEWR"><i class="fa fa-info" aria-hidden="true"></i> "{xen:raw $article.messageHtml}"</div>
              </div>
            </div>
          </div>
          </xen:if>
      
          <div class="primaryContent">
      
            <h3>{xen:helper threadPrefix, $article}
                    <a href="{xen:link threads, $article}">{$article.article_title}</a>
          </h3>
      
      
            <div class="sectionFooter">     
                      <xen:include template="EWRporta2_Article_Categories">
                           <xen:map from="$article.categories.cats" to="$categories" />
                      </xen:include>
            </div>
          </div>
      </div>
    5. Chúc các bác thành công :)
     
    hoangyb, THB, PYX and 7 others like this.
  2. phongtruong

    phongtruong Thượng Đế

    Tham gia:
    12/07/2017
    Bài viết:
    11
    Đã được thích:
    4
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Web:
    tks bác nhiều lắm
     
    THB thích bài này.
  3. phongtruong

    phongtruong Thượng Đế

    Tham gia:
    12/07/2017
    Bài viết:
    11
    Đã được thích:
    4
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Web:
    sao e thay rồi mà không thấy đổi gì so với ban đầu nhỉ upload_2017-7-15_20-12-26.png
     
    THB thích bài này.
  4. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    361
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Bạn có thay nhầm style k ? Nếu k thì có thể cho mình demo hoặc team vào inbox nhé :)
     
    THB thích bài này.
  5. dinhhai

    dinhhai Thượng Đế

    Tham gia:
    28/07/2015
    Bài viết:
    393
    Đã được thích:
    196
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nơi ở:
    hcm
    Sao mình làm ra lỗi tè le không có hiển thị gì cả bác ơi
     
    THB thích bài này.
  6. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    361
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @dinhhai Bạn inbox mình demo hoặc team để mình ktra nhé :)
     
    THB and dinhhai like this.
  7. dinhyen

    dinhyen Thượng Đế

    Tham gia:
    22/05/2017
    Bài viết:
    101
    Đã được thích:
    36
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Web:
    Bác cho em hỏi. e đã cái porta nhưng ngoài trang chủ tích sang thì nó không hiên thị được ra trang chủ. giờ em phải làm như nào?
    E lick vào trang chủ nó k ra được
    Hãy đăng nhập hoặc đăng ký để xem được links
    33.png
    44.png
     
  8. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    361
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Bạn phải set quyền nhé @dinhyen + promote ra trang chủ kèm hình ảnh thì mới giống designervn.net
     
  9. dinhyen

    dinhyen Thượng Đế

    Tham gia:
    22/05/2017
    Bài viết:
    101
    Đã được thích:
    36
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Web:
    Xin bác hướng dẫn giúp em làm sao để nó hiển thị được với. E mới làm nên còn gà anh ạ
     
  10. dinhhai

    dinhhai Thượng Đế

    Tham gia:
    28/07/2015
    Bài viết:
    393
    Đã được thích:
    196
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nơi ở:
    hcm
    Mình test thử trên localhost bác ạ
     
  11. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    361
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @dinhyen @dinhhai hai bác có thể pm fb em để em ktra giúp :) Hãy đăng nhập hoặc đăng ký để xem được links
     
  12. hoangyb

    hoangyb Thượng Đế

    Tham gia:
    20/05/2015
    Bài viết:
    7
    Đã được thích:
    3
    Điểm thành tích:
    3
    Giới tính:
    Nam
    mình cũng k thấy thay đổi gì :(
     
  13. quick87

    quick87 Thượng Đế

    Tham gia:
    10/12/2016
    Bài viết:
    84
    Đã được thích:
    48
    Điểm thành tích:
    18
    Các bạn cài thử bản này:
    Rồi làm lại theo hướng dẫn của @hardcore.

    Mình đã thử và thành công, test trên localhost:
    Capture.PNG

    Thanks @hardcore for your sharing nhé :)
     

    Các file đính kèm:

    hardcore thích bài này.
  14. hardcore

    hardcore Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    431
    Đã được thích:
    361
    Điểm thành tích:
    63
    Giới tính:
    Nam
    @quick87 cảm ơn bạn đã giúp mình giải đáp :)
     
    quick87 thích bài này.
  15. hoangyb

    hoangyb Thượng Đế

    Tham gia:
    20/05/2015
    Bài viết:
    7
    Đã được thích:
    3
    Điểm thành tích:
    3
    Giới tính:
    Nam
    ok tks bạn mình làm ok rồi. Bác cho xin hướng dẫn làm cái header giống + cover với ạ .. tks :D
     
  16. loliloli

    loliloli Thượng Đế

    Tham gia:
    04/09/2016
    Bài viết:
    121
    Đã được thích:
    36
    Điểm thành tích:
    28
    2017-09-13.png
    mình bị lỗi
     
  17. ngaithon

    ngaithon Thượng Đế

    Tham gia:
    13/02/2017
    Bài viết:
    112
    Đã được thích:
    23
    Điểm thành tích:
    18
    Giới tính:
    Nam
    chỉnh rồi mà bị lỗi, bấm vô bài viết cái hình cover nó hiện to lắm
     
  18. thodan36a

    thodan36a Thượng Đế

    Tham gia:
    15/09/2017
    Bài viết:
    12
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    hcm
    Mình làm mà không hiện hình ảnh?
    cái style forum của DesignerVN.Net là gì vậy nhỉ? mình muốn chia dạng như vậy chứ không phải 1 list từ trên xuống
     
    Chỉnh sửa cuối: 31/01/2018
  19. 101010

    101010 Thượng Đế

    Tham gia:
    24/09/2018
    Bài viết:
    4
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    HN
    Cái này dùng cho xen v1 phải không ạ, v2 mình hok thấy nơi để sửa, hihi
     
  20. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,558
    Đã được thích:
    1,237
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    Mình đang có bản full trang chủ + diễn đàn của style Designervn.net bạn nào có nhu cầu thì inbox mình nhé, giá cực mềm :D
     

Chia sẻ trang này

Đang tải...