Styles Làm sao được nút counter và author như Tt.vn

N

nminhkhoi

Private
Tình hình là em mới nghiên cứu về xenf, mò mẫm cả tuần rồi cũng được chút chút. nhưng em không biết sao hiển thị được tác giả bài viết và nút counter như thế này.
Có cao nhân nào giúp em với ạ. Em cám ơn rất nhiều. Cần thiết thì e hậu tạ thẻ cào coi như cafe chỉ giáo.

Screen Shot 2017-03-04 at 06.08.52.png
 
Bài viết liên quan
Simple grid and rounded nodes - Node lưới tròn và đơn giản cho XenForo 2.3 1.1 bởi PVS,
Vault - Style Vault cho XenForo 2.2 2.2.15b bởi PVS,
Nerva Dark - Style Nerva Dark cho XenForo 2 2.2.15 bởi PVS,
xenWebmaster Ebony and Ivory - Style xenWebmaster Ebony và Ivory cho XenForo 2.3 2.3.3 bởi PVS,
Innovate Light - Style Innovate Light cho XenForo 2 2.2.13 bởi PVS,
Vault - Style Vault cho XenForo 2.2 2.2.13d bởi PVS,
Bài viết mới
[VNXF 2x] - Style VNXF Cracked cho XenForo 2.2 bởi PVS,
Simple grid and rounded nodes - Node lưới tròn và đơn giản cho XenForo 2.3 1.1 bởi PVS,
HeBeLe - Style HeBeLe cho XenForo 2.3 2.3.4-1 bởi PVS,
HeBeLe - Style HeBeLe cho XenForo 2.3 2.3.4 bởi PVS,
FreeDom - Style FreeDom cho XenForo 2.3 2.3.4 bởi PVS,
Exclusive Dark - Style Exclusive Dark cho XenForo 2 2.2.15 bởi PVS,
bcat95 nói:
Demo:
View attachment 19410
EWRporta2_ArticleList_Bit
Mã: 
<div class="articleItem" id="article_{$article.thread_id}">
    <div class="sectionMain">
        <div class="metaData">
            <xen:if hascontent="true">
                    <xen:contentcheck>
                    <span class="poster-avatar">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    </span>
                    </xen:contentcheck>
            </xen:if>
           
            <span class="dateData">
                <a href="{xen:link members, $article}" class="username">{$article.username}</a>
                <a href="{xen:link threads, $article}">{xen:datetime $article.article_date}</a>
            </span>
            <div class="sectionFooter">
                <xen:include template="EWRporta2_Article_Categories">
                    <xen:map from="$article.categories.cats" to="$categories" />
                </xen:include>
            </div>
        </div>
        <div class="thr_img_home">
        <xen:if hascontent="true">
                <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'attach'">
                        <a class="attachHolder" href="{xen:link threads, $article}">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADAQMAAACUBtwLAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUCJljYAABAAAGAAHmh/5/AAAAAElFTkSuQmCC"alt="{$article.article_icon.data.filename}" class="art_att" style="background: url({xen:link attachments, $article.article_icon.data});background-size: cover;">
                        </a>
                    <xen:elseif is="{$article.article_icon.type} == 'image'" />
                        <a class="attachHolder" href="{xen:link threads, $article}">
                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADAQMAAACUBtwLAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUCJljYAABAAAGAAHmh/5/AAAAAElFTkSuQmCC" alt="{$article.article_icon.data.file}" class="art_att" style="background: url({$article.article_icon.data.url});background-size: cover;">
                    <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                        <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $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>
            </xen:if>
        </div>
        <div class="subHeading">
            {xen:helper threadPrefix, $article}
            <a href="{xen:link threads, $article}">{$article.article_title}</a>
        </div>
       
        <xen:if is="@porta2_articles_header">
        <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="{xen:link attachments, $article.article_icon.data}" 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="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></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>
        </xen:if>
        </xen:if>
   
        <xen:if is="@porta2_articles_dateblock">
            <div class="dateBlock">
                <div class="heading">{xen:time $article.article_date, 'M'}</div>
                <div class="secondaryContent">{xen:time $article.article_date, 'd'}</div>
            </div>
        </xen:if>
       
        <div class="primaryContent">
            <div class="baseHtml excerptContent {xen:if '@porta2_articles_dateblock', 'excerptOffset'}">
                {xen:helper stripHtml, {xen:raw $article.messageHtml}}
               
                <xen:if is="{$article.article_break}">
                    <a href="{xen:link threads, $article}">{$article.article_break}...</a>
                </xen:if>
            </div>
        </div>
        <div class="post-controls controls width-narrow">
            <a href="{xen:link threads, $article}" class="control views">
                <span>
                    <i class="fa fa-eye" aria-hidden="true"></i>
                    <span class="counter" style="">{xen:number $article.view_count}</span>
                </span>
            </a>
            <a href="{xen:link threads, $article}#QuickReply" class="control replies">
                <span>
                    <i class="fa fa-comment-o" aria-hidden="true"></i>
                    <span class="counter" style="">{xen:number $article.reply_count}</span>
                </span>
            </a>
        <div class="controls sharing">
            <div class="bdSocialShare shareControl socialcounters got-data" data-url="{xen:link threads, $article}" data-server="">
                <div class="facebook got-counter" title="Chia sẻ lên Facebook">
                    <div class="fb-like" data-href="{xen:link threads, $article}" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
                </div>
            </div>
            <a href="https://cungcaphangsi.com/posts/{$article.thread_id}/permalink" class="control permalink OverlayTrigger">
                <span>
                    <i class="fa fa-share-alt" aria-hidden="true"></i>
                </span>
            </a>
        </div>
        </div>
       
    </div>
<div class="separator width-wide">&nbsp;</div>
</div>
Còn css tự code nha bác
Nhấn để mở rộng...

Bác có code thanh navigation bar có ô search trên đó mà float được cho em xin với ạ, làm mãi ko đc :(
 
bcat95 nói:
bác làm k đc ở chỗ nào á?
hover hay click hay khi responsive
Nhấn để mở rộng...

nói chung là thanh nav của e float được, còn ô search mặc định nó nằm dưới thanh nav, bình thường thì ko sao, nhưng khi co về màn 480 thì bị mất, e có thử chỉnh css rồi mà vẫn chưa đc vị trí nhưng ứng ý, nó toàn che mất mấy tab khi co về màn 480p.

Có cách nào dính nó vào thanh nav với chỉ 1 biểu tượng cái kính lúp ko nhỉ :(
 
bcat95 nói:
Demo:
View attachment 19410
EWRporta2_ArticleList_Bit
Mã: 
<div class="articleItem" id="article_{$article.thread_id}">
    <div class="sectionMain">
        <div class="metaData">
            <xen:if hascontent="true">
                    <xen:contentcheck>
                    <span class="poster-avatar">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    </span>
                    </xen:contentcheck>
            </xen:if>
          
            <span class="dateData">
                <a href="{xen:link members, $article}" class="username">{$article.username}</a>
                <a href="{xen:link threads, $article}">{xen:datetime $article.article_date}</a>
            </span>
            <div class="sectionFooter">
                <xen:include template="EWRporta2_Article_Categories">
                    <xen:map from="$article.categories.cats" to="$categories" />
                </xen:include>
            </div>
        </div>
        <div class="thr_img_home">
        <xen:if hascontent="true">
                <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'attach'">
                        <a class="attachHolder" href="{xen:link threads, $article}">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADAQMAAACUBtwLAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUCJljYAABAAAGAAHmh/5/AAAAAElFTkSuQmCC"alt="{$article.article_icon.data.filename}" class="art_att" style="background: url({xen:link attachments, $article.article_icon.data});background-size: cover;">
                        </a>
                    <xen:elseif is="{$article.article_icon.type} == 'image'" />
                        <a class="attachHolder" href="{xen:link threads, $article}">
                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADAQMAAACUBtwLAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUCJljYAABAAAGAAHmh/5/AAAAAElFTkSuQmCC" alt="{$article.article_icon.data.file}" class="art_att" style="background: url({$article.article_icon.data.url});background-size: cover;">
                    <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                        <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $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>
            </xen:if>
        </div>
        <div class="subHeading">
            {xen:helper threadPrefix, $article}
            <a href="{xen:link threads, $article}">{$article.article_title}</a>
        </div>
      
        <xen:if is="@porta2_articles_header">
        <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="{xen:link attachments, $article.article_icon.data}" 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="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></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>
        </xen:if>
        </xen:if>
  
        <xen:if is="@porta2_articles_dateblock">
            <div class="dateBlock">
                <div class="heading">{xen:time $article.article_date, 'M'}</div>
                <div class="secondaryContent">{xen:time $article.article_date, 'd'}</div>
            </div>
        </xen:if>
      
        <div class="primaryContent">
            <div class="baseHtml excerptContent {xen:if '@porta2_articles_dateblock', 'excerptOffset'}">
                {xen:helper stripHtml, {xen:raw $article.messageHtml}}
              
                <xen:if is="{$article.article_break}">
                    <a href="{xen:link threads, $article}">{$article.article_break}...</a>
                </xen:if>
            </div>
        </div>
        <div class="post-controls controls width-narrow">
            <a href="{xen:link threads, $article}" class="control views">
                <span>
                    <i class="fa fa-eye" aria-hidden="true"></i>
                    <span class="counter" style="">{xen:number $article.view_count}</span>
                </span>
            </a>
            <a href="{xen:link threads, $article}#QuickReply" class="control replies">
                <span>
                    <i class="fa fa-comment-o" aria-hidden="true"></i>
                    <span class="counter" style="">{xen:number $article.reply_count}</span>
                </span>
            </a>
        <div class="controls sharing">
            <div class="bdSocialShare shareControl socialcounters got-data" data-url="{xen:link threads, $article}" data-server="">
                <div class="facebook got-counter" title="Chia sẻ lên Facebook">
                    <div class="fb-like" data-href="{xen:link threads, $article}" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
                </div>
            </div>
            <a href="https://cungcaphangsi.com/posts/{$article.thread_id}/permalink" class="control permalink OverlayTrigger">
                <span>
                    <i class="fa fa-share-alt" aria-hidden="true"></i>
                </span>
            </a>
        </div>
        </div>
      
    </div>
<div class="separator width-wide">&nbsp;</div>
</div>
Còn css tự code nha bác
Nhấn để mở rộng...
Bác ơi cho em xin css luôn đc ko ạ :(, có mấy class mới quá ko biết thêm thế nào :(
 
1,104 4 0
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Dịch vụ XenForo của VNXF

Zalo 0906081284
avatar Silzedt InboxPVS

Xử lý sự cố (Troubleshooting)

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Texlink

Diễn đàn chia sẻ kinh nghiệm massage
Review dịch vụ massage toàn quốc
Cộng Đồng Massage Việt Nam
Cộng đồng AI Việt Nam
Khám phá AI cùng người Việt
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Back
Top