Add Images to Category Strips per Category ID

Sunny1997 · 04-03-2019, 01:26 PM

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.

Recommended image width would be no smaller than 800px.

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

Don't forget to change the colors etc to your likings and i hope this works for you.

This first code is just the basic add image code. See second code below if you want to go right out.

Code:
/* Categories Images and Title */
 .block--categoryX .block-header {
 background: url(/images/cover-image.jpg) no-repeat center center / cover;
 color: #FFF;
 }
 /**********/
 /* Categories Descriptions */
 .block--categoryX .block-desc {
 color: #000;
 }
 /**********/
 /* Categories Images and Title Responsive */
 @media (max-width: @xf-responsiveMedium)
 {
   .block--categoryX .block-header {
     max-height: inherit;
   }
 }
 /**********/

Add Images to Category Strips per Category ID

Submitted by Sunny1997, 04-03-2019, 01:26 PM, Thread ID: 123412