Addon Xen Product Manager Tiles - Trình quản lý sản phẩn Xen dạng gạch

[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

Xen Product Manager Tiles - Trình quản lý sản phẩn Xen dạng gạch

Yêu cầu: Xen Product Manager

Thêm đoạn code dưới vào template EXTRA.css của bạn:

.productListItem {
  display: inline-block !important;
  table-layout: initial !important;
  border-radius: 5px;
  margin: 10px 0px 0px 0px;
  width: 260px !important;
  box-sizing: border-box;
  vertical-align: top;
  box-shadow: -2px 0px 2px 4px rgba(153, 153, 153, 0.1) inset;
  border-radius: 10px;
  border: 1px solid #F2F2F5 !important;
}

.productListItem .listBlock {
  display: initial !important;
}

.productListItem .main {
  width: 165px !important;
  margin: 0px auto;
}

.productListItem .listBlockInner {
  min-height: 134px;
  text-align: center;
  padding: 10px 10px 0px 10px !important;
}

.productListItem .main .tagLine {
  white-space: normal !important;
}

.productListItem .productStats .listBlockInner {
  background: #F0F0F0;
  margin: 10px 0;
}

.productListItem .image .listBlockInner {
  background: #F0F0F0;
  border-radius: 5px;
  margin: 10px 0;
}

.productListItem .productStats .button {
  background: #9E5596;
  text-shadow: none;
  color: white;
  box-shadow: none;
  border: 1px solid #9E5596;
}

.productListItem .productStats .button:hover {
  background: #4A4E51;
  border: 1px solid #4A4E51;
}

.productListItem .image img {
  border: 3px solid #FFF;
  border-radius: 5px;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
  .productListItem {
  width: auto !important;
  display: block !important;
  }
  .Responsive .productInfo {
  display: initial !important;
  }
  .productListItem .listBlockInner {
  min-height: 115px !important;
  }
}
</xen:if>

Thay đổi để phù hợp với nhu cầu của bạn.

Kết quả:

​

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

Nguồn: xenforo.rocks​