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

Naman

Private
Tham gia
28/05/2020
Bài viết
7
Được Like
4
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

  • change image.png
    change image.png
    514.1 KB · Lượt xem: 808

thahtrung06

Super Moderator
Thành viên BQT
Tham gia
12/11/2019
Bài viết
1,177
Được Like
517
Bạn dùng CSS nhé!
CSS:
.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

Private
Tham gia
28/05/2020
Bài viết
7
Được Like
4
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

Private
Tham gia
08/06/2020
Bài viết
35
Được Like
13
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
Less:
/**** 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

Private
Tham gia
28/05/2020
Bài viết
7
Được Like
4
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>
 
Sửa lần cuối:

MrSeven

Private
Tham gia
08/06/2020
Bài viết
35
Được Like
13
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>
Do bạn làm chưa đúng thôi chứ mình làm thấy được mà:
1592531328837.png
 

thahtrung06

Super Moderator
Thành viên BQT
Tham gia
12/11/2019
Bài viết
1,177
Được Like
517
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

Private
Tham gia
28/05/2020
Bài viết
7
Được Like
4
Cảm ơn MrSeventhahtrung06 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é!
 

MrSeven

Private
Tham gia
08/06/2020
Bài viết
35
Được Like
13
Cảm ơn MrSeventhahtrung06 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é!
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

Private
Tham gia
28/05/2020
Bài viết
7
Được Like
4
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à:

Mã:
.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@thahtrung06 nhé!
 
Sửa lần cuối:

Top Bottom