XF 2.2 Replace category title with image?

[Luke247]

Hello,

On category view, how can I remove the category title and put an image instead? I would like to have a different image for each category.

Thank you.

 

[Mr Lucky]

Deleted previous answer, it was wrong

To hide title (category id 1)

.block--category1 h2.block-header a
    {display:none}

To add an icon

.block.block--category.block--category1 .block-header:before {
 
    .m-faBase();
    content: '\f79f';
}

For an image, I'm not sure

 

[Mr Lucky]

Try this for image

.block.block--category.block--category1 .block-header:before {
 
background-image:url("/link_to_image)";
   height:50px;
width:200px
}

EDIT: the above does not work as a link though

 

[Mr Lucky]

For a forum node it is easy, as you can just add a normal image with link html to the description, but for categories, the hide title code (h2) above also hides the description which it doesn't do for forums ...hmmm...

 

[Luke247]

Deleted previous answer, it was wrong

To hide title (category id 1)

.block--category1 h2.block-header a
    {display:none}

To add an icon

.block.block--category.block--category1 .block-header:before {
 
    .m-faBase();
    content: '\f79f';
}

For an image, I'm not sure

Sorry for the confusion. I want the category title removed from the category page, not the forum list. And, an image to replace the category title (on the category pag), with a different image of my choice for each category.

hope that makes sense

 

[Mr Lucky]

hope that makes sense

Not really, I don’t actually know what a category page is.

 

[Luke247]

Not really, I don’t actually know what a category page is.

 

[Abraham54]

A most interesting topic for me, for I like to adjust an image of my choice to the title of the category.

 

[Mr Lucky]

View attachment 268157

Ok, well that makes it even more difficult IMO.

However it is still easy to put an image or icon there but without hiding the title. You can either add it in the description or via the before: selector

 

[Baby Community]

Deleted previous answer, it was wrong

To hide title (category id 1)

.block--category1 h2.block-header a
    {display:none}

To add an icon

.block.block--category.block--category1 .block-header:before {
 
    .m-faBase();
    content: '\f79f';
}

For an image, I'm not sure

Which template should we not add in the child theme we want to edit?