Cài đặt & Thiết lập XenPorta (Portal) - Tải về XenPorta tại
http://vietxf.org/threads/8wayrun-com-xenporta-portal-1-5-3a.95/- Cài đặt như bình thường (giống như trong topic tải về đã có hướng dẫn)
- Vào
ACP>>Xenporta>>Option thiết lập như trong hình sau:
- Vào ACP>>Xenporta>>Layout>>Portal khéo Recent News Block vào vị trí Top-Right
- Vào ACP>>Xenporta>>Blocks chọn Recent News và thiết lập như trong hình sau:
Chỉnh sửa giao diện (styles)
- Mở template xenforo_sections.css thay toàn bộ nội dung trong đó bằng code sau:
.section
{
@property "section";
margin: 10px auto;
@property "/section";
}
.sectionMain
{
@property "sectionMain";
background-color: @contentBackground;
padding: 10px;
margin: 10px auto;
border: 1px solid @primaryLighter;
border-radius: 10px;
@property "/sectionMain";
}
.heading,
.xenForm .formHeader
{
@property "heading";
font-weight: bold;
font-size: 11pt;
color: @primaryLightest;
background-color: @primaryLightish;
padding: 5px 10px;
margin-bottom: 3px;
border-bottom: 1px solid @primaryMedium;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
@property "/heading";
}
.heading a { color: @heading.color; }
.subHeading
{
@property "subHeading";
font-size: 11px;
color: @secondaryDarker;
background: @secondaryLighter url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 5px 10px;
margin: 3px auto 0;
border-top: 1px solid @secondaryLighter;
border-bottom: 1px solid @secondaryLight;
@property "/subHeading";
}
.subHeading a { color: @subHeading.color; }
.textHeading,
.xenForm .sectionHeader
{
@property "textHeading";
font-weight: bold;
color: @contentText;
padding-bottom: 2px;
margin: 10px auto 5px;
border-bottom: 1px solid @primaryLighterStill;
@property "/textHeading";
}
.xenForm .sectionHeader,
.xenForm .formHeader
{
margin: 10px 0;
}
.primaryContent > .textHeading:first-child,
.secondaryContent > .textHeading:first-child
{
margin-top: 0;
}
.larger.textHeading,
.xenForm .sectionHeader
{
color: @primaryLighter;
font-size: 11pt;
margin-bottom: 6px;
}
.larger.textHeading a,
.xenForm .sectionHeader a
{
color: @primaryLighter;
}
.primaryContent
{
@property "primaryContent";
background-color: #FFFFF;
padding: 10px;
@property "/primaryContent";
}
.primaryContent a
{
@property "primaryContentLink";
color: @primaryMedium;
@property "/primaryContentLink";
}
.secondaryContent
{
@property "secondaryContent";
background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 10px;
border-bottom: 1px solid @primaryLighterStill;
@property "/secondaryContent";
}
.secondaryContent a
{
@property "secondaryContentLink";
color: @primaryMedium;
@property "/secondaryContentLink";
}
.sectionFooter
{
@property "sectionFooter";
font-size: 11px;
color: @primaryLightish;
padding: 4px 10px;
line-height: 16px;
@property "/sectionFooter";
}
.sectionFooter a { color: @sectionFooter.color; }
/* used for section footers with central buttons, esp. in report viewing */
.actionList
{
text-align: center;
}
/* left-right aligned options */
.opposedOptions
{
overflow: hidden; zoom: 1;
}
.opposedOptions .left
{
float: left;
}
.opposedOptions .right
{
float: right;
}
.subHeadingportal {
border-bottom: 1px solid #D6F0FF;
color: #285E8D;
font-size: 12pt;
font-weight: bold;
margin-bottom: 5px;
padding-bottom: 2px;
}
.subHeadingportal a { color: #285E8D; }
.sectionFooterportal
{
@property "sectionFooter";
font-size: 11px;
color: @primaryLightish;
padding: 4px 10px;
line-height: 16px;
@property "/sectionFooter";
}
.sectionFooterportal a { color: @sectionFooter.color; }
.primaryContentportal
{
@property "primaryContent";
background-color: #FFFFF;
padding: 10px;
@property "/primaryContent";
}
.primaryContentportal a
{
@property "primaryContentLink";
color: @primaryMedium;
@property "/primaryContentLink";
}
.sectionMainportal
{
border: 1px solid #D6F0FF;
border-radius: 10px 10px 10px 10px;
margin: 10px auto;
padding: 10px;
}
- Mở template
EWRblock_RecentNews thay toàn bộ nội dung trong đó bằng code sau:
<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="section sectionMainportal recentNews" id="{$news.thread_id}">
<div class="primaryContentportal {xen:if {$option.leftdate}, 'leftDate'}">
<div class="subHeadingportal">
<div style="float: right; white-space: nowrap;">
<xen:if is="{$visitor.permissions.EWRporta.canPromote}"> (<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="messageContent baseHtml">
<div class="postedBy">
<span class="posted">bởi <a href="{xen:link members, $news}" class="username">{$news.username}</a>, lúc <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="{$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}" title="Nhấp chuột vào đây để xem"/></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 class="continue">
<a href="{xen:link threads, $news}" style="background: transparent url('@imagePath/xenforo/icons/redirect.png') no-repeat left bottom; padding-left: 20px;">
{xen:phrase continue_reading}
</a>
</div>
</div>
</div>
</div>
</xen:foreach>
<xen:if hascontent="true">
<div class="section sectionMain">
<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>
- Mở template
EWRblock_RecentNews.css thay toàn bộ nội dung trong đó bằng code sau:
.recentNews .subHeadingportal { margin: -10px -10px 10px; }
.recentNews .subHeadingportal a { color: #285E8D; }
.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; }
.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; }
