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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,515
Được Like
10,762
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:
Mã:
.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ả:

xenproduct_index_tiles.gif

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


Nguồn: xenforo.rocks​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom