Nội dung hữu ích cho EXTRA.css

Thảo luận trong 'Other Resources' bắt đầu bởi PVS, 03/03/2015.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    10,271
    Đã được thích:
    6,480
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    Vnxf.vn - Trong tài liệu này mình sẽ thêm một số chỉnh sửa css hữu ích cho EXTRA.css (default style) mà mình đã thực hiện hoặc tìm thấy ở những nơi khác.

    Danh sách chỉnh sửa cho EXTRA.css (theo thứ tự bảng chữ cái):

    Mã:
    /*START - Alert Balloon customization*/
    .navTabs .navLink .itemCount .arrow {
      display: none;
    }
    .navTabs .navLink .itemCount {
      display: inline-block;
      vertical-align: top;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 2px;
      font-size: 10px;
    }
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveMediumWidth)
    {
      .Responsive .navTabs .navLink .itemCount
      {
      position: absolute;
      right: 0px;
      top: -2px;
      }
      .Responsive .navTabs .navLink .itemCount .arrow
      {
      display: initial;  /*comment this to hide balloon arrow*/
      }
    }
    </xen:if>
    /*END - Alert Balloon customization*/
    Kết quả:
    <default>

    balloon1.PNG
    <với mã ứng dụng>​

    balloon2.PNG
    <không có thay đổi nào trên điện thoại di động>
    balloon3.PNG

    Mã:
    /* START - Background image on forum */
    html {
      background: url(/@imagePath/xenforo/background/your_image.jpg) !important;
      background-attachment: fixed !important;
      background-size: cover !important;
    }
    /* END - Background image on forum */
    Upload hình nền của bạn vào diễn đàn đến /@imagePath/xenforo/background/ và chỉnh sửa trên path.

    Nếu bạn không muốn sử dụng hình nền cho điện thoại di động, thêm mã này:
    Mã:
    /* START - Background image on forum */
    html {
    background: url(/@imagePath/xenforo/background/your_image.jpg) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    }
    /* END - Background image on forum */
    Upload your forum background image to /@imagePath/xenforo/background/ and edit above path.
    If you don't want to use background image for example on mobile phones, add this code:
    Code:
    /* START - Background image on forum */
    @media (min-width: 1025px) {
    html {
    background: url(/@imagePath/xenforo/background/your_image.jpg) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    }
    }
    @media (max-width: 1025px) {
    #header {
    background-color: @primaryDarker !important;
    }
    }
    /* END - Background image on forum */
    
    Kết quả:

    category_description_on_hover.gif

    Mã:
    /* START -Change colour of Terms and Rules */
    #legal a:link, #legal a:visited {
    color: @primaryLight !important;
    }
    /* END -Change colour of Terms and Rules */

    Mã:
    /* START - Change colour of the copyright text */
    #copyright {
    color: @primaryLight !important;
    }
    /* END - Change colour of the copyright text */

    Mã:
    /* START - Change SPOILER BUTTON colour */
    .bbCodeSpoilerButton {
       background: @primaryLighterStill;
       height: 30px;
       padding: 0px 20px 5px 20px;
       line-height: 30px;
    }
    /* END - Change SPOILER BUTTON colour */

    Mã:
    /* START - COLOURED STICKY THREAD */
    .discussionListItem.sticky {
    background-color: #fff6ef;
    }
    .discussionListItem.sticky .posterAvatar, .discussionListItem.sticky .stats {
    background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top @primaryLightest;
    }
    /* END - COLOURED STICKY THREAD */
    

    Mã:
    /* START - Customize interact button in profile posts sidebar */
    .profilePostListItem .publicControls .item {
      float: left;
      margin-left: 10px;
      background-color: @primaryLighterStill;
      border-radius: 2px;
      padding: 0px 2px;
    }
    /* END - Customize interact button in profile posts sidebar */
    Kết quả:

    upload_2014-9-1_10-0-57.png

    Mã:
    /* START - Hide forum title only on forum_list */
    .forum_list .titleBar {
    display: none;
    }
    /* END - Hide forum title only on forum_list */

    Mã:
    /* START - Multi Coloured Category Nodes */
    .forum_list .sectionMain { border: 0px solid #A5CAE4; padding: 0; }
    .nodeList .node_XYZ .categoryForumNodeInfo, .nodeList .node_XYZ .forumNodeInfo, .nodeList .node_XYZ .pageNodeInfo,
    .nodeList .node_XYZ .linkNodeInfo
    {
    background-color: transparent;
    }
    /* Your Category Name */
    .nodeList .node_XYZ{
    margin-bottom: 20px;
    border: 1px solid #0B91D4;
    border-radius: 0 0 5px 5px; }
    .nodeList .node_XYZ .categoryStrip {
    background-color: #0B91D4;
    border-top: 1px solid #0B91D4;
    border-bottom: 1px solid #0B91D4; }
    .nodeList .node_XYZ .categoryStrip .nodeTitle a {
    color: white; }
    /* END - Multi Coloured Category Nodes */
    

    Mã:
    /* START - Navigation Transparency */
    #navigation {
    opacity:0.95;
    filter:alpha(opacity=95); /* For IE8 and earlier */
    }
    /* END - Navigation Transparency */

    Mã:
    /* START - Poll Result colour */
    .pollResult .bar {
    	background: #6BA65E !important;
    }
    .pollResult .barContainer {
    	border: 1px solid #6BA65E !important;
    }
    /* END - Poll Result colour */

    Mã:
    /* START - Profile Posts customized look */
    .messageSimple {
    	padding: 10px !important;
    	border: 1px solid #e8e8e8;
    	border-radius: 4px;
    	box-shadow: 2px 2px 3px rgba(0,0,0, 0.1);
    }
    /* END - Profile Posts customized look */
    Kết quả:

    profile_posts_customized.png

    Mã:
    /* START - Public Controls (Reply, Like ... buttons) enhancements */
    .message .muted {
    background-color: #F0F7FC;
    padding: 3px 3px;
    color: #176093;
    border-radius: 2px;
    border: 0px solid white;
    box-shadow: 0 0 0px #F0F7FC;
    }
    .message .hashPermalink {
    background-color: @pageBackground;
    padding: 3px 5px;
    color: #176093;
    border-radius: 2px;
    border: 1px solid white;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
    }
    .message .like {
    background-color: #eaf4fc;
    padding: 3px 5px;
    color: #176093;
    border-radius: 2px;
    border: 1px solid white;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
    }
    .message .unlike {
    background-color: #fce3e3;
    padding: 3px 5px;
    color: #176093;
    border-radius: 2px;
    border: 1px solid white;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
    }
    .message .MultiQuoteControl {
    background-color: #D3F9BB;
    padding: 3px 5px;
    color: #176093;
    border-radius: 2px;
    border: 1px solid white;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
    }
    .message .reply {
    background-color: #fff4e5;
    padding: 3px 5px;
    color: #176093;
    border-radius: 2px;
    border: 1px solid white;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
    }
    .message .reply:hover, .message .MultiQuoteControl:hover, .message .hashPermalink:hover, .message .like:hover, .message .unlike:hover, .message .warn:hover, .message .report:hover, .message .ip:hover, .message .delete:hover, .message .edit:hover, .message .history:hover {
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    opacity: 0.5;
    text-decoration: none !important;
    }
    /* END - Public Controls (Reply, Like ... buttons) enhancements */
    

    Mã:
    /* START - Public Controls (Reply, Like ... buttons) enhancements for PROFILE PAGE */
    .messageSimple .like {
    background-color: #eaf4fc;
    padding: 1px 5px;
    color: #176093;
    border-radius: 2px;
    border: 1px solid @primaryLighter;
    }
    .messageSimple .unlike {
    background-color: #fce3e3;
    padding: 1px 5px;
    color: #176093;
    border-radius: 2px;
    border: 1px solid #fac5c5;
    }
    .messageSimple .postComment {
    background-color: #fff4e5;
    padding: 1px 5px;
    color: #176093;
    border-radius: 2px;
    border: 1px solid #f8e0bd;
    }
    .messageSimple .like:hover, .messageSimple .unlike:hover, .messageSimple .postComment:hover {
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    opacity: 0.7;
    text-decoration: none !important;
    }
    /* END - Public Controls (Reply, Like ... buttons) enhancements for PROFILE PAGE */
    
    Kết quả:

    ppbe.png

    Mã:
    /* START - Smilies hover effect */
    img.mceSmilieSprite:hover { -webkit-transform: scale(1.2); }
    img.mceSmilieSprite:hover { h-webkit-transition: all .2s ease-in-out; }
    /* END - Smilies hover effect */

    Mã:
    /* START - Style MultiQuote/Select-to-Quote */[/LEFT]
    #QuoteSelected {
      background-color: white;
      color: #176093;
      border-radius: 2px;
      border: 1px solid @primaryLightish;
      border-top: 4px solid @primaryLightish;
      box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
    }
    #QuoteSelected:hover {
      border: 1px solid #F9D9B0;
      border-top: 4px solid #eeb76f;
    }
    #QuoteSelected a {
      color: #176093;
    }
    #QuoteSelected a:hover {
      color: #176093;
    }
    #QuoteSelected .arrow {
      display: none;
    }
    /* END - Style MultiQuote/Select-to-Quote */
    Kết quả:
    <not focused>

    quote1.png
    <focused>
    quote2.png
    Đây là một số kiểu dáng cơ bản. Thay đổi màu sắc cho phù hợp với nhu cầu của bạn.


    Danh sách chỉnh sửa cho EXTRA.css bằng ADD-ONs:
    • Resource Manager
    Mã:
    /* START - Change Featured Resource Blocks width on resource list*/
    .featuredResourceList .featuredResource {
    	width: 395px !important;
    }
    /* END - Change Featured Resource Blocks width on resource list*/
    Điều chỉnh sao cho phù hợp với nhu cầu của bạn.

    Ví dụ cho forum có chiều rộng 1080px:
    <không có code>

    upload_2014-8-20_23-55-9.png
    <có code>

    upload_2014-8-20_23-55-47.png

    Mã:
    /* START - Customize Selected Resource in resource category list sidebar */
    .resourceListSidebar .categoryList .selected {
    	background: none repeat scroll 0 0 @primaryLighterStill;
    	border-radius: 4px;
    	padding: 3px;
    }
    /* END - Customize Selected Resource in resource category list sidebar */
    Kết quả:

    upload_2014-11-17_21-33-17.png

    Mã:
    /* START - Featured Banner colour change */
    .resourceListItem .main .featuredBanner, .sidebar .featuredNotice {
      background: none !important;
      background-color: #3EA52D !important;
      color: white !important;
      border: none !important;
      padding: 3px !important;
      font-size: 11px !important;
    }
    /* END - Featured Banner colour change */
    Kết quả:

    upload_2014-8-21_1-20-46.png

    upload_2014-8-21_1-23-34.png

    Mã:
    /* START - Remove minorText on disabled download button */
    label.downloadButton.downloadDisabled .minorText {
       display: none;
       }
    /* END - Remove minorText on disabled download button */

    Mã:
    /* START - Resource sidebar styled */
    .resourceListSidebar .categoryList, .findResource, .miniResourceList, .avatarList {
      border-bottom: none !important;
      background: white !important;
      box-shadow: 2px 2px 3px rgba(0,0,0, 0.2);
      border-radius: 2px;
    }
    /* END - Resource sidebar styled */

    Mã:
    /* START - RESOURCE TITLE BAR ENHANCEMENTS */
    .resourceInfo {
    border: 1px solid @primaryLighter;
    border-radius: 5px;
    background: url("@imagePath/xenforo/gradients/tab-selected-light.png") repeat-x scroll bottom #ffffff !important;
    background-color: @primaryLighterStill !important;
    margin-bottom:5px auto;
    padding: 10px 10px;
    box-shadow: 0 0 1px #ffffff inset;
    }
    .featuredResourceList .featuredResource .resourceInfo {
    padding: 0 0 0 0;
    }
    /* END - RESOURCE TITLE BAR ENHANCEMENTS */
    


    Nguồn: xenforo.com​
     
    Chỉnh sửa cuối: 03/03/2015
    f0rest, TD2308, toanthayviet and 9 others like this.
  2. Lê Thanh Giảng

    Lê Thanh Giảng Khách VNXF

    bài viết rất hay
     
    THB thích bài này.
  3. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,456
    Đã được thích:
    1,110
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    LIKE MẠNH
    Bài tổng hợp này thậm chí phải gọi là hơn cả 1 bài tối ưu đỉnh cao nữa
     
    THB thích bài này.
  4. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    10,271
    Đã được thích:
    6,480
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    @@, bạn làm mình xúc động đậy quá ;))
     
    Jindo_Katori and THB like this.
  5. thành lê

    thành lê Thượng Đế

    Tham gia:
    04/03/2015
    Bài viết:
    82
    Đã được thích:
    75
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Nơi ở:
    LA
    Web:
    Thanks a!
     
    THB thích bài này.
  6. pakgoal

    pakgoal Thượng Đế

    Tham gia:
    30/12/2015
    Bài viết:
    10
    Đã được thích:
    5
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    pak
    Mã:
     / * START - Featured Resource Blocks Change width on the resource list * /
    .featuredResourceList .featuredResource {
        width: 395px! important;
    }
    / * END - Featured Resource Blocks Change width on the resource list * / [/ CODE]
    
    [IMG]http://img.prntscr.com/img?url=http://i.imgur.com/ralexYr.png[/IMG]
    
    sir i putt this code template  on extra.css but not changed features in block  plz help me
     
  7. conmeodien

    conmeodien Thượng Đế

    Tham gia:
    24/07/2016
    Bài viết:
    55
    Đã được thích:
    35
    Điểm thành tích:
    18
    Giới tính:
    Nam
    làm sao để xóa chữ Spolier trên bạn ơi, để nội dung thôi ????
     
  8. toanthayviet

    toanthayviet Thượng Đế

    Tham gia:
    23/07/2016
    Bài viết:
    17
    Đã được thích:
    9
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Một bài hướng dẫn tuyệt vời ông mặt trời flower~~heart~~
     
  9. toanthayviet

    toanthayviet Thượng Đế

    Tham gia:
    23/07/2016
    Bài viết:
    17
    Đã được thích:
    9
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Các bạn cho mình hỏi là: cái hình nền mình up vào đâu? Vì trong source xen cũa mình không có thư mục background.
    thanks ạ @PVS @THB
     
  10. Lê Tí

    Lê Tí Thượng Đế

    Tham gia:
    29/07/2015
    Bài viết:
    142
    Đã được thích:
    148
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nơi ở:
    Đồng Nai
    Web:
    bạn tạo thư mục background là được nhé, hoặc up vào thư mục images rồi đổi đường dẫn lại
     
    toanthayviet thích bài này.
  11. Cyentruk

    Cyentruk Thượng Đế

    Tham gia:
    27/11/2015
    Bài viết:
    70
    Đã được thích:
    98
    Điểm thành tích:
    18
    Giới tính:
    Nam
    conmeodien thích bài này.
  12. conmeodien

    conmeodien Thượng Đế

    Tham gia:
    24/07/2016
    Bài viết:
    55
    Đã được thích:
    35
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Hi.thank you.
    Cho mình hỏi luôn là ở phần tạo bảng cho Xen thì khoảng cách các bảng xa quá, chỉnh xích lại mãi không được...!!
    file đính kèm.
     

    Các file đính kèm:

    • 1.jpg
      1.jpg
      Kích thước:
      18.4 KB
      Đọc:
      9
  13. f0rest

    f0rest Thượng Đế

    Tham gia:
    22/04/2015
    Bài viết:
    274
    Đã được thích:
    171
    Điểm thành tích:
    43
    Giới tính:
    Nam
    tks @PVS , bài viết rất hữu ích :)
     
  14. congtubot

    congtubot Thượng Đế

    Tham gia:
    22/02/2017
    Bài viết:
    11
    Đã được thích:
    3
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Web:
    Cho mình hỏi phần @imagepath ấy :| , thì nó bắt đầu từ file nào ạ ?
     
  15. NDK

    NDK Cộng Sự Đắc Lực

    Tham gia:
    16/03/2015
    Bài viết:
    801
    Đã được thích:
    670
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Nghề nghiệp:
    SEO Executive
    Nơi ở:
    TP.HCM
    là nơi chứa hình ảnh trong style bạn đag dùng đấy thôi, Thường là styles/ten-style-dang-dung/...
     

Chia sẻ trang này