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.

  • Google checker:
  1. PVS

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

    Tham gia:
    28/02/2015
    Bài viết:
    9,136
    Đã được thích:
    6,188
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    Hãy đăng nhập hoặc đăng ký để xem được links - 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
    Tags:
    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,436
    Đã được thích:
    1,105
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    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:
    9,136
    Đã được thích:
    6,188
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    @@, 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
    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
    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
    Đây bạn, mình có hướng dẫn ở đây rồi:
    Hãy đăng nhập hoặc đăng ký để xem được links
     
    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:
      7
  13. f0rest

    f0rest Thượng Đế

    Tham gia:
    22/04/2015
    Bài viết:
    251
    Đã được thích:
    158
    Đ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:
    8
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    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:
    687
    Đã được thích:
    583
    Đ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

Đang tải...