How to Change Color & Alignment for Titles in Categories Grid

Hello,

1. As soon as you choose the “Replace Title” the font will be light.

2. To put the title to the bottom left:

.cat-design-replace-title .hover-mask, .cat-design-replace-title .more-products {
    position: absolute;
    top: 90%;
    left: 0;
    right: 70%;
    bottom: 0;
}

3. In order to hide:

.cat-design-replace-title .hover-mask, .cat-design-replace-title .more-products {
display:none;
}

4. You can insert the title into the field of the element: http://prntscr.com/kg82is

Best Regards

Hello,

Please add this code:

div.cat-design-center .wrapp-category:before, 
div.cat-design-replace-title .wrapp-category:before {
    background-color: transparent;
}

.category-grid-item .category-title{
    display:none;
}

Best Regards

Hello,

In order to make title light add this code to the Theme Settings > Custom CSS > Global CSS:

@media (max-width: 768px){
body:not(.woodmart-dark) .cat-design-center .category-title, body:not(.woodmart-dark) .cat-design-replace-title .category-title {
    color: #ffffff;
}
}

It is not possible to place title in the left or in the right on mobile with CSS due to fixed values which are not good for responsiveness.

Best Regards

Hello,

Please provide your site URL and type of the design you have finally chosen.

Best Regards

Hello,

If you want a custom text you would better use Promo banner element and set the link to the categories page. Promo banner element has the option to set light or dark text color as well as the option to add custom text and title. With the help of row & column grid, you can recreate any template easily.

Category element does not have an option to add custom text.

Best Regards

Hello,

In order to provide you with the code, I need to know which design you have set. So what design have you set: “Centered” or “Replace Title”?

There is no option to add a custom text/title to Category grid element. You can use Promo banner element instead.

Best Regards

Hello,

Please have a look how banner may look like https://woodmart.xtemos.com/banners/

Here is the sample of template http://prntscr.com/kiiq60 you can set the different number and width of the columns

Have a look how it looks like https://woodmart.xtemos.com/demo-organic/demo/organic/

So I mean you can create the grid with the help of rows and columns insert the Promo banner element, choose the hove effect with the colored box or without and add text and title.

This way is better cause you can edit on your own at any time.

Best Regards

Hello,

Here is the code:

[vc_row css=".vc_custom_1514466526269{margin-bottom: 4vh !important;}"][vc_column width="1/4" css=".vc_custom_1514466814540{margin-bottom: 20px !important;padding-right: 10px !important;padding-left: 10px !important;}" offset="vc_col-md-4"][promo_banner image="117" content_width="80" woodmart_color_scheme="custom" title_size="custom" font_weight="700" content_text_size="medium" img_size="768x970" title="FRUIT TEA PACK" link="url:%23|||" title_desktop_text_size="28" title_tablet_text_size="22" title_mobile_text_size="16" custom_title_color="#3a88cb"]Three large packs of fruit<br />
tea at the price of one.[/promo_banner][/vc_column][vc_column width="1/4" css=".vc_custom_1514466818418{margin-bottom: 20px !important;padding-right: 10px !important;padding-left: 10px !important;}" offset="vc_col-md-5"][promo_banner image="117" woodmart_color_scheme="custom" title_size="custom" font_weight="700" content_text_size="medium" img_size="full" title="FRUIT JUICE" link="url:%23|||" title_desktop_text_size="28" title_tablet_text_size="22" title_mobile_text_size="16" custom_title_color="#8bb429"]From squeezed<br />
fresh fruit.[/promo_banner][/vc_column][vc_column width="1/4" css=".vc_custom_1514466829123{margin-bottom: 4vh !important;padding-right: 10px !important;padding-left: 10px !important;}" offset="vc_col-md-3"][promo_banner image="117" woodmart_color_scheme="custom" title_size="custom" font_weight="700" content_text_size="medium" img_size="566x464" title="BERRIES" link="url:%23|||" title_desktop_text_size="28" title_tablet_text_size="22" title_mobile_text_size="16" custom_title_color="#c4265a"]Forest wild<br />
berries.[/promo_banner][vc_empty_space height="20px"][promo_banner image="117" woodmart_color_scheme="custom" title_size="custom" font_weight="700" img_size="566x464" title="CITRUS TEA" link="url:%23|||" title_desktop_text_size="28" title_tablet_text_size="22" title_mobile_text_size="16" custom_title_color="#d1a921"][/promo_banner][/vc_column][vc_column width="1/4"][/vc_column][/vc_row]

1. Create a new page;
2. Switch to Classic mode > text mode http://prntscr.com/kim9jm
3. Insert the code and get to the Backend editor, you will see the template, save it and insert in any page, drag, and drop in the place you need.

Best Regards

You are welcome, we are always happy to help you, write us when you have any difficulties or issues with our theme.

And we would be glad if you will rate our theme with 5 stars on Theme Forest in case you are satisfied with our theme and customer service http://themeforest.net/downloads

Thank you in advance