Other Breadcrumb Ribbon Enhancement - Breadcrumb cải tiến hình ruy băng v1

[PVS]

Breadcrumb Ribbon Enhancement - Breadcrumb cải tiến hình ruy băng v1

Tóm tắt: Nâng cao này sẽ biến đổi breadcrumbs của bạn thành một loại Ribbon trực quan. Tôi đã thử nghiệm này trên một phong cách mặc định và áp dụng nó vào một phong cách tùy chỉnh khác và nó xuất hiện để hiển thị một cách chính xác.

Cài đặt: Trước hết, tải lên các hình ảnh thông qua FTP trong file zip lên thư mục /gradients và sau đó đăng nhập vào AdminCP của bạn >> Appearance >> Templates >> và trong template breadcrumbs

Thêm:

<div class="breadcrumbleft"></div><div class="breadcrumbright"></div>

Ở trên:

<fieldset class="breadcrumb">

Cài đặt: Sau đó sao chép và dán đoạn mã sau vào template EXTRA.CSS của bạn

.breadcrumbleft {
background: url("@imagePath/xenforo/gradients/breadcrumbleft.png") no-repeat scroll center top transparent !important;
    display: block;
    float: left;
    height: 47px;
    width: 65px;
}
.breadcrumbright {
background: url("@imagePath/xenforo/gradients/breadcrumbright.png") no-repeat scroll left top  transparent !important;
    display: inline-block;
    float: right;
    height: 47px;
    width: 65px;
}
.breadcrumb {
    background: url("@imagePath/xenforo/gradients/breadcrumb-center.png") repeat-x scroll center top transparent !important;
    height: 47px;
    border-left: 0 solid blue !important;
    border-right: 0 solid blue !important;
    border-radius: 0!important;
    border-top: 0px solid #5f554a !important;
    border-bottom: 0px solid #5f554a !important;
}
.breadcrumb .crust a.crumb {
    background-color: transparent!important;
    border-bottom: 0px solid #A5CAE4 !important;
    line-height: 37px;
    color: #ede3d7;
}
.breadcrumb .crust a.crumb:hover {
  color: white !important;
}
.breadcrumb .crust .arrow span {
    border-width: 0 !important;
}
.breadcrumb .crust .arrow {
    border-style: none!important;
}

Tùy chọn cài đặt: Bởi vì các biểu tượng kích hoạt XenForo mặc định không nhìn hoàn toàn đúng về thiết kế ruy băng nên tái thiết kế biểu tượng và đặt nó ở một tỷ lệ thực 50%, do đó nó sẽ xuất hiện thị tốt hơn trên ribbon.

Tải lên biểu tượng trigger.png vào thư mục /gradients của bạn. Đơn giản chỉ cần thêm dòng sau vào template EXTRA.CSS.

.breadcrumb .jumpMenuTrigger {
  background: url("@imagePath/xenforo/gradients/trigger.png") no-repeat scroll transparent !important;
  width: 22px !important;
  height: 22px !important;
}

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

Nguồn: xenforo.com​