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 linkhttp://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:
Bạn cần vào admincp để kích hoạt addon EWRporta
/admin.php?ewrporta/layouts/portal/edit
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é
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
Sau cùng tạo thử 01 post và promote ra trang chủ nhé
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}">
(<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ả:
Đây là demo một trang Portal nổi tiếng tinhte.vn sử dụng template mình share trên.
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.