Add Images to your polls - Thêm hình ảnh vào các cuộc thăm dò của bạn

[PVS]

Add Images to your polls - Thêm hình ảnh vào các cuộc thăm dò của bạn

Điều này sẽ cung cấp cho bạn một template cơ bản để thêm hình ảnh vào phía tay trái của các cuộc thăm dò. Tôi đã thực hiện nó vì vậy mà tôi có thể thêm một hình ảnh cụ thể cho mỗi node, nhưng bạn chỉ có thể sử dụng một hình ảnh cho toàn bộ trang web, nếu bạn muốn.

Đây là cách nó có thể kết thúc cho bạn:

​

Điều hướng đến phần style của bạn trong ACP và mở template poll_block tìm:

<div class="pollContent">

và thêm vào bên dưới đoạn code trên đoạn code sau:

<div class="custom_pollImage"></div>

Lưu template lại.

Vào EXTRA.css và thêm:

.custom_pollImage {
  background: url("linktoyourimage") no-repeat;
  width: 150px;
  height: 150px;
  position: absolute;
  left: -200px;
  }

Thay đổi địa chỉ đến vị trí hình ảnh chính xác và chiều rộng/chiều cao cho phù hợp với kích thước hình ảnh. Tôi không khuyến khích bạn nên sử dụng một hình ảnh chiều cao lớn hơn 150, do các kích thước khác nhau của các cuộc thăm dò.

Nếu bạn muốn có một hình ảnh khác nhau cho mỗi nút, chỉ cần thay đổi code một chút như sau:

.nodeX .custom_pollImage {
  background: url("linktoyourimage") no-repeat;
  width: 150px;
  height: 150px;
  position: absolute;
  left: -200px;
  }

Trong đó X là id node của bạn.

Để loại bỏ các dấu chấm hỏi thường xuất hiện ở bên trái của tiêu đề cuộc thăm dò, thêm đoạn code sau vào EXTRA.css:

.pollBlock .questionMark {
display: none;
}

Để đảm bảo hình ảnh không chồng chéo các cuộc thăm dò trong chế độ responsive, cuối cùng thêm đoạn code sau vào EXTRA.css:

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth) {
        .custom_pollImage {
        display: none;
        }
    }

    @media (max-width:@maxResponsiveMediumWidth) {
        .custom_pollImage {
        display:none;
        }
    }

    @media (max-width:@maxResponsiveNarrowWidth) {
        .custom_pollImage {
        display:none ;
        }
    }
</xen:if>

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

Nguồn: xenforo.com​