XF 2.0 Xenforo 2- Different Category Strip Images

[Trueprime]

I been looking for some way to implement different images per category strip titles. I have seen some topics on this for XF1 version as seen here but I'm looking to accomplish this in Xenforo 2. Any help or suggestions on this will be appreciated, thanks

 

[Jordyn]

like this?


If so. Add to extra.less replacing the X with your ID.

.block.block--category.block--categoryX .block-container .block-header {
background-image: url('/images/thisimage.jpg');
background-repeat: no-repeat;
background-position: center;    
}

 

[Trueprime]

like this?
View attachment 185428

If so. Add to extra.less replacing the X with your ID.

.block.block--category.block--categoryX .block-container .block-header {
background-image: url('/images/thisimage.jpg');
background-repeat: no-repeat;
background-position: center;   
}

Thank you @Jordyn I'm going to try that right now.

 

[Trueprime]

@Jordyn that did the trick! I did have help from @logixsol for the rest of the coding and made it work using this code

.block--category15  h2{
background-image: url('mysite.com/image/catbg1.png');
background-repeat: no-repeat;
background-position: center;
}

Thank you again for the help

 

[Jordyn]

@Jordyn that did the trick! I did have help from @logixsol for the rest of the coding and made it work using this code

.block--category15  h2{
background-image: url('mysite.com/image/catbg1.png');
background-repeat: no-repeat;
background-position: center;
}

Thank you again for the help

No worries mate, good work . Cheers

You can certainly have some fun with this.

This is my updated code just encase others are interested for default style.

/* Categories Images and Title */
.block--categoryX .block-header {
background-image: url('/images/cover-line-pay.jpg');
background-repeat: no-repeat;
background-position: center;
height: 60px;
text-transform:;
font-weight: bold;
font-size: 20px;
font-family: cursive;
color: #FFF;
text-shadow: black 0.1em 0.1em 0.2em;
}
/**********/
/* 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;
}
/**********/

 

[Trueprime]

No worries mate, good work . Cheers

You can certainly have some fun with this.
View attachment 185431
This is my updated code just encase others are interested for default style.

/* Categories Images and Title */
.block--categoryX .block-header {
background-image: url('/images/cover-line-pay.jpg');
background-repeat: no-repeat;
background-position: center;
height: 60px;
text-transform:;
font-weight: bold;
font-size: 20px;
font-family: cursive;
color: #FFF;
text-shadow: black 0.1em 0.1em 0.2em;
}
/**********/
/* 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;
}
/**********/

This works even better. Gives many options, including the size! Absolutely digging and loving it. Thank you again @Jordyn. I'm sure others will enjoy this too!

 

[Jordyn]

This works even better. Gives many options, including the size! Absolutely digging and loving it. Thank you again @Jordyn. I'm sure others will enjoy this too!

Thanks for the kind words mate, but i have to remove the height and add margins instead, as the height stuffs everything up on mobile.
Will be back shortly with the fix

 

[Trueprime]

Thanks for the kind words mate, but i have to remove the height and add margins instead, as the height stuffs everything up on mobile.
Will be back shortly with the fix

ok you really went the extra mile ..cheers

 

[Jordyn]

ok you really went the extra mile ..cheers

Haha, yep Hope this works better, the height is there. Cheers mate: https://xenforo.com/community/resources/add-images-to-category-strips-per-category-id.6740/

 

[interforo]

like this?
View attachment 185428

If so. Add to extra.less replacing the X with your ID.

.block.block--category.block--categoryX .block-container .block-header {
background-image: url('/images/thisimage.jpg');
background-repeat: no-repeat;
background-position: center;  
}

hello, what if I have multiple categories?
And how to keep the mobile version with no image strips?
tks

 

[Laura65]

like this?
View attachment 185428

If so. Add to extra.less replacing the X with your ID.

.block.block--category.block--categoryX .block-container .block-header {
background-image: url('/images/thisimage.jpg');
background-repeat: no-repeat;
background-position: center;   
}

Thank you for this.