Add Images to Category Strips per Category ID

[Jordyn]

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

 

[Trueprime]

Great resource and share. Really is what I needed. You were much help and thank you again

 

[Nicolas FR]

Doesn't work with me if i don't write background-image instead background in the CSS code.

 

[Jordyn]

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.

 

[Jordyn]

Jordyn updated Add Images to Category Strips per Category ID with a new update entry:

Small changes made that users could benefit from

Added overflow: hidden; to code. Added quotes, background color and ../ to this line. Removed double center. Tested on all major browsers.

background: blue url("../images/cover-image.jpg") no-repeat center / cover;

Read the rest of this update entry...

 

[DaveL]

Hi @Jordyn ,
How would I change the height? I've edited
max-height: 60px;
but that seems to make no difference.

 

[DaveL]

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?

 

[Jordyn]

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?

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

 

[DaveL]

Hey mate, are you talking about the Categories Description?

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

 

[Jordyn]

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

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

 

[DaveL]

No worries, you just need to find and change the color: #000; in the code. To something example #222222

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

 

[Jordyn]

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



Appearance>>Styles>>Style properties>>Node/forum list

 

[DaveL]

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!

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?

 

[Jordyn]

You're welcome

To keep background color, you could remove the color, example blue, from this code:

background: blue url("../images/cover-image.png") no-repeat center / cover;

and make it:

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

Hope this keeps the default XF2 background color?

 

[DaveL]

You're welcome

To keep background color, you could remove the color, example blue, from this code:

background: blue url("../images/cover-image.png") no-repeat center / cover;

and make it:

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?

 

[Jordyn]

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.

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

 

[Missbhaving]

Is this compatible with xenforo 2.2?

 

[Jordyn]

Is this compatible with xenforo 2.2?

Hey, just tested on FF and iPhone8 and it works fine for me.

 

[Missbhaving]

Hey, just tested on FF and iPhone8 and it works fine for me.

Thank you so much for letting me know

 

[Jordyn]

Thank you so much for letting me know

You're welcome