Hướng dẫn rip skin và tạo portal xenforo dạng site tin tức!!!

Tranh thủ những time rãnh rỗi ngồi viết các bài tut để hướng dẫn theo đa số nhu cầu của anh em! Ở bài tut này mình sẽ hướng dẫn cách chỉnh sửa để tạo portal của xenforo có dạng như 1 site tin tức và cách rip skin cơ bản cho anh em không có khả năng tự design nhưng thích đẹp

Bài viết sẽ được update liên tục, pro nào phát hiện những điểm mình chưa chính xác hoặc sai vui lòng góp ý để mình chỉnh sửa lại! Chân thành cảm ơn!

Trước tiên, mình xin không nhắc lại nội dung template của recentnews nữa nhé, mình đã có viết tại topic này: Phần 1 - Hướng dẫn rip skin và cách bố trí xenportal
Và cách tạo nhiều recentnews thì các bạn xem lại tại đây nhé!

I> BỐ CỤC SITE VÀ CHỈNH SỬA CSS XENPORTAL PHÚ HỢP VỚI NHU CẦU:

Mình xem qua rất nhiều topic và mình cảm thấy rất, rất nhều câu hỏi cũng như nhiều bạn vướng phải việc là các block không đều nhau, hình ảnh bị lệch, không hiển thị, muốn hiển thị nội dung liên quan,...

Đầu tiên, để tạo 01 site dạng tin tức thì trước tiên bạn phải phác thảo ra bố cục của site mình đã. Ở đây mình ví dụ như: Portal của xenforo được chia làm 3 phần gồm: left (gồm top left, mid left, btm left), right (gồm top right, mid right và btm right) và sidebar. Ở đây ví dụ bạn bố cục site của bạn như tinhte.vn chẳng hạn, gồm 2 phần là nội dung ở trái và quảng cáo, tin liên quan,.. ở right.
Trước tiên bạn, phải xem width mình mặc định cho forum là bao nhiêu? Ví dụ 1180px hay 1200px, cái này thì tuỳ các bạn nhé! Lúc này bạn muốn ở cột quảng cáo bên phải có width là 350px và cách nội dung bên trái 30px chẳng hạn, thì bạn sẽ có phép tính là: 350px + 30px= 380px. Lấy Width của site là 1200px - 380px = 820px <<<< Đây là width của cột tin bên trái. Đến đây bạn tiến hành vào template chỉnh sửa width cho phù hợp để không bị tràn khung.

Các bạn mở template EWRporta.css, sẽ thấy code là:

Mã:

.topRightBlocks,
.midRightBlocks,
.btmRightBlocks { float: none; width: auto; }
.topLeftBlocks,
.midLeftBlocks,
.btmLeftBlocks { float: left; }
{xen:helper clearfix, '.topRightBlocks'}
{xen:helper clearfix, '.midRightBlocks'}
{xen:helper clearfix, '.btmRightBlocks'}

.centerShift { margin-left: {xen:calc '@sidebar.width + 10'}px; }
.forum_list .btmRightBlocks.centerShift .section:first-child { margin-top: 20px; }

.articleCategories li { display: inline-block; width: 49%; }

.EWRporta_ArticleView .categorySummary
{
    @property "messageLikesSummary";
    padding: 5px;
    margin-top: 10px;
    border: 1px solid @primaryLighterStill;
    border-radius: 5px;
    @property "/messageLikesSummary";
    margin-top: -10px;
    margin-bottom: 15px;
}
.EWRporta_ArticleView .categorySummary .categoryEdit { float: right; }
.EWRporta_ArticleView .categorySummary ul { display: inline; }
.EWRporta_ArticleView .categorySummary li { display: inline; }

.EWRporta_ArticleView .messageArticle .messageAuthor { padding-bottom: 10px; }
.EWRporta_ArticleView .messageArticle .messageAuthor .avatar { float: left; }
.EWRporta_ArticleView .messageArticle .messageAuthor .messageInfo { margin-left: 65px; padding-top: 30px; }
.EWRporta_ArticleView .messageArticle .messageAuthor .shareControl { float: right; padding-top: 25px; }
{xen:helper clearfix, '.EWRporta_ArticleView .messageArticle .messageAuthor'}

.EWRporta_ArticleView .messageArticle .message { padding-bottom: 20px; }
.EWRporta_ArticleView .messageArticle .messageUserInfo { display: none; }
.EWRporta_ArticleView .messageArticle .messageInfo { margin-left: 0px; }

.EWRporta_ArticleView .mainComments { margin-top: 15px; }
.EWRporta_ArticleView .mainComments .bbCodeImage { vertical-align: top; }
.EWRporta_ArticleView .mainComments .pageNavLinkGroup { border-bottom: 1px solid @primaryLighterStill; }
.EWRporta_ArticleView .mainComments .quickReply { border-top: none; }
.EWRporta_ArticleView .mainComments .bbCodeBlock blockquote { display: block; }
.EWRporta_ArticleView .mainComments .messageSimple .newIndicator
{
    @property "messageNewIndicator";
    font-size: 11px;
    color: @primaryMedium;
    background: @primaryLight url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x top;
    padding: 1px 5px;
    margin: -5px -5px 5px 5px;
    border: 1px solid @primaryLight;
    border-radius: 3px;
    border-top-right-radius: 0px;
    display: block;
    float: right;
    position: relative;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    @property "/messageNewIndicator";
  
    margin-right: 0px;
    margin-top: 0px;
}

.adminModules { width: 100%; }
.adminModules td { vertical-align: top; }

.adminModules .sortColumn { height: 50px; padding-bottom: 0px; }
.adminModules .sortColumn .portlet { text-align: center; margin-bottom: 10px; border: 1px dotted @mutedTextColor; }
.adminModules .sortColumn .portlet.locked { border: 1px solid @contentText; }
.adminModules .sortColumn .portlet-placeholder { margin-bottom: 10px; border: 2px dashed @contentText; height: 35px; }
.adminModules .sortColumn .portlet-placeholder * { visibility: hidden; }
.adminModules .sortColumn .portlet .delete { display: none; padding-top: 10px; }

.adminModules #disabled.sortColumn { padding-right: 0px; }
.adminModules #disabled.sortColumn .portlet,
.adminModules #disabled.sortColumn .portlet-placeholder { float: left; width: 150px; margin-right: 10px; }
.adminModules #disabled.sortColumn .portlet .clear { display: none; }
.adminModules #disabled.sortColumn .portlet .delete { display: inline; }

.xenOverlay .xenForm { width: auto !important; margin: 0px; }
.xenOverlay .xenForm .ctrlUnit dt label { margin-left: 0px; }

.xenForm .date
{
    background-image: url("styles/8wayrun/calendar.png");
    background-position: right center;
    background-repeat: no-repeat;
}

.copyright { text-align: center; font-size: 11px; margin: 10px; }

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth)
    {
        .mainComments .primaryContent.messageSimple .avatar { display: none; }
        .mainComments .primaryContent.messageSimple .messageInfo { margin-left: 0; }
    }
</xen:if>

Đền đây, bạn nhìn đoạn code này đầu template:

Mã:

.topRightBlocks,
.midRightBlocks,
.btmRightBlocks { float: none; width: auto; }
.topLeftBlocks,
.midLeftBlocks,
.btmLeftBlocks { float: left; }

>>>> Mặc định của css này là chia cột bên trái có width là hoàn toàn auto. Do đó bạn cần điều chỉnh css này theo đúng ví dụ của phép toán trên mình đưa ra.
Ở đây mình thay như sau:

Mã:

.topRightBlocks (float: right; margin-left: 30px; width: 350px;)
.midRightBlocks,
.btmRightBlocks { float: none; width: auto; }
.topLeftBlocks {float: left; width: 820px;}
.midLeftBlocks,
.btmLeftBlocks { float: left; }

>>> Sau khi thay thông số như trên vào, lúc đó bạn kéo block thả vào 2 position của layout là: Top-Left và Top-Right thì lúc này cột bên trái của bạn sẽ hiển thị nội dung như là của tinh tế gồm: bên trái là cột tin tức, bên phải là cột quảng cáo và tin liên quan.
>>>Và một kinh nghiệm của mình nữa là trong template trên:

Mã:

.centerShift { margin-left: {xen:calc '@sidebar.width + 10'}px; }

bạn nên sửa lại như sau:

Mã:

.centerShift {}

Ok! Đây là sơ khởi cho các bạn biết cách hình dung, bố trí, và chính sửa lại css của template portal làm sao cho phù hợp với nhu cầu. Các câu hỏi có liên quan xin đặt ở dưới luôn nhé!
I'm comming ....!!!!

 

Đúng là chủ đề này rất nhiều người quan tâm nhất là những người mới làm web với xen. Chúc bạn được nhiều người ủng hộ.
1 like cho bạn.

 

update cách bố trí và chỉnh sửa css cho portal!

 

Sao ko viết tiếp?