Help Làm cách nào để thêm ảnh nền cho mỗi category

[Naman]

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.

 

[thahtrung06]

Bạn dùng CSS nhé!

.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 thay ảnh khác và sửa lại đường dẫn trên là được.

 

[Naman]

Cả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).

 

[MrSeven]

Cả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).

Bạn thử dùng code này cho vô Extra.css

/**** 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;

}

Trong đó, đoạn:
.block.block--category.block--category1

Là node cần chèn background image

Link ảnh bạn chỉnh lại tương ứng:
background-image:url('img/background.png ');

 

[Naman]

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:

<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>

 

[MrSeven]

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:

<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à:

 

[thahtrung06]

Bạn cho mình link website để xem nhé! Dùng CSS từng category sẽ hơi khác một chút. Bạn để ý đến cái chữ category1 trong CSS bạn @MrSeven đưa ra thì số 1 là id của từng category nhé!

 

[Naman]

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:

.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é!

 

[MrSeven]

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:

.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é!

Bạn thử sửa:
background-image: url('/styles/xentr/exclusive_dark/images/category-header/cat-bg-2.jpg');

Thành:
background-image: url('styles/xentr/exclusive_dark/images/category-header/cat-bg-2.jpg');

Code chỉ để ở extra.less thôi, bạn xóa code ở xtr_extra.less

Xem kết quả sao!

 

[Naman]

Cảm ơn MrSeven nhé!

Mình dựa vào code của bạn và tìm ra cách xử lý vấn đề:

- Code bạn cung cấp sẽ áp dụng được cho Style default của Xenforo.

- Còn với Style mình đang dùng thì sẽ dựa vào cách khai báo Class của Style đó, mình xem trong node_list_category (trong template) có đoạn code bên dưới:

<div class="block block--category container-class block--category{$node.node_id}{{ property('xmCollapseNodes') ? ' collapsible-nodes' : '' }}" data-node-id="{$node.node_id}">

hoặc Inspect sẽ xác định được class để tạo CSS.

- Code mình áp dụng cho style Exclusive Dark là:

.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;
}

Chèn code này vào Extra.less của style mình chọn. Và thay đổi ID category tương ứng với tên ảnh.

Thanks @MrSeven và @thahtrung06 nhé!