Mình thấy có nhiều người thích cái Style XenPorta 2 của SEOMXH, vì vậy sau khi rip xong mình đã trích riêng ra cho anh em nào thích thì lấy về sử dụng. Link tải XenPorta 2 thì anh em xem ở bài viết này: http://vnxf.vn/8wayrun-com-xenporta-2-portal-pro-1-1-7a.t5752.html/page-2#post-37043 Live demo: http://vpet.vn/index.php Nào!, bây giờ chúng ta bắt đầu thay đổi template nhé. Trước tiên chúng ta cần sửa lại đôi chút kết cấu của XenForo đã, các bạn mở template "PAGE_CONTAINER" Tìm đoạn code sau: Mã: {xen:raw $topctrl} 1 Sau đó thay đoạn code phía trên bằng đoạn code dưới đây: Mã: {xen:raw $topctrl} 1 Phần kết cấu xong rồi, bây giờ chúng ta bắt tay vào áp dụng cho XenPorta 2 thôi nào. Các bạn tìm và mở Template "EWRporta2_ArticleList" sau đó thay tất cả bằng code dưới đây. Mã: {xen:phrase porta2_author}: {$author.author_name} {xen:phrase porta2_author}: {$author.author_name} {xen:phrase porta2_viewing_only_articles_authored_by_x, 'author={$author.author_name}'} {xen:phrase porta2_articles} {xen:phrase porta2_authors} {$category.category_name} {$category.category_name} {$category.category_desc} {xen:phrase porta2_viewing_only_articles_categorized_with_x, 'cat={$category.category_name}'} {xen:phrase porta2_articles} {$xenOptions.boardTitle} {$xenOptions.EWRporta2_metadesc}{$xenOptions.boardDescription} {xen:link 'canonical:articles'} {$xenOptions.boardTitle} {$xenOptions.EWRporta2_metadesc}{$xenOptions.boardDescription} website articles 1 1 featuresGrid {$xenOptions.EWRporta2_features_relocate} {$xenOptions.boardTitle} {$xenOptions.EWRporta2_metadesc}{$xenOptions.boardDescription} {xen:phrase porta2_pause_infinite_scrolling} {xen:phrase porta2_change_article_list_settings} {xen:phrase porta2_resume_infinite_scrolling} - Tiếp theo các bạn tìm tiếp template "EWRporta2_ArticleList_Bit" mở nó lên và thay bằng code dưới đây: Mã: {$article.article_title} {$article.username} {xen:date $article.article_date, 'd'}/{xen:date $article.article_date, 'm'}/{xen:date $article.article_date, 'y'} {xen:number $article.share_count} {xen:number $article.reply_count} {xen:number $article.view_count} {xen:raw $article.messageHtml} {$article.article_break}... Vậy là phần trang chủ XenPorta 2 đã được chúng ta định dạng, cuối cùng các bạn mở template "EWRporta2.css" và thêm vào dưới cùng đoạn css dưới đây. Mã: .EWRporta2_ArticleList .breadBoxTop, .EWRporta2_ArticleList .breadBoxBottom { display: none; } .EWRporta2_ArticleList .titleBar { display: none; } #T-Styles-Porta2 .titleBar { display: none } .introduce_supplier { background: url('@imagePath/img/introduceS.png'); padding: 12px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 2px 0px 0px rgb(226, 226, 226); -moz-box-shadow: 0 2px 0px 0px rgb(226, 226, 226); -khtml-box-shadow: 0 2px 0px 0px rgb(226, 226, 226); box-shadow: 0 2px 0px 0px rgb(226, 226, 226); border: 1px solid rgb(226, 226, 226) } .introduce_supplier h2 { color: #3a5795; font-size: 20px; padding-bottom: 10px; text-align: center; font-weight: 700 } @media (max-width: 480px) { .introduce_supplier h2 { font-size: 14px } } .introduce_supplier .desc { color: #666; font-style: italic; line-height: 20px; text-align: justify; text-align: justify } #T-Styles-Porta2 { padding-left: 35px; padding-bottom: 20px; background: url('@imagePath/img/line.gif') repeat-y 10px; zoom: 1; } #T-Styles-Porta2 .main { width: 100%; padding-top: 25px } #T-Styles-Porta2 .suppliers { -webkit-box-shadow: 0 2px 0px 0px rgb(226, 226, 226); -moz-box-shadow: 0 2px 0px 0px rgb(226, 226, 226); -khtml-box-shadow: 0 2px 0px 0px rgb(226, 226, 226); box-shadow: 0 2px 0px 0px rgb(226, 226, 226); -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; border: 1px solid rgb(226, 226, 226); background: #FFF; margin-bottom: 15px; position: relative } #T-Styles-Porta2 .suppliers .dot { background-image: url('@imagePath/img/dot.png'); background-repeat: no-repeat; background-position: 0 0; position: absolute; width: 20px; height: 20px; left: -34px; top: 82px; } #T-Styles-Porta2 .suppliers .dot_icon_2_t { background-position: 0 -20px } #T-Styles-Porta2 .suppliers .dot_icon_5_t { background-position: 0 -40px } #T-Styles-Porta2 .suppliers .dot_icon_4_t { background-position: 0 -60px } #T-Styles-Porta2 .suppliers .dot_icon_213_t { background-position: 0 -80px } #T-Styles-Porta2 .suppliers .dot_icon_87_t { background-position: 0 -100px } #T-Styles-Porta2 .suppliers .dot_icon_69_t { background-position: 0 -120px } #T-Styles-Porta2 .suppliers .dot_icon_67_t { background-position: 0 -140px } #T-Styles-Porta2 .suppliers .dot_icon_63_t { background-position: 0 -160px } #T-Styles-Porta2 .suppliers .dot_icon_70_t { background-position: 0 -180px } #T-Styles-Porta2 .suppliers .dot_icon_71_t { background-position: 0 -200px } #T-Styles-Porta2 .suppliers .dot_icon_74_t { background-position: 0 -220px } #T-Styles-Porta2 .suppliers .dot_icon_72_t { background-position: 0 -240px } #T-Styles-Porta2 .suppliers .dot_icon_84_t { background-position: 0 -260px } #T-Styles-Porta2 .suppliers .dot_icon_83_t { background-position: 0 -280px } #T-Styles-Porta2 .suppliers .dot_icon_77_t { background-position: 0 -300px } #T-Styles-Porta2 .suppliers .dot_icon_220_t { background-position: 0 -320px } #T-Styles-Porta2 .suppliers .dot_icon_112_t { background-position: 0 -340px } #T-Styles-Porta2 .suppliers .dot_icon_221_t { background-position: 0 -360px } #T-Styles-Porta2 .suppliers .dot_icon_115_t { background-position: 0 -380px } #T-Styles-Porta2 .suppliers .dot_icon_122_t { background-position: 0 -400px } #T-Styles-Porta2 .suppliers .dot_icon_73_t { background-position: 0 -420px } #T-Styles-Porta2 .suppliers .dot_icon_110_t { background-position: 0 -440px } #T-Styles-Porta2 .suppliers .dot_icon_111_t { background-position: 0 -460px } #T-Styles-Porta2 .suppliers .dot_icon_46_t { background-position: 0 -480px } #T-Styles-Porta2 .suppliers .dot_icon_96_t { background-position: 0 -500px } #T-Styles-Porta2 .suppliers .dot_icon_97_t { background-position: 0 -520px } #T-Styles-Porta2 .suppliers .dot_icon_98_t { background-position: 0 -540px } #T-Styles-Porta2 .suppliers .dot_icon_99_t { background-position: 0 -560px } #T-Styles-Porta2 .suppliers .dot_icon_57_t { background-position: 0 -580px } #T-Styles-Porta2 .suppliers .arrow { width: 11px; height: 22px; background: url('@imagePath/img/arrow.png') no-repeat 0 0; position: absolute; left: -11px; top: 80px } #T-Styles-Porta2 .suppliers_area { display: table; table-layout: fixed; width: 100%; word-wrap: normal; padding: 15px; border-top: 1px solid rgb(240, 240, 240); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; text-align: justify; text-justify: newspaper } #T-Styles-Porta2 .suppliers_area .suppliers_left { float: left; width: 300px; height: 225px; margin-right: 15px } #T-Styles-Porta2 .suppliers_area .suppliers_author { font-size: 11px; color: #666; line-height: 20px; text-decoration: none } #T-Styles-Porta2 .suppliers_area .suppliers_author a:hover { color: #FF4163; text-decoration: none } #T-Styles-Porta2 h2.suppliers_promotion a:hover { color: #FF4163; text-decoration: none } #T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_img { width: 300px; height: 225px; overflow: hidden; position: absolute; left: 15px; top: 15px } #T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_img img { width: 300px; height: auto } #T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_desc { position: absolute; left: 330px; font-size: 13px; padding-right: 15px; color: #666; font-style: italic; line-height: 22px } #T-Styles-Porta2 .suppliers_promotion { font-size: 20px; background: rgb(250, 250, 250); padding: 15px; font-weight: 700 } #T-Styles-Porta2 .suppliers_promotion b { color: #FF4163 } #T-Styles-Porta2 .suppliers_promotion a:hover { color: #FF4163; text-decoration: none } .suppliers_ribbon { position: absolute; right: -6px; top: -6px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right } .suppliers_ribbon span { font-size: 10px; font-weight: bold; color: #FFF; text-transform: uppercase; text-align: center; line-height: 20px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 100px; display: block; background: #79A70A; background: linear-gradient(#FF728B 0%, #FF4163 100%); -webkit-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); -moz-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); -khtml-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; top: 19px; right: -21px } .suppliers_ribbon span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #FF4163; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #FF4163 } .suppliers_ribbon span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #FF4163; border-bottom: 3px solid transparent; border-top: 3px solid #FF4163 } .PageNavsuppliers { background: url('@imagePath/img/introduceS.png'); padding: 12px; -webkit-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226); -moz-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226); -khtml-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226); box-shadow: 0 -2px 0px 0px rgb(226, 226, 226); border: 1px solid rgb(226, 226, 226) } .PageNavsuppliers .PageNav .itemL { float: right } .natMenuLevel0 { padding-left: 0px } .natMenuLevel1 { padding-left: 10px } .natMenuLevel2 { padding-left: 20px } .natMenuLevel3 { padding-left: 30px } .natMenuLevel4 { padding-left: 40px } .natMenuLevel5 { padding-left: 50px } .natMenuLevel6 { padding-left: 60px } .natMenuLevel7 { padding-left: 70px } .natMenuLevel8 { padding-left: 80px } .natMenuLevel9 { padding-left: 90px } .natMenuLevel10 { padding-left: 100px } .bbCodeImage { max-width: 100% } .content_threadinfo { float: left; overflow: hidden; position: relative; margin-bottom: 10px; border-bottom: 1px dashed #d7edfc; width: 100% } .avatarNews { display: block; float: left; margin: 0 5px 0 0px } .content_threadinfo .meta { display: block; min-height: 50px; float: left } .content_threadinfo .user { margin: 0px 0px 5px 0px; font-size: 12px; font-weight: 700; line-height: 19px } .content_threadinfo .DateTime { display: block; font-size: 11px } .content_threadinfo .like { color: #196eee; display: block; float: right; font-size: 15px; font-weight: bold; margin: 0 10px 0 0; padding: 2px 0 0 22px } .content_threadinfo .reply { color: #da4531; display: block; float: right; font-size: 15px; font-weight: bold; margin: 0 10px 0 0; padding: 2px 0 0 22px } .content_threadinfo .view { color: #009957; display: block; float: right; font-size: 15px; font-weight: bold; margin: 0 10px 0 0; padding: 2px 0 0 22px } #T-Styles-Porta2 .suppliers_area .newsText { font-size: 15px; line-height: 1.4; font-weight: 350; text-align: justify; text-justify: newspaper } @media (max-width: 961px) {}@media (max-width: 641px) { .content_threadinfo .like, .content_threadinfo .reply, .content_threadinfo .view { font-size: 11px; padding: 2px 0 0 5px } #T-Styles-Porta2 .suppliers_area .newsText, .content_threadinfo .user { font-size: 12px } .content_threadinfo .DateTime { font-size: 11px } #T-Styles-Porta2 .suppliers_area { display: none } #T-Styles-Porta2 .suppliers_promotion { font-size: 14px } #T-Styles-Porta2 .suppliers .dot { top: 20px } #T-Styles-Porta2 .suppliers .arrow { top: 18px } } @media (max-width: 481px) { .content_threadinfo .like, .content_threadinfo .reply, .content_threadinfo .view { font-size: 10px; padding: 2px 0 0 5px } #T-Styles-Porta2 .suppliers_area .newsText, .content_threadinfo .user { font-size: 11px } .content_threadinfo .DateTime { font-size: 10px } #T-Styles-Porta2 .suppliers_area { display: none } #T-Styles-Porta2 .suppliers_promotion { font-size: 13px } #T-Styles-Porta2 .suppliers .dot { top: 20px } #T-Styles-Porta2 .suppliers .arrow { top: 18px } } .grid { position: relative; margin: -3.3% -3% 0 -3%; _padding: 1em 0 4em; _max-width: 1000px; list-style: none; text-align: center; } /* Common style */ .grid .T-Thread-UserInfo { position: absolute; bottom: 10px; left: 10px; } .grid .T-Thread-UserInfo a { color: #fff; } .grid .T-Thread-UserInfo span { font-size: 18px; margin-top: -30px; } .grid .T-Thread-Avarta { float: left; margin-right: 15px; } .grid figure { position: relative; _float: left; overflow: hidden; margin: 10px 1%; _min-width: 320px; _max-width: 480px; _max-height: 360px; _width: 48%; background: #3085a3; text-align: center; cursor: pointer; } .grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.8; } .grid figure figcaption { _padding: 10px 20px; color: #fff; _text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; } .grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .grid figure h2 { _word-spacing: -0.15em; font-weight: 300; font-size: 21px; } .grid figure h2 span { font-weight: 800; } .grid figure h2, .grid figure p { margin: 0; } .grid figure p { letter-spacing: 1px; font-size: 68.5%; } figure.effect-sarah { background: #42b078; } figure.effect-sarah img { max-width: none; width: -webkit-calc(100% + 20px); width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } figure.effect-sarah:hover img { opacity: 0.4; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } figure.effect-sarah figcaption { text-align: left; } figure.effect-sarah h2 { position: relative; overflow: hidden; padding: 10px 15px; background-color: rgba(0, 0, 0, 0.25); text-transform: uppercase; } figure.effect-sarah h2::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #F44336; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); } figure.effect-sarah:hover h2::after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } figure.effect-sarah p { padding: 5px 15px; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%,0,0); -webkit-transform: translate3d(100%,0,0); -moz-transform: translate3d(100%,0,0); -o-transform: translate3d(100%,0,0); -ms-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); background-color: rgba(0, 0, 0, 0.25); } figure.effect-sarah p a { color: #fff; } figure.effect-sarah:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } @media screen and (max-width: 50em) { .content { padding: 0 10px; text-align: center; } .grid figure { display: inline-block; float: none; margin: 10px auto; width: 100%; } } Ok, bây giờ chúng ta tiếp tục thêm chút "màu mè" cho phần bài viết được Promotion bởi XenPorta 2 nhé. - Các bạn tìm và mở template "EWRporta2_ArticleView" sau đó thay tất cả bằng code dưới đây. Mã: {xen:helper threadPrefix, $thread, escaped}{$thread.title}{xen:helper pagenumber, $page} {xen:helper threadPrefix, $thread}{$thread.title} {xen:phrase discussion_in_x_started_by_y_date_z, 'forum={$forum.title}', 'name={xen:helper username, $thread}', 'date={xen:datetime $thread.post_date, html}'} {xen:link 'canonical:threads', $thread} {xen:helper threadPrefix, $thread, escaped}{$thread.title} {xen:helper snippet, $firstPost.message, 155} {xen:helper avatar, $thread, m, 0, 1} {xen:helper nodeClasses, $nodeBreadCrumbs, $forum}{xen:if {$xenOptions.selectQuotable}, ' SelectQuotable'} {xen:phrase reply_to_thread} {$thread.title} {$forum.title}, {xen:datetime $thread.post_date, html}. Trả lời: {xen:number $article.reply_count}, lượt xem: {xen:number $article.view_count}. {$article.username} {xen:link full:threads, $thread} 1 {xen:phrase tweet} {xen:phrase porta2_article_tools} {xen:phrase porta2_article_tools} {xen:phrase edit_thread} {xen:phrase edit_title} {xen:phrase add_poll} {xen:phrase delete_thread} {xen:phrase move_thread} {xen:phrase manage_reply_bans} {xen:phrase moderator_actions} {xen:phrase show_deleted_posts} {xen:phrase porta2_subcats}: {xen:phrase porta2_subcat_this_article_hint} {xen:phrase comments} {xen:phrase discussion_in_x_started_by_y_date_z, 'forum={$forum.title}', 'name={xen:helper username, $thread}', 'date={xen:datetime $thread.post_date, html}'} {xen:phrase porta2_local_comments} {xen:phrase porta2_disqus_comments} {xen:phrase porta2_facebook_comments} {xen:link 'canonical:threads', $thread} Bây giờ quay lại trang chủ và F5 để xem thay đổi thôi nào. Chú ý: có thể nhiều style sẽ hiển thị đôi chút sai lệnh, nếu gặp lổi các bạn thảo luận tại chủ đề này luôn nhé. Quên mất, các bạn tải thư mục "img" dưới đính kèm và upload lên thư mục style các bạn đang sử dụng nhé.
Đoạn EWRporta2_ArticleList thứ 2 anh chắc anh ấy ghi nhầm là EWRporta2_ArticleList_Bit mới đúng nhe mọi người.
xen ở trang chủ em bị lỗi http://subvn.net muốn trở về theard của style cũ thbì làm thế nào chứ như này vỡ khung hết ak http://subvn.net/ngoc-huong-tram.t56.html
Bạn Promotion bài viết ra trang chủ thì chọn 1 tấm hình đính được đính kèm cho nó hiển thị, bạn không chọn nên nó sẽ hiện thị như thế.