XF 2.2 How to add seperate block images of forum homepage and settings page?

[TheMasso]

The same block images that I made for only categories are showing on settings page too. I really want to remove it and seperate them from eachother. How can I do this? Thanks.

 

[Nicolas FR]

Remove your customs settings in Style Properties and use CSS in extra.less template

.block-category .block-header {
    background: url(".../path/yourimages.png");
}

Adjust the position with CSS https://developer.mozilla.org/en-US/docs/Web/CSS/background#propriétés_détaillées_correspondantes

 

[TheMasso]

It's not working. Is there any different solutions?

 

[Nicolas FR]

It works.
what is the code you use ?

 

[TheMasso]

If you mean by custom settings in Style Properties of Block settings, I revert back to default by clicking the tick box and tried the code you gave me but images are not appearing.

Now, I tried the code again and it's still not working.

Edit: I removed the .block-category from the line, it worked but still showing up on the settings, users online page tabs.

 

[Nicolas FR]

Sorry a typo : it's not .block-category .block-header but .block--category .block-header

 

[Nicolas FR]

.block--category .block-header {
    background: url("https://i.imgur.com/lXDEn06.png");
}

But you should host the image on your own server rather than a third party service like imgur

 

[TheMasso]

.block--category .block-header {
    background: url("https://i.imgur.com/lXDEn06.png");
}

Changed it to it. It did not work again and image is not showing up again too.

 

[Nicolas FR]

 

[TheMasso]

I really had no idea why is not working on my website. What am I doing wrong?

 

[Nicolas FR]

You can share your forum URL by PM if you want or here and i can check what's wrong.

 

[TheMasso]

You can check it out from https://valorantforum.io

 

[Nicolas FR]

The style property is applied but not the custom css in extra.less
Try this code to see if it is applied

.block--category .block-header {
    background: red;
}

 

[TheMasso]

It did applied. Very strange.

 

[Nicolas FR]

Try to host the image on your server by uploading it with ftp client and the change the path accordingly.

 

[TheMasso]

Oh, I really missed a put dot in the beginning of the last code you gave me. It's working now. Thank you so much for your help. So I want to apply another header image to sidebar widgets. What do I need to change for this time?

 

[Nicolas FR]

You have to target the widget first then apply the code to .block-minorHeader

[data-widget-key="your_widget_key"] {
    .block-minorHeader {
        background: url(".../image.png");
    }
}

 

[TheMasso]

How do I find out my widget ID's?

 

[Nicolas FR]

 

[TheMasso]

Thank you so much.