Slider Block Cho Xenporta Xenforo

Admin

Administrator
Thành viên BQT
#1
Slider Block Cho Xenporta Xenforo

1.jpg


Bước 1: Cài block HotNews
  • Yêu cầu: Bạn phải cài Add-on XenPorta
  • Thực hiện: Nếu đã cài add-on vậy thì bạn hãy giải nén file mình đính kèm phí dưới ra, có một file mang tên làHotNews.xml, bạn import này bằng cách chọn Blocks > Install Block ở mục XenPorta trong Bảng quản trị viên. Đối với những bạn chưa biết cài Xenporta các bạn có thể comment phía dưới mình hướng dàn luôn.
Bước 2: Chỉnh sửa block HotNews Xenforo cho giống với MetroUI
Đầu tiên bạn vào trình chọn giao diện trong bảng quản trị viên, sau đó hãy chọn giao diện mà bạn muốn cho block HotNews này hiện kiểu Metro tiếp đó bạn vào phần Templates giao diện vừa chọn search templates mang tên EWRblock_HotNews thay toàn bộ code trong phần này bằng code sau:
Mã:
<xen:elseif is="{$news.medio}" />

<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>
</div>
<xen:elseif is="{$news.image}" />
<a href="{xen:link threads, $news}"><img title="{$news.title}" src="{$news.image}" alt="{$news.title}" /></a>
<xen:else />
<a href="{xen:link threads, $news}"><img title="{$news.title}" src="" alt="{$news.title}" /></a>
</xen:if>
</xen:contentcheck>
</xen:if>
</xen:if>
</div>
<div class="title">
<h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>
</div>
</div>
<div class="clearFix"></div>
<xen:else />
<div class="item type2 nofade">
<div class="img">
<xen:if is="{$news.promote_icon} != 'disabled'">
<xen:if hascontent="true">
<xen:contentcheck>
<xen:if is="{$news.attach}">
<a href="{xen:link threads, $news}"><img title="{$news.title}" src="{$news.attach.thumbnailUrl}" alt="{$news.title}" /></a>
<xen:elseif is="{$news.medio}" />
<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>
</div>
<xen:elseif is="{$news.image}" />
<a href="{xen:link threads, $news}"><img title="{$news.title}" src="{$news.image}" alt="{$news.title}" /></a>
<xen:else />
<a href="{xen:link threads, $news}"><img title="{$news.title}" src="" alt="{$news.title}" /></a>
</xen:if>
</xen:contentcheck>
</xen:if>
</xen:if>
</div>
<div class="title">
<h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>
</div>

</div>
</xen:if>
</xen:foreach>
</div>
</div>
Save code này lại và chọn tiếp template EWRblock_HotNews.css rồi thay toàn bộ code trong này bằng code sau:


Mã:
[HASHTAG]#hotNews[/HASHTAG]{

float: left;
margin-bottom: 15px;
width: 100%;
height: 100%;
}
.hot_news {
background-color: [HASHTAG]#FFFFFF[/HASHTAG];
float: left;
padding: 1px 1px 1px 1px;
}
.hot_news .item {
float: left;
padding: 0px 1px 1px 1px ;
position: relative;
}

.hot_news .type2 {

padding-left: 0;
}
.hot_news .type2 .title {
width: 194px;
outline: medium none;
}
.hot_news .type2 div.img img {
height: 200px;
width: 240px;
overflow: hidden;
}

.hot_news .type1 .title {
width: 436px;
font-size: 18px;
outline: medium none;
}

.hot_news .type1 div.img img {
height: 200px;
width: 482px;
}
.hot_news .item .title {
height: 71px;
padding: 6px 23px 6px 23px;
text-align: left;
}
.hot_news .fade .title {
background-image: linear-gradient(to bottom right,[HASHTAG]#690[/HASHTAG],rgba(102, 153, 0, 0.5));
bottom: 3px;
position: absolute;
}
.hot_news .nofade .title {
background-image: linear-gradient(to bottom right,[HASHTAG]#690[/HASHTAG],rgba(102, 153, 0, 0.5));
bottom: 3px;
position: absolute;

}
.hot_news .type2 .title h3 {
font-size: 140%;
line-height: inherit;
}
.hot_news .type3 .title h3 {
font-size: 16px;
line-height: inherit;
}
.hot_news .type3 .title h3:hover {
text-decoration: none;
}
.hot_news .fade .title a {
color: [HASHTAG]#ffffff[/HASHTAG];
}

.hot_news .nofade .title a {
color: [HASHTAG]#ffffff[/HASHTAG];
}
Save code lại. Vậy là bạn đã hoàn thành! Nếu có gì thắc mắc bạn hãy comment phía dưới. Mình sẽ hỗ trợ .
Chúc bạn thành công!
 
Top