XENFTUT - Hướng dẫn tạo trang chủ XenPortal tin tức cho xenforo giống idichvuseo

Hướng dẫn tạo trang chủ xenporta tin tức đơn giản giống idichvuseo

Chuẩn bị:
Bạn cần có gói cài đặt xenporta của 8wayRun, ở đây mình sử dụng bản 1.6.0. Bạn nào chưa có gói install này vui lòng download tại link http://www.fshare.vn/file/3LEYFW15E8QQ
Hướng dẫn:
Bạn tải về và upload các file và thư mục trong đó về ngang cấp với thư mục trên diễn đàn.
Sau đó install addons xenporta bằng file addon-EWRporta.xml trong thư mục "library/EWRporta"
Sau khi install, bạn chưa có Portal đẹp liền, cần phải chỉnh sửa lại một chút mới hiện đẹp được:

TẠO TRANG CHỦ XENPORTAL TIN TỨC CHO XENFORO

Bạn cần vào admincp để kích hoạt addon EWRporta
/admin.php?ewrporta/layouts/portal/edit

TẠO TRANG CHỦ XENPORTAL TIN TỨC CHO XENFORO

Bạn kéo thả theo cách bố trí của bạn. Mình thì kéo theo cách đơn giản 2 cột thôi.
Save lại và quay ra trang chủ nhé

TẠO TRANG CHỦ XENPORTAL TIN TỨC CHO XENFORO

Tiếp đến là set quyền cho nhóm administrator có quyền điều khiển porta:
/admin.php?user-groups/administrative.3/edit

TẠO TRANG CHỦ XENPORTAL TIN TỨC CHO XENFORO

Sau cùng tạo thử 01 post và promote ra trang chủ nhé

TẠO TRANG CHỦ XENPORTAL TIN TỨC CHO XENFORO

TẠO TRANG CHỦ XENPORTAL TIN TỨC CHO XENFORO

Nếu bạn cảm thấy nhàm chán với giao diện này, hãy thử customize lại một tý bằng cách sau:

Hướng dẫn tạo style portal hot giống tinhte cực đẹp

Đầu tiên chúng ta mở file EWRblock_RecentNews trong Templates của các bạn và thay tất cả băng code bên dưới

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

Tiếp theo chúng ta mở EWRblock_RecentNews.css trong Templates của các bạn và thêm code css bên dưới vào nhé.

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


 Và đây là thành quả:TẠO TRANG CHỦ XENPORTAL TIN TỨC CHO XENFORO

Đây là demo một trang Portal nổi tiếng tinhte.vn sử dụng template mình share trên.

TẠO TRANG CHỦ XENPORTAL TIN TỨC CHO XENFORO

Còn rất nhiều code Portal đẹp khác, nhưng vì điều kiện nên mình không post trong topic này. Hẹn gặp các bạn tại một post khác. Chúc các bạn tạo được một trang chủ Xenportal đẹp như ý.

Bài viết được chia sẻ bởi Team Thiết kế web chuyên nghiệp 123Corp.
Cảm ơn các bạn đã theo dõi.


Bài viết mới nhất

Google Plus

HotLine 0945 518 538

Tel 0906 308 380

Email : thietkeweb.123corp@gmail.com

Trụ sở chính: 60 Nguyễn Đình Chiểu, P.Đakao, Q.1, TPHCM
VPĐD: 14 Phạm Quý Thích, P.Tân Quý, Q.Tân Phú, TPHCM

Hotline 1: 0945 518 538 Email: thietkeweb.123corp@gmail.com
Back To Top