How to customise Catégory page titles

Hey,

On the PAGE TITLE DESIGN panel, i chose CENTERED.Then, i want to put a specific IMAGE FOR CATEGORY HEADING per product category.

The result is not satisfying because i cannot customise the page title in order to have it visible upon the background.

To do so, i would like :
– to be able to choose hexadécimal color (#XXXXXX) per page title to find the right color accordingly to background image (rather than dark/light option)

and/or

– be able to select on the PAGE TITLE DESIGN, a design like the CENTERED one but with the title text above a dark or light rectangle / 50% opacity or so to make the title more visible no matter what picture we use as a background.

You can picture the problem of lisibility with the link i join with this topic.

And, to be clear, i join a picture of the page title design i would like to achieve choosing (typo/typo color/title text light background)

Can you give me a CSS short term solution
and, better,
consider adding this feature in futur update to better customise page titres design.

Thanks.

Best regards,

Emmanuel

Attachments:

You must be logged in to view attached files.

Hello,

On the PAGE TITLE DESIGN panel, i chose CENTERED. I see now Category title is centered.

Then, i want to put a specific IMAGE FOR CATEGORY HEADING per product category. Navigate to Products > Categories > enter a category http://prntscr.com/m5qu4e insert Image for category heading

to be able to choose hexadécimal color (#XXXXXX) per page title to find the right color accordingly – Navigate to the Theme Settings > typography > Advanced typography and set the color for the Category title http://prntscr.com/m5qv5g more information is here https://xtemos.com/docs/woodmart/advanced-typography-settings/

be able to select on the PAGE TITLE DESIGN, a design like the CENTERED one but with the title text above a dark or light rectangle / 50% opacity – this is possible by means of custom CSS but it will be the same for all the categories.

Best Regards

Hello,

Thaïs for your answer. I’ll try to do so. Would you be kind to give me the pièce of CSS to achieve the « above light or dark rectangle/50% opacity » even if it’s the same for each category.

Thanks

Best regards,

Emmanuel

Hello,

Add the code to the Theme Settings > Custom CSS:

body .cat-design-center .hover-mask{
    background: rgba(0,0,0,.6);
}

Best Regards

[Author]

Posts