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): Spoiler: (Alert Balloon customization) Tùy chỉnh Alert Balloon Code: /*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; } @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*/ } } /*END - Alert Balloon customization*/ Kết quả: Spoiler: (Background image on forum) Hình nền trên diễn đàn Code: /* START - Background image on forum */ html { background: url(/@imagePath/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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: Code: /* START - Background image on forum */ html { background: url(/@imagePath/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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ả: Spoiler: (Change colour of Terms and Rules) Thay đổi màu sắc của Điều khoản và Nội quy Code: /* START -Change colour of Terms and Rules */ #legal a:link, #legal a:visited { color: @primaryLight !important; } /* END -Change colour of Terms and Rules */ Spoiler: (Change colour of the copyright text) Thay đổi màu sắc của văn bản bản quyền Code: /* START - Change colour of the copyright text */ #copyright { color: @primaryLight !important; } /* END - Change colour of the copyright text */ Spoiler: (Change spoiler button colour) Thay đổi màu nút spoiler Code: /* START - Change SPOILER BUTTON colour */ .bbCodeSpoilerButton { background: @primaryLighterStill; height: 30px; padding: 0px 20px 5px 20px; line-height: 30px; } /* END - Change SPOILER BUTTON colour */ Spoiler: (Coloured sticky thread) Màu chủ đề dán Code: /* START - COLOURED STICKY THREAD */ .discussionListItem.sticky { background-color: #fff6ef; } .discussionListItem.sticky .posterAvatar, .discussionListItem.sticky .stats { background: url("styles/default/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/gradients/category-23px-light.png") repeat-x scroll center top @primaryLightest; } /* END - COLOURED STICKY THREAD */ Spoiler: (Customize interact button in profile posts sidebar) Tùy chỉnh nút tương tác hồ sơ gửi trong sidebar Code: /* 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ả: Spoiler: (Hide forum title only on forum_list) Ẩn danh hiệu diễn đàn duy nhất trên forum_list Code: /* START - Hide forum title only on forum_list */ .forum_list .titleBar { display: none; } /* END - Hide forum title only on forum_list */ Spoiler: (Multi coloured category nodes) Đa dạng màu các loại nút Code: /* 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 */ Spoiler: Navigation transparency Code: /* START - Navigation Transparency */ #navigation { opacity:0.95; filter:alpha(opacity=95); /* For IE8 and earlier */ } /* END - Navigation Transparency */ Spoiler: Poll Result colour Code: /* START - Poll Result colour */ .pollResult .bar { background: #6BA65E !important; } .pollResult .barContainer { border: 1px solid #6BA65E !important; } /* END - Poll Result colour */ Spoiler: (Profile Posts customized look) Xem hồ sơ tùy chỉnh Code: /* 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ả: Spoiler: (Public Controls (Reply, Like ... buttons) enhancements) Cải tiến Public Controls (nút Trả lời, Thích...) Code: /* 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 */ Spoiler: (Public Controls (Reply, Like ... buttons) enhancements for PROFILE PAGE) Cải tiến Public Controls (nút Trả lời, Thích...) cho trang Profile Code: /* 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ả: Spoiler: Smilies hover effect Code: /* 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 */ Spoiler: Style MultiQuote/Select-to-Quote Code: /* 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ả: Đâ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 Spoiler: Change Featured Resource Blocks width on resource list Code: /* 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: Spoiler: Customize Selected Resource in resource category list sidebar Code: /* 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ả: Spoiler: Thay đổi màu sắc Featured Banner Code: /* 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ả: Spoiler: Remove minorText on disabled download button Code: /* START - Remove minorText on disabled download button */ label.downloadButton.downloadDisabled .minorText { display: none; } /* END - Remove minorText on disabled download button */ Spoiler: Resource sidebar styled Code: /* 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 */ Spoiler: Cải tiến thanh Resource Title Code: /* START - RESOURCE TITLE BAR ENHANCEMENTS */ .resourceInfo { border: 1px solid @primaryLighter; border-radius: 5px; background: url("@imagePath/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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: bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365.com
Code: / * 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
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
Đây bạn, mình có hướng dẫn ở đây rồi: http://vxf.vn/threads/chia-se-kinh-nghiem-lam-forum-bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365-cua-fifavn.17979/page-8#post-142134
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.