Thủ Thuật Công Nghệ: Giao diện trang chủ XenPotal giống tinhte.vn

Demo: http://thongthai.tk/

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)

Demo: http://thongthai.tk/

- Mở template xenforo_sections.css thay toàn bộ nội dung trong đó bằng code sau:

Mã:

.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: copy

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

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

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

style="width:860px !important;"

<xen:foreach loop="$RecentNews" value="$news">

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

<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">

<xen:contentcheck>

<xen:if is="{$news.attach}">

<xen:elseif is="{$news.image}" />

<xen:elseif is="{$news.medio}" />

</div>

<xen:elseif is="{$news.image}" />

<xen:else />

<xen:avatar user="$news" size="m" itemprop="photo" />

</xen:if>

</xen:contentcheck>

</div>

</xen:if>

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

</div>

{xen:phrase continue_reading}

</a>

</div>

</xen:foreach>

<xen:if hascontent="true">

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

=>sửa kích thước tìm max-high: 500 hoặc gõ 500 là ra

Demo: http://thongthai.tk/

Thủ Thuật Công Nghệ

November 8, 2014

Giao diện trang chủ XenPotal giống tinhte.vn

No comments:

Post a Comment