How to Change Color & Alignment for Titles in Categories Grid

Hi,

I just bought Woodmart, and really love all the possibilities it offers, and how fast it is. So thank you for this great theme!

I would, however, like some help with the following:

The default designs in the Category Grid do not work well for my shop:

1. I like the bottom-left alignment of the text in the first design – named “Default” – but the dark font is not visible on my dark images. How do I change the font color to light?

2. I really like the design option with the colored block – named “Replace Title” – but I do not like its center alignment. How do I change the alignment of this textblock to bottom-left or bottom-right?

3. How do I remove the titles from the images altogether? I would like a category grid without the titles being displayed.

4. How do I create custom titles for the category grid? For instance: I have a category named “Toys” on my website. But in the grid, I would like this category to be displayed as “Discover the World of Play”.

Thanks in advance!

Cheers,
Mae

PS: for good measure, this is what I mean with “Category Grid” > https://woodmart.xtemos.com/products-categories/ (I am using the Masonry version)

PS2: my website is currently under construction, so it is difficult for me to send you a link.

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

Hi,

Thanks for your response, this solves part of the problem. However, can you also solve these remaining issues for me?

1. I like the white font and the colored boxes, but NOT the dark overlay they come with (the “Replace Title” option also comes with a dark overlay over the image, and so does the “Center Title” option. Can you give me an option that has a white font, but ALSO removes the dark overlay?

2. The same for the “no titles” option: the code you gave me removes the titles, but also leaves a dark overlay over the images. Can you please give me a “No Titles” option without the dark overlay?

Thanks in advance!
– Mae

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

Hi,

Thanks for getting back to me!

It’s almost all resolved now, but there is one remaining problem:

When I switch to mobile view, the colored boxes disappear, and the categories are displayed in black text. This black text is not visible, because I am using dark pictures.

1. Is there a way to make the black text appear white on both mobile and desktop view? (But still have the text remain in the bottom left corner).

2. Is there a way to keep the colored boxes from disappearing in mobile view?

Thank you,
– Mae

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

Hi,

Thanks for your quick response! Some of it was definitely helpful, but you didn’t answer all of my questions 🙂

– How do I make the titles white on the desktop version (not just on mobile). (So basically looking like “Default”, but with white text instead of black text. Or otherwise like “center title”, but without the dark overlay and with the text at bottom left).

– How do I display the colored boxes on mobile? They show up on desktop, but disappear on mobile view.

Thanks again for all your help,
– Mae

Hello,

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

Best Regards

Hi,

Thanks for your reply.

I prefer the design with the colored boxes for now (without the black overlay). However, it is important that the colored boxes also show up on mobile (not just on the desktop version). On mobile, the colored boxes turn into white text. This text is difficult to read on mobile, making my website look unprofessional.

In addition, I would really like it if there was a way to create custom text for the grid categories.
– Example: I have a category called “science” on my website. But in the grid, I would like the text to say something else (i.e. “You Can be a Scientist!” instead of “Science”). Can you let me know how I can do this?

My page is still under construction, so I have provided a private bypass url.

Thanks, I look forward to your reply!
-Mae

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

Hi,

Can you at least show me how to get the colored boxes on mobile view? You didn’t answer my previous question. 🙂

I tried to recreate the category design (5 categories, with the larger first category on the left) with banners, rows, and columns, but I don’t understand how to get it to look the same. Do I need to use an extra widget, and which one? Do you maybe have some code for me?

Cheers,
-Mae

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

Hi Elise,

I have chosen the “Replace Title” design (with the colored boxes) for my categories. The boxes only appear on desktop – but I also want them on mobile. You can see all of this in my bypass url (see private content).

As stated in my previous post, I would also like to know how to create a similar grid (5 categories, left category large) with promo banners & rows/columns. Do you have some code for this? Or can you show me what widget to use?

On August 13, you stated “With the help of row & column grid, you can recreate any template easily” – but I’m not finding this easy at the moment. What widget/grid do I need to use for this?

Cheers,
-Mae

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

Hi Elise,

Thanks, that does look a lot like what I am trying to do!

Could you maybe send me the sizes used for the banners in that example? (Or otherwise the code version). I will try to recreate it for my own website.

Cheers,
-Mae

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

Thank you Elise!

This is exactly what I meant to achieve. 🙂 You have great support, keep up the good work!

Kind regards,
Mae

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

[Author]

Posts