Style Chooser Enhancement - Cải tiến Style Chooser (Full width)

[PVS]

Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn

Style Chooser Enhancement - Cải tiến Style Chooser (Full width)

Tóm tắt: Việc cải tiến sau đây cho phép xem trước span toàn bộ chiều rộng của trình lựa chọn style của bạn. Sử dụng sau đây như một hướng dẫn tham khảo như ID style của bạn và hình ảnh paths/images sẽ khác nhau.

Cài đặt: Upload hình ảnh của bạn vào trong thư mục của bạn (trong ví dụ này tôi upload vào thư mục gradients). Sau đó vào template EXTRA.CSS và thêm đoạn code sau:

/* Style Chooser Full width image Enhancement */
.chooserColumns .title, .chooserColumns .description {
    display: none !important;
    margin-left: 0 !important;
    text-align: center; }
.styleChooser  .style16{
    height: 100px !important;
    width: 618px !important;
    background-image: url("@imagePath/xenforo/gradients/style-nh-nohover.png") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }
.styleChooser  .style10{
    height: 100px !important;
    width: 618px !important;
    background-image: url("@imagePath/xenforo/gradients/style-nc-nohover.png") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important;
}
.styleChooser  .style1{
    height: 100px !important;
    width: 618px !important;
    background-image: url("@imagePath/xenforo/gradients/style-xf-nohover.png") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }
.styleChooser  .style5{
    height: 100px !important;
    width: 618px !important;
    background-image: url("@imagePath/xenforo/gradients/style-bb-nohover.png") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }
.styleChooser li:hover .icon{
    opacity: 0.35;
    -moz-transition: all 0.7s ease-in-out 0s;
    -o-transition: all 0.7s ease-in-out 0s;
    -webkit-transition: all 0.7s ease-in-out 0s;
    margin: 17px 35px 0 0;
    transform: scale(0.8, 0.8); }
.chooserColumns li a:hover {background-color: transparent !important;}
.chooserColumns li  {width: 100% !important;}
/* Style Chooser Full width image Enhancement */

Chúc các bạn thành công.

Nguồn: xenforo.com​