Help Xin giúp trang chủ kiểu tinh tế

lacluoc · 08/12/2015

Mình đã thử mấy kiểu chia sẻ trang chủ kiểu tinh tế nhưng đều bị lỗi, có 1 kiểu mình thấy ưng nhất nhưng nó vẫn bị lỗi hiển thị quá nhiều ảnh trang chủ, các bạn giúp mình chỉnh sao cho nó chỉ hiển thị 1 ảnh thôi với và cho hiển thị phù hợp trên mobile

Đây là bài mình đã làm theo. Cảm ơn các bạn
EWRblock_RecentNews

PHP:

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

<div id="recentNews">
<xen:foreach loop="$RecentNews" value="$news">
<div class="recentNews sectionMainportal section" id="{$news.thread_id}">

<div class="'leftDate'} {$option.leftdate}, {xen:if primaryContent">
<div class="subHeading">
<div style="float: right; white-space: nowrap;">

<xen:if is="{$visitor.permissions.EWRporta.canPromote}">
&nbsp; (<a href="{xen:link 'threads/edit', $news}" class="OverlayTrigger">{xen:phrase edit}</a>)
</xen:if>
</div>

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


<div class="baseHtml messageContent">
<div class="postedBy">
<span class="posted">bởi <a href="{xen:link members, $news}"class="username">{$news.username}</a>
vào <a href="{xen:link threads, $news}">{xen:datetime $news.promote_date}</a></span>

</div>

<xen:if is="{$news.promote_icon} != 'disabled'">
<xen:if hascontent="true">
<div style="hinhanh">
<div style="text-align: center">
<xen:contentcheck>
  <xen:if is="{$news.attach}">
  <a href="{xen:link threads, $news}"><img src="{xen:link attachments,$news.attach}" style="max-width:500px; margin-bottom: 10px;" 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}" style="max-height: 500px; max-width: 500px;" /></a>
  <xen:else />
  <xen:avatar user="$news" size="m" itemprop="photo" />
  </xen:if>
  </xen:contentcheck>

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

<div class="newsText">{xen:raw $news.messageHtml}</div>
<div class="clearFix"></div>
</div>

<div class="sectionFooterportal">
</div>
</div>
</div>
</xen:foreach>

<xen:if hascontent="true">
<div class="sectionMain section">
<xen:contentcheck>
<xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}">
<xen:if is="{$category}">
<xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
<xen:else />
<xen:pagenav link="portal" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
</xen:if>
</xen:if>
</xen:contentcheck>
</div>
</xen:if>
</div>

EWRblock_RecentNews.css

PHP:

.recentNews .subHeadingportal { margin: -10px -10px 10px; }
.recentNews .subHeadingportal a { color: #ff7f00; }
.recentNews .messageUserBlock { float: right; margin-left: 10px; }

.recentNews .newsDate { float: left; margin: 0px 10px 10px 0px; padding: 0px 10px 5px; width: 35px; font-weight: bold; text-align: center; }
.recentNews .newsDate .newsMonth { padding: 10px 0px 5px !important; margin: 0px -10px 5px !important; text-transform: uppercase; }
.recentNews .newsDate .newsDay { font-size: 26px; }

.recentNews .leftDate .newsDate { margin-left: -45px; }
.recentNews .leftDate .newsText {
text-align: justify;
}

.recentNews .messageContent { font-size: 13px; text-align:justify;}
.recentNews .messageContent .postedBy { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dashed @primaryLighterStill; }
.recentNews .messageContent .username { font-weight: bold; }
.recentNews .messageContent .posted { background: transparent url('@imagePath/xenforo/icons/sticky.png') no-repeat left bottom; padding-left: 20px; }
.recentNews .messageContent .comments { float: right; background: transparent url('@imagePath/xenforo/widgets/discussion-new.png') no-repeat left bottom; padding-left: 20px; font-weight: bold; }
.recentNews .messageContent .clearFix { clear: right; }

.recentNews .sectionFooterportal { margin: 10px -10px -10px; text-align: right; position: relative; }
.recentNews .sectionFooterportal .continue { padding: 6px; font-size: 12px; }
.recentNews .sectionFooterportal .continue a { background: transparent url('@imagePath/xenforo/icons/redirect.png') no-repeat left bottom; padding-left: 20px; }
.recentNews .sectionFooterportal .continue a:hover { text-decoration: none; }
.recentNews .sectionFooterportal .source { padding-top: 6px; float: left; }
.recentNews .sectionFooterportal .sharePage { position: absolute; }
.recentNews .sectionFooterportal .shareControl { margin-top: 4px !important; }

#recentNews .recentNews.sectionMain {
background-color: transparent;
border: 0px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-khtml-box-shadow: none;
-khtml-box-shadow: none;
padding: 0px;
}

#recentNews .recentNews .subHeading, #recentThreads .sectionHeaders {
border: 0px;
font-size: 16px;
color: #666;
background: #F1F1EC url('@imagePath/styles/flexile/xenforo/gradients/navigation-tab.png') repeat-x top;
padding: 10px 15px;
margin: 0 -15px 10px;
border-bottom: 1px solid rgb(214,214,214);
border-top-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-khtml-border-top-left-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
-khtml-border-top-right-radius: 6px;
}

#recentNews .recentNews .subHeading a, #recentThreads .sectionHeaders a {
font-size: 22px !important;
font-family: Helvetica,Arial,sans-serif!important;
font-weight: bold !important;
color: #333 !important;
}


.mainContentportal {
margin: -15px 315px 0 0 !important;
background-color: transparent;
border: 0px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
box-shadow: none !important;
-moz-box-shadow: none !important;
padding: 0px;
}

#content.EWRporta_Portal .mainContent {
background-color: transparent;
border: 0px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
box-shadow: none !important;
-moz-box-shadow: none !important;
padding: 0px;
overflow: hidden;
}

#content.EWRporta_Portal .breadBoxTop, #content.EWRporta_Portal .titleBar {
display: none;
}