[xenforo] Styles Xenporta đẹp cho diễn đàn Xenforo giống giaitri4u,tinhte bản mới

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.
• tải http://hanhtrinhso.com/attachments/hotnews-zip.846/

Hàng mới hàng mới giaitri4u.com
Lưu ý: Các bạn đặt số tin cần lấy là 6 nha.
EWRblock_HotNews:

Mã:(Click để sao chép vào clipboard)

<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_HotNews.css" />

<div id="hotNews">
    <div class="hot_news">
    <xen:foreach loop="$HotNews" value="$news" i="$i">
           <xen:if is="{$i}==1">         
            <div class="item type1 fade">
              <div class="img">
              <span class="anhhao">
               <a href="{xen:link forums, $news}" title="{$news.node_title}" >{$news.node_title}</a>
               <br /><span class="aut"><a href="{xen:link members, $news}" class="username">{$news.username}</a></span>
               </span>
                <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 src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></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 src="{$news.image}" alt="{$news.image}"  /></a>
                            <xen:else />
                                <a href="{xen:link threads, $news}"><img src="http://hanhtrinhso.com/img/news.jpg" alt="{$news.title}" /></a>
                            </xen:if>
                            </xen:contentcheck>
                </xen:if>
                </xen:if>


              </div>
              <div class="tieude">
              <h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>
              </div>
              </div>
              <div class="clearFix"></div>
   
           <xen:elseif is="{$i}>=2 && {$i}<=3" /> 
           <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 src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></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 src="{$news.image}" alt="{$news.image}"  /></a>
                            <xen:else />
                                <a href="{xen:link threads, $news}"><img src="http://hanhtrinhso.com/img/news.jpg" alt="{$news.title}" /></a>
                            </xen:if>
                            </xen:contentcheck>
                </xen:if>
                </xen:if>

              
             </div>
            <div class="tieude">
              <h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>
            </div>
            </div>
             <xen:elseif is="{$i}>=4 && {$i}<=6" />
             <div class="item type3 nofade">
              <div class="img">
               <span class="anhhao"><span class="tthong">{$news.node_title}</span> </span>
                <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 src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></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 src="{$news.image}" alt="{$news.image}"  /></a>
                            <xen:else />
                                <a href="{xen:link threads, $news}"><img src="http://hanhtrinhso.com/img/news.jpg" alt="{$news.title}" /></a>
                            </xen:if>
                            </xen:contentcheck>
                </xen:if>
                </xen:if>

       
              </div>
              <div class="tieude">
                 <h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>
               </div>
              </div>
            <div class="clearFix"></div>

             </xen:if>
         </xen:foreach>
     </div>
</div>

EWRblock_HotNews.css:

Mã:(Click để sao chép vào clipboard)

.giaitri4u
{position: absolute;
top:0px;
background: url(rgba.php?r=0&g=206&b=209&a=153); background: rgba(0,206,209,0.6); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900CED1,endColorstr=#9900CED1);
font-size: 11px;
color: #fff;
padding: 3px 5px;
right:0px;
}
.anhhao
{position: absolute;
background: url(rgba.php?r=0&g=0&b=0&a=76); background: rgba(0,0,0,0.3); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
top: 7px;
font-size: 13px;
color: #fff;
padding: 3px 5px;
right:2px;
float: right;}
.aut {
background: transparent url(/img/icon/post/play.png) no-repeat center left;
padding-left: 16px;
font-size: 11px;
color: gray;
}

.img .tthong {
background: none !important;
border: none;
color:white;
font-size:13px;
font-weight:normal;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px; -moz-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px;
display: inline-block;}
.img .prefix {
background: none !important;
border: none;
color:white;
font-size:13px;
font-weight:normal;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px; -moz-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px;
display: inline-block;}
#hotNews{
    float: center;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    height: 100%;
}
.hot_news {
margin-top: 0px;
-webkit-box-shadow: 0 0 5px #b8b8b8;
-moz-box-shadow: 0 0 5px #b8b8b8;
-khtml-box-shadow: 0 0 5px #b8b8b8;
-webkit-box-shadow: 0 0 5px #b8b8b8;
-moz-box-shadow: 0 0 5px #b8b8b8;
-khtml-box-shadow: 0 0 5px #b8b8b8;
-webkit-box-shadow: 0 0 5px #b8b8b8;
-moz-box-shadow: 0 0 5px #b8b8b8;
-khtml-box-shadow: 0 0 5px #b8b8b8;
-webkit-box-shadow: 0 0 5px #b8b8b8; -moz-box-shadow: 0 0 5px #b8b8b8; -khtml-box-shadow: 0 0 5px #b8b8b8; box-shadow: 0 0 5px #b8b8b8;
background: #fff;
float: left;
width: 677px;
height: 414px;
overflow: hidden;
}
.hot_news a {font-weight: bold;color: #FFFFFF;}
.hot_news .item {
    float: left;
    padding: 2px 2px 0;
    position: relative;
}
.hot_news .ud {
    float: left;
    padding: 2px 1px 0;
    position: relative;
}
.hot_news .type1 .tieude:hover {text-decoration: none !important;
background: url(rgba.php?r=0&g=138&b=192&a=229);
background: url(rgba.php?r=0&g=138&b=192&a=229); background: rgba( 0,138,192,0.9); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);

}
.tieude a {
display: block;
height: 35px;
font-size: 13px;
font-weight: bold;
line-height: 18px;
text-decoration: none !important;
overflow: hidden;
}
.hot_news .type1 .tieude {
    width: 438px;
    font-size: 20px;
    outline: medium none;
}
.hot_news .type2 {
    padding-left: 0;
    width: 214px;
}
.hot_news .type2 .tieude {
    width: 204px;
}
.hot_news .type3 {
    height: 140px;
    padding-right: 0;
}
.hot_news .type3 .tieude {
    width: 195px;
}
.hot_news .type1 div.img img {
    height: 266px;
    width: 448px;
}
.hot_news .type2 div.img img {
    height: 131px;
    width: 223px;
}
.hot_news .type3 div.img img {
    height: 140px;
    width: 223px;
}
.hot_news .item .tieude {
    height: 50px;
    padding: 5px;
    text-align: left;
}

.hot_news .item .tieude .description span{
    font-size: 12px !important;
}
.hot_news .type2 .tieude
{
background: url(rgba.php?r=0&g=0&b=0&a=178);
background: url(rgba.php?r=0&g=0&b=0&a=178); background: rgba( 0,0,0,0.7); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
position: absolute;
z-index: 100;
bottom: 0;
padding: 5px 10px;
overflow: hidden;
display: block;
width: 203px;
}
.hot_news .type2 .tieude:hover  {
background: url(rgba.php?r=0&g=138&b=192&a=229);
background: url(rgba.php?r=0&g=138&b=192&a=229); background: rgba( 0,138,192,0.9); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);
_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);
transition: all 0.8s ease 0s;
}
.hot_news .type3 .tieude 
{
background: url(rgba.php?r=0&g=0&b=0&a=178);
background: url(rgba.php?r=0&g=0&b=0&a=127); background: rgba( 0,0,0,0.5); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
position: absolute;
z-index: 100;
bottom: 0;
padding: 5px 10px;
overflow: hidden;
width: auto;
display: block;
width: 203px;
}
.hot_news .type3 .tieude:hover {text-decoration: none !important;
background: url(rgba.php?r=0&g=138&b=192&a=229);
background: url(rgba.php?r=0&g=138&b=192&a=229); background: rgba( 0,138,192,0.9); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);
_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);
transition: all 0.3s ease 0s;

}
.hot_news .fade .tieude {
    background: url("http://giaitri4u.com/styles/itviet/Images/opacity.png") repeat scroll 0 0 transparent;
    bottom: 0;
    font-size:15px;
    position: absolute;
}
.hot_news .fade .tieude:hover {
    opacity: 2;
}
.hot_news .type2 .tieude h3 {
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 10px;
}
.hot_news .type3 .tieude h3 {
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 10px;
}

.hot_news .fade .tieude {
    line-height: 22px;
}