share style Xenporta 2 đơn giản.

minhdat

Thượng Đế
Tham gia
18/11/2015
Bài viết
153
Được Like
94
Ảnh Xenporta của mình:

df.jpg


đầu tiên các bạn vào Style Properties -> XenPorta 2 - Articles List và bật: Display Article Icon as a Header, Display Full-sized Attachment Icons, Enable Masonry Grid
tiếp theo vào Edit Template: EWRporta2_ArticleList_Bit xóa hết code trong đó và thay bằng code sau:
Mã:
<div class="articleItem" id="article_{$article.thread_id}">
    <div class="sectionMain">
        <div class="subHeading">
            {xen:helper threadPrefix, $article}
            <a href="{xen:link threads, $article}">{$article.article_title}</a>
        </div>
       
       
   
        <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="metaData">
               
                <span class="dateData">
                    <div class="keyIcon sticky"></div>
                    {xen:phrase porta2_by_x_on_y_at_z,
                        'user=<a href="{xen:link members, $article}" class="username">{$article.username}</a>',
                        'date=<a href="{xen:link threads, $article}">{xen:date $article.article_date}</a>',
                        'time=<a href="{xen:link threads, $article}">{xen:time $article.article_date}</a>'}
                </span>
            </div>
           
            <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>
                   
        <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 hascontent="true">
                <div class="messageUserBlock">
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                       
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" />
                                <xen:else/>
                                    <img src="{$article.article_icon.data.thumbnailUrl}" alt="{$article.article_icon.data.filename}" />
                                </xen:if>
                            </a>
                        <xen:elseif is="{$article.article_icon.type} == 'image'" />
                            <center><a class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></a></center>
                        <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:if>
                    </xen:contentcheck>
                </div>
            </xen:if>
            <br/>
            <span class="v_c_h"><div class="keyIcon comments"></div>{xen:number $article.reply_count}</span>
            <span class="v_c_h"><div class="keyIcon views"></div>{xen:number $article.view_count}</span>
        </div>
       
        <div class="sectionFooter">
           
            <xen:include template="EWRporta2_Article_Categories">
                <xen:map from="$article.categories.cats" to="$categories" />
            </xen:include>
        </div>
    </div>
</div>

tiếp vào Edit Template: EXTRA.css

thêm css sau:
Mã:
.articleItem .subHeading
{
    font-size: 24px !important;
    white-space: inherit !important;
    border: 1px solid rgb(9, 41, 70);
    border-bottom: 0;
}

.articleItem .subHeading a
{
    color: #fafafa;
}
.v_c_h
{
    margin-left: 10px;
    float: right;
}

.sectionFooter
{
   background: none;
   border: none;
}

.messageText {
    font-size: 16px;
    font-family: Helvetica,Arial,sans-serif;
    line-height: 1.5;
}

.articleItem .excerptContent {
    font-size: 16px;
    font-family: Helvetica,Arial,sans-serif;
    line-height: 1.5;
}

.articleItem .messageUserBlock {
    margin-left: 0 !important;
    float: none !important;
    background: 0;
    border: 0;
    padding-top: 10px;
}

.subHeading {
    background: #01527B;
}

Xem demo tại: http://changvangz.com
 
  • Like
Reactions: THB

minhdat

Thượng Đế
Tham gia
18/11/2015
Bài viết
153
Được Like
94
bạn làm style cho forum đó ak, đẹp tuyệt =D
 

mbay

Thượng Đế
Tham gia
25/10/2015
Bài viết
48
Được Like
48
mamcongnghe.com gì mà vào thấy die mất tiêu rồi bác?
 

mbay

Thượng Đế
Tham gia
25/10/2015
Bài viết
48
Được Like
48
sang firefox hay gì đó đê bác ei. Bác dùng win xp phải k?
ừa thì vào firefox ok, máy mình cùi nên xìa xp cho nhẹ ,lạ cái là mấy site khác dùng giao thức này mình vào ko vấn đề gì mỗi cái của bác là bị
 

anhtuhu

Thượng Đế
Tham gia
29/04/2015
Bài viết
32
Được Like
17
@minhdat: Sao mình setup như của bạn rồi mà hình ảnh trên trang chủ nó không căn giữa như trang của bạn nhỉ? Hình ảnh hiện giờ nó cứ lệch sang bên trái. Bạn chỉ giúp mình cách chỉnh cho ảnh căn giữa ở trang chủ nhé.

Cảm ơn bạn nhiều!
 

minhdat

Thượng Đế
Tham gia
18/11/2015
Bài viết
153
Được Like
94
cái đó không phải nó căn giữa đâu mà là nó phóng to cho vừa khung.
bạn thêm css này vào Extra nha:
Mã:
.articleItem .headerBlock a img{
    width: 100%;
}
 

anhtuhu

Thượng Đế
Tham gia
29/04/2015
Bài viết
32
Được Like
17
cái đó không phải nó căn giữa đâu mà là nó phóng to cho vừa khung.
bạn thêm css này vào Extra nha:
Mã:
.articleItem .headerBlock a img{
    width: 100%;
}

Cảm ơn bạn nhiều. Mình làm được rùi!
 

TD2308

Thượng Đế
Tham gia
17/03/2016
Bài viết
151
Được Like
116
Cho ảnh lên trên, còn mấy dòng chữ bài viết đưa xuống dưới được không?
 

namhbnam

Thượng Đế
Tham gia
23/03/2016
Bài viết
322
Được Like
162
sao làm y như thế mà mình vào chẳng khác gì nhỉ
 

TD2308

Thượng Đế
Tham gia
17/03/2016
Bài viết
151
Được Like
116
được rồi, thanks nhiều. Cho mình hỏi tý, muốn đứa hình ảnh lên trên bài viết thì làm sao vậy
xóa hết code trong EWRporta2_ArticleList_Bit và thay bằng code này:
Mã:
<div class="articleItem" id="article_{$article.thread_id}">
    <div class="sectionMain">
   
        <div class="subHeading">
            {xen:helper threadPrefix, $article}
            <a href="{xen:link threads, $article}">{$article.article_title}</a>
        </div>
       
        <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="metaData">
               
                <span class="dateData">
                    <div class="keyIcon sticky"></div>
                    {xen:phrase porta2_by_x_on_y_at_z,
                        'user=<a href="{xen:link members, $article}" class="username">{$article.username}</a>',
                        'date=<a href="{xen:link threads, $article}">{xen:date $article.article_date}</a>',
                        'time=<a href="{xen:link threads, $article}">{xen:time $article.article_date}</a>'}
                </span>
            </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 hascontent="true">
                <div class="messageUserBlock"><div class="avatarHolder">
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" />
                                <xen:else/>
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" />
                                </xen:if>
                            </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 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:if>
                    </xen:contentcheck>
                </div></div>
            </xen:if>
           
            <div class="baseHtml excerptContent {xen:if '@porta2_articles_dateblock', 'excerptOffset'}">
                {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>
</div>
 

chientc

Thượng Đế
Tham gia
10/06/2016
Bài viết
96
Được Like
35
Ảnh Xenporta của mình:

View attachment 9527

đầu tiên các bạn vào Style Properties -> XenPorta 2 - Articles List và bật: Display Article Icon as a Header, Display Full-sized Attachment Icons, Enable Masonry Grid
tiếp theo vào Edit Template: EWRporta2_ArticleList_Bit xóa hết code trong đó và thay bằng code sau:
Mã:
<div class="articleItem" id="article_{$article.thread_id}">
    <div class="sectionMain">
        <div class="subHeading">
            {xen:helper threadPrefix, $article}
            <a href="{xen:link threads, $article}">{$article.article_title}</a>
        </div>
     
     
 
        <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="metaData">
             
                <span class="dateData">
                    <div class="keyIcon sticky"></div>
                    {xen:phrase porta2_by_x_on_y_at_z,
                        'user=<a href="{xen:link members, $article}" class="username">{$article.username}</a>',
                        'date=<a href="{xen:link threads, $article}">{xen:date $article.article_date}</a>',
                        'time=<a href="{xen:link threads, $article}">{xen:time $article.article_date}</a>'}
                </span>
            </div>
         
            <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>
                 
        <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 hascontent="true">
                <div class="messageUserBlock">
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                     
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" />
                                <xen:else/>
                                    <img src="{$article.article_icon.data.thumbnailUrl}" alt="{$article.article_icon.data.filename}" />
                                </xen:if>
                            </a>
                        <xen:elseif is="{$article.article_icon.type} == 'image'" />
                            <center><a class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></a></center>
                        <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:if>
                    </xen:contentcheck>
                </div>
            </xen:if>
            <br/>
            <span class="v_c_h"><div class="keyIcon comments"></div>{xen:number $article.reply_count}</span>
            <span class="v_c_h"><div class="keyIcon views"></div>{xen:number $article.view_count}</span>
        </div>
     
        <div class="sectionFooter">
         
            <xen:include template="EWRporta2_Article_Categories">
                <xen:map from="$article.categories.cats" to="$categories" />
            </xen:include>
        </div>
    </div>
</div>

tiếp vào Edit Template: EXTRA.css

thêm css sau:
Mã:
.articleItem .subHeading
{
    font-size: 24px !important;
    white-space: inherit !important;
    border: 1px solid rgb(9, 41, 70);
    border-bottom: 0;
}

.articleItem .subHeading a
{
    color: #fafafa;
}
.v_c_h
{
    margin-left: 10px;
    float: right;
}

.sectionFooter
{
   background: none;
   border: none;
}

.messageText {
    font-size: 16px;
    font-family: Helvetica,Arial,sans-serif;
    line-height: 1.5;
}

.articleItem .excerptContent {
    font-size: 16px;
    font-family: Helvetica,Arial,sans-serif;
    line-height: 1.5;
}

.articleItem .messageUserBlock {
    margin-left: 0 !important;
    float: none !important;
    background: 0;
    border: 0;
    padding-top: 10px;
}

.subHeading {
    background: #01527B;
}

Xem demo tại: http://changvangz.com
cái này bị lỗi ạ
 

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

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom