minhdat
Corporal
- Tham gia
- 18/11/2015
- Bài viết
- 153
- Được Like
- 94
Ảnh Xenporta của mình:
đầ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:
tiếp vào Edit Template: EXTRA.css
thêm css sau:
Xem demo tại: http://changvangz.com
đầ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="{"fixed":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="{"fixed":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
Bài viết liên quan
Bài viết mới
)
