Mình muốn hỏi cách thêm ảnh cho mỗi category tương ứng. Bạn nào biết chỉ giúp mình nhé. Mình đang nghiên cứu style Exclusive Dark.
Đính kèm
Bài viết liên quan
Được quan tâm
Bài viết mới
.block .block-box.wrapper {
max-height: 180px;
min-height: 130px;
max-width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-image: url(/styles/xentr/exclusive_dark/images/category-header/cat-bg.jpg);
background-size: cover;
background-position: 50% 50%;
color: #FFF;
Bạn thử dùng code này cho vô Extra.cssCảm ơn bạn thahtrung06 nhé!
Cái này chỉ thay được ảnh mặc định và áp dụng cho tất cả Category thôi, mình muốn thay đổi mỗi category là một ảnh nền khác nhau (phù hợp cho từng chủ đề một).
/**** Add image icon next to the category title ****/
.block.block--category.block--category1 .block-header {
background-image:url('img/background.png ');
height: 70px;
background-position: center;
background-color: red kodu;
background-repeat: no-repeat;
color: red kodu;
padding-top: 22px;
font-weight: 350;
font-size: 20px;
border-bottom: 3 px solid red kodu;
}
.block.block--category.block--category1
background-image:url('img/background.png ');
<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<div class="block block--category container-class block--category{$node.node_id}{{ property('xmCollapseNodes') ? ' collapsible-nodes' : '' }}" data-node-id="{$node.node_id}">
<span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
<div class="block-container">
<xf:if is="property('xtr_block_header_image_enable') == '1' && $node.getNodeImage()">
<div class="block-box wrapper" <xf:if is="{{ property('xmNodeLayout') }} == 'classicImage' || (property('xmNodeLayout') == 'dual')">style="background-image: url({{ base_url($node.getNodeImage()) }});</xf:if>">
<h2 class="block-header">
<div class="block-header--left">
<a href="{{ link('categories', $node) }}">{$node.title}</a>
<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>
</div>
<xf:if is="property('xmCollapseNodes')">
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-target=".block--category{$node.node_id} .block-body" data-xf-init="toggle-storage" data-storage-type="cookie" data-storage-key="_node-{$node.node_id}"></span>
</xf:if>
</h2>
</div>
<xf:else/>
<div class="block-box wrapper">
<h2 class="block-header">
<div class="block-header--left">
<a href="{{ link('categories', $node) }}">{$node.title}</a>
<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>
</div>
<xf:if is="property('xmCollapseNodes')">
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-target=".block--category{$node.node_id} .block-body" data-xf-init="toggle-storage" data-storage-type="cookie" data-storage-key="_node-{$node.node_id}"></span>
</xf:if>
</h2>
</div>
</xf:if>
<div class="block-body <xf:if is="{{ property('xmNodeLayout') }} == 'classicImage' || (property('xmNodeLayout') == 'dual')">wrapper</xf:if>{{ property('xmCollapseNodes') ? ' block-body--collapsible' : '' }}{{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">
<xf:macro template="forum_list" name="node_list"
arg-children="{$children}"
arg-extras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</div>
</div>
</div>
</xf:macro>
Do bạn làm chưa đúng thôi chứ mình làm thấy được mà:Cảm ơn bạn MrSeven nhé,
Mình đang dùng Exclusive Dark style áp dụng code của bạn MrSeven nhưng không được bạn ạ.
Mình tìm trong node_list_category có đoạn code bên dưới, không biết có liên quan đến cách tạo css để thay đổi không, mình cứ đưa lên đây các bạn chỉ giúp:
Mã:<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1"> <div class="block block--category container-class block--category{$node.node_id}{{ property('xmCollapseNodes') ? ' collapsible-nodes' : '' }}" data-node-id="{$node.node_id}"> <span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span> <div class="block-container"> <xf:if is="property('xtr_block_header_image_enable') == '1' && $node.getNodeImage()"> <div class="block-box wrapper" <xf:if is="{{ property('xmNodeLayout') }} == 'classicImage' || (property('xmNodeLayout') == 'dual')">style="background-image: url({{ base_url($node.getNodeImage()) }});</xf:if>"> <h2 class="block-header"> <div class="block-header--left"> <a href="{{ link('categories', $node) }}">{$node.title}</a> <xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if> </div> <xf:if is="property('xmCollapseNodes')"> <span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-target=".block--category{$node.node_id} .block-body" data-xf-init="toggle-storage" data-storage-type="cookie" data-storage-key="_node-{$node.node_id}"></span> </xf:if> </h2> </div> <xf:else/> <div class="block-box wrapper"> <h2 class="block-header"> <div class="block-header--left"> <a href="{{ link('categories', $node) }}">{$node.title}</a> <xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if> </div> <xf:if is="property('xmCollapseNodes')"> <span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-target=".block--category{$node.node_id} .block-body" data-xf-init="toggle-storage" data-storage-type="cookie" data-storage-key="_node-{$node.node_id}"></span> </xf:if> </h2> </div> </xf:if> <div class="block-body <xf:if is="{{ property('xmNodeLayout') }} == 'classicImage' || (property('xmNodeLayout') == 'dual')">wrapper</xf:if>{{ property('xmCollapseNodes') ? ' block-body--collapsible' : '' }}{{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}"> <xf:macro template="forum_list" name="node_list" arg-children="{$children}" arg-extras="{$childExtras}" arg-depth="{{ $depth + 1 }}" /> </div> </div> </div> </xf:macro>
.block.block--category.block--category4 .block-header {
background-image: url('/styles/xentr/exclusive_dark/images/category-header/cat-bg-2.jpg');
}
Bạn thử sửa:Cảm ơn MrSeven và thahtrung06 phản hồi nhé!
Hiện tại mình đang làm trên localhost. Đã làm đúng theo hướng dẫn
Code:
Mã:.block.block--category.block--category4 .block-header { background-image: url('/styles/xentr/exclusive_dark/images/category-header/cat-bg-2.jpg'); }
Và trong Template có 2 CSS: xtr_extra.less & extra.less mình cũng đã add code nhưng vẫn không được.
Các bạn xem thấy mình sai đâu hay thiếu gì, chỉ giúp mình nhé!
background-image: url('/styles/xentr/exclusive_dark/images/category-header/cat-bg-2.jpg');
background-image: url('styles/xentr/exclusive_dark/images/category-header/cat-bg-2.jpg');
extra.less
thôi, bạn xóa code ở xtr_extra.less
.block.block--category.container-class.block--category4.collapsible-nodes .block-header {
max-height: 180px;
min-height: 130px;
max-width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-image: url('styles/xentr/exclusive_dark/images/category-header/cat-bg-1.jpg');
background-size: cover;
background-position: 50% 50%;
color: #FFF;
}
XenForo 1 | XenForo 2 |
Translate by PVS | |
Xenforo là gì? | |
Xây dựng MXH bằng Xenforo |
anhanhxf 0906081284
Inbox PVS |