Help Cái block hotnews đẹp quá mọi người

lacluoc · 20/04/2016

Cái block hotnews đẹp quá mọi người nhưng mỗi tội không hiển thị ảnh bài viết và không hiển thị không phù hợp trên giao diện mobile.
Bạn nào chỉnh sửa giúp mình hiển thị phù hợp trên mobile hoặc cho nó không hiện trên mobile mà chỉ hiện trên PC cũng được.

EWRblock_HotNews:

Mã:

<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ã:

.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;
}

lacluoc · 03/05/2016

Bạn nào biết hướng dẫn mình chỉnh cho phù hợp với mobile với

lacluoc · 04/05/2016

vutrong · 04/05/2016

xin cái demo

lacluoc · 04/05/2016

vutrong nói:
xin cái demo

đây bạn:

gaulata · 05/05/2016

hàng của giaitri4u.com đây mà .

Người đăng	Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
R	Help Mong anh em giúp đỡ cái đặt xenforo	Addon, Styling and Customization Questions	7	27/06/2024
D	Help Cài đặt event cho Dragonbyte credits	Addon, Styling and Customization Questions	0	03/06/2024
D	Help Cần hỗ trợ cài addon	Addon, Styling and Customization Questions	3	15/05/2024
D	Help Lỗi khi cài addon Brivium Static	Addon, Styling and Customization Questions	6	15/05/2024
	Help xin cách xóa cái logo xenforo	Addon, Styling and Customization Questions	3	07/05/2024

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

Help Cái block hotnews đẹp quá mọi người

lacluoc

Corporal

lacluoc

Corporal

lacluoc

Corporal

vutrong

Corporal

lacluoc

Corporal

gaulata

Gefreiter

Chủ đề tương tự

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

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ

Thông tin chung

LIÊN KẾT

LIÊN KẾT

LIÊN KẾT