Add Images to Category Strips per Category ID

Add Images to Category Strips per Category ID

Jordyn

Well-known member
Jordyn submitted a new resource:

Add Images to Category Strips per Category ID - Small edit to add images to your Category Strips.

This is just a small code to add to your extra.less template. This lets you add images per Category ID. All you have to do is upload your own images to your server and add the image path or image URL link to the code, along with your Category ID you're adding the image to by replacing the X.

This has only been tested on default styles on PC and Mobile.

You can change the Category Height, Category Title Size, Font Color for Title and Descriptions etc.

This first code is just the basic...

Read more about this resource...
 
Great resource and share. Really is what I needed. You were much help and thank you again :)
No worries mate :)
I already had images added to the right on my forum. Thanks for the idea of tidying up the code ;)

Doesn't work with me if i don't write background-image instead background in the CSS code.
I have added quotes to background URL along with ../.
Originally i had background-image, then seen it messes with mobile view. So i can't change it, but good you have it working.
 
Found it! Added min-height: 100px; and that did the job!
Would you be able to advise where abouts in the code I can add text to show under the catergory name?
 
Found it! Added min-height: 100px; and that did the job!
Would you be able to advise where abouts in the code I can add text to show under the catergory name?
Hey mate, are you talking about the Categories Description?

Code:
/* Categories Descriptions */
.block--category .block-desc {
color: #000000;
/**********/
 
Hey mate, are you talking about the Categories Description?

Code:
/* Categories Descriptions */
.block--category .block-desc {
color: #000000;
/**********/

Hey :)

Where in your screenshots you've wrote "Yes some text, for demo only etc " under the category name.
 
Hey :)

Where in your screenshots you've wrote "Yes some text, for demo only etc " under the category name.
No worries, you just need to find and change the color: #000; in the code. To something example #222222

Code:
/* Categories Descriptions */
.block--categoryX .block-desc {
color: #000;
text-transform:;
font-family: monospace;
text-shadow:
   -1px -1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
     1px 1px 0 #FFF;
}
/**********/
 
No worries, you just need to find and change the color: #000; in the code. To something example #222222

Code:
/* Categories Descriptions */
.block--categoryX .block-desc {
color: #000;
text-transform:;
font-family: monospace;
text-shadow:
   -1px -1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
     1px 1px 0 #FFF;
}
/**********/

Sorry, lost me there! Just wanted to know where abouts I write the text to add some more information to the node.
 
Sorry, lost me there! Just wanted to know where abouts I write the text to add some more information to the node.
Oh haha, sorry.
Go to and edit:

Forums>>Nodes>>Edit category or add new
1kant.webp


Appearance>>Styles>>Style properties>>Node/forum list
2kant.webp
 
Oh haha, sorry.
Go to and edit:

Forums>>Nodes>>Edit category or add new
View attachment 203539


Appearance>>Styles>>Style properties>>Node/forum list
View attachment 203540

Haha, I can't believe it was that obvious and I missed it! Thank you! :D

One last question, not sure if this is possible or not. I want to keep my current default catergory node colour, but add a transparent PNG image over the top of it. Do you know what the xenforo code is for the catergory colour is so I can add that into the code?
 
You're welcome ;)

To keep background color, you could remove the color, example blue, from this code:
Code:
background: blue url("../images/cover-image.png") no-repeat center / cover;

and make it:
Code:
background: url("../images/cover-image.png") no-repeat center / cover;

Hope this keeps the default XF2 background color?
 
You're welcome ;)

To keep background color, you could remove the color, example blue, from this code:
Code:
background: blue url("../images/cover-image.png") no-repeat center / cover;

and make it:
Code:
background: url("../images/cover-image.png") no-repeat center / cover;

Hope this keeps the default XF2 background color?

Thanks foe that. Gave it a try but no joy, just takes away all the colour.
I found that the backgroud is displayed as linear-gradient(rgb(72, 155, 234) 0%, rgb(32, 124, 229) 100%); - However putting that there doesn't get the image to show.

Using
background: rgb(72, 155, 234) url("../testsite/skybg.png") no-repeat center / cover;

Does show the colour and the image, but just a solid colour with no gradient. Don't suppose you know of the way to add the linear-gradient at all?
 
Thanks foe that. Gave it a try but no joy, just takes away all the colour.
I found that the backgroud is displayed as linear-gradient(rgb(72, 155, 234) 0%, rgb(32, 124, 229) 100%); - However putting that there doesn't get the image to show.

Using
background: rgb(72, 155, 234) url("../testsite/skybg.png") no-repeat center / cover;

Does show the colour and the image, but just a solid colour with no gradient. Don't suppose you know of the way to add the linear-gradient at all?
Hey,

Try this please.
Code:
/* Categories Images and Title */
.block--category .block-header {
background: rgb(72, 155, 234) url("URL-IMG") no-repeat center / cover;
background: linear-gradient(rgb(72, 155, 234) 0%, rgb(32, 124, 229) 100%);
color: #FFF;
overflow: hidden;
}
/**********/
 
Back
Top Bottom