- Tham gia
- 28/02/2015
- Bài viết
- 16,830
- Được Like
- 12,694
Slide TopStory giống Tinh Tế có responsive
Share cho các bạn slide bài hot của Tinh Tế có thể responsive auto cập nhật hoặc tự chọn bài viết đều được.
Sau khi responsive
Hướng dẫn:
Vào template: EWRblock_RecentNews thay thế toàn bộ bằng code sau
Thay thế toàn bộ EWRblock_RecentNews.css bằng code sau:
Save lại là ok.
Share cho các bạn slide bài hot của Tinh Tế có thể responsive auto cập nhật hoặc tự chọn bài viết đều được.
Sau khi responsive
Vào template: EWRblock_RecentNews thay thế toàn bộ bằng code sau
Mã:
<xen:require css="EWRblock_RecentNews.css" />
<div class="topstories UTPTopNews responsive" style="display: block;">
<div class="grid_holder">
<xen:foreach loop="$RecentNews" value="$news">
<a title="{$news.title}" class="a_block" href="{xen:link threads, $news}">
<xen:if is="{$news.attach}">
<img class="block_img" src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" />
<xen:elseif is="{$news.medio}" />
<img class="block_img" src="styles/8wayrun/EWRmedio_play.png" alt="{$news.title}" />
<xen:elseif is="{$news.image}" />
<img class="block_img" src="{$news.image}" alt="{$news.title}" />
<xen:else />
<img class="block_img" src="http://images.puella-magi.net/2/27/No_Image_Wide.svg" alt="{$news.title}" />
</xen:if>
<div class="txt_holder">
<p>
<span class="txts">{$news.title}</span>
<span class="bg"></span>
</p>
<div class="timestamp">
<span class="txts">
</span>
<span class="bg"></span>
</div>
</div>
</a>
</xen:foreach>
</div>
<div class="clear"></div>
</div>
Thay thế toàn bộ EWRblock_RecentNews.css bằng code sau:
Mã:
.topstories{min-width:300px;padding-bottom:20px;width:100%;padding: 0 10px;}.topstories
.a_block{display:inline;float:left;margin-bottom:1px;margin-left:1px;position:relative;text-decoration:none;height:150px;overflow:hidden}.topstories
.a_block_first{margin-left:0}.topstories .a_block
img{display:inline;float:left}.topstories .a_block
.txt_holder{bottom:0;cursor:pointer;left:0;position:absolute;width:100%}.topstories .a_block .txt_holder
p{color:#FFF;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:16px;padding:8px
10px;position:relative;text-decoration:none}.topstories .a_block .txt_holder p:hover{color:#AAA}.topstories .a_block_hover .txt_holder
p{color:#00BDF6}.topstories .a_block .txt_holder p
.txts{position:relative;z-index:10}.topstories .a_block .txt_holder p
.bg{background:none repeat scroll 0 0 #003350;border:0
none;bottom:0;height:100%;left:0;opacity:0.6;position:absolute;width:100%}.topstories .a_block .txt_holder .timestamp, .topstories .a_block .txt_holder
.badge{border:0
none;color:#DDD;font-size:10px;line-height:20px;padding:0
10px;position:absolute;text-transform:uppercase;top: -20px}.topstories .a_block .txt_holder .timestamp .txts, .topstories .a_block .txt_holder .badge
.txts{font-family:georgia,serif;position:relative;z-index:10}.topstories .a_block .txt_holder .timestamp .txts .smaller, .topstories .a_block .txt_holder .badge .txts
.smaller{font-size:9px}.topstories .a_block .txt_holder .timestamp
.bg{background:none repeat scroll 0 0 #49853E;border:0
none;bottom:0;height:100%;left:0;opacity:0.6;position:absolute;width:100%}.topstories
.a_block_lg{height:150px;width:400px}.topstories .a_block_lg
p{width:380px}.topstories
.a_block_md{height:150px;width:280px}.topstories .a_block_md
p{width:260px}.topstories
.a_block_sm{height:150px;width:226px}.topstories .a_block_sm
p{width:206px}.topstories
.a_block_more{height:80px;width:226px}.topstories .a_block_sm
p{width:206px}
.topstories .a_block:first-child,.topstories .a_block:nth-child(2) {
width: 49.2%;
float:left;
}
.topstories .a_block:first-child img,
.topstories .a_block:nth-child(2) img,.topstories .a_block:nth-child(3) img,
.topstories .a_block:nth-child(4) img,.topstories .a_block:nth-child(5) img
{
width: 100%;
}
.topstories .a_block:nth-child(3),
.topstories .a_block:nth-child(4),
.topstories .a_block:nth-child(5)
{
width: 32.8%;
float:left;
}
@media (max-width:410px)
{
.Responsive .topstories .a_block:nth-child(3),
.topstories .a_block:nth-child(4),
.topstories .a_block:nth-child(5)
{
width: 100%;
float: left;
}
}
Save lại là ok.
Nguồn: SXF
Bài viết liên quan
Bài viết mới
Bị lỗi data
bởi bloghocpiano,