Hi
Anyone care to modify the HTML code below to change the text color from black to red: (1) Title & (2) line items ?
<div class="nasa-flex margin-bottom-15 flex-wrap" style="gap:10px;">
<h4 class="fs-14 margin-top-0 margin-bottom-0 margin-right-10">Kitchenware & Cookware:</h4>
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/pots-pans/">Pots & Pans</a> |
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/professional-kitchen-knives-accessories/">Professional Kitchen Knives & Accessories</a> |
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/kitchen-utensils-equipment/">Kitchen Utensils & Equipment</a> |
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/kitchen-appliances/">Kitchen Appliances</a> |
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/food-storage-containers/">Food Storage & Containers</a> |
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/extenders-racks/">Extenders & Racks</a></div>
Thanks in Advance.
PaulOB
June 10, 2025, 3:34pm
2
You could use CSS like this:
.nasa-flex h4,
.nasa-flex a{
color:red!important;/* you can lose !important if you match specificity*/
}
However, I don’t know the extent of that class and you may have it scattered all over your site. Therefore you could add a custom class to the html and use that as a hook.
e.g.Add a new class (custom-highlight);
<div class="custom-highlight nasa-flex margin-bottom-15 flex-wrap" style="gap:10px;">
Then adjust the css:
.custom-highlight h4,
.custom-highlight a{
color:red!important;/* you can lose !important if you match specificity*/
}
That’s the best I can do without seeing the page in question.
1 Like
It is poor practice, but you can insert inline CSS:
<div class="nasa-flex margin-bottom-15 flex-wrap" style="gap:10px;">
<h4 class="fs-14 margin-top-0 margin-bottom-0 margin-right-10" style="gap:10px; color:red;">Kitchenware & Cookware:</h4>
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/pots-pans/" style="color: red;">Pots & Pans</a> |
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/professional-kitchen-knives-accessories/" style="color: red;">Professional Kitchen Knives & Accessories</a> |
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/kitchen-utensils-equipment/" style="color: red;">Kitchen Utensils & Equipment</a> |
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/kitchen-appliances/" style="color: red;">Kitchen Appliances</a> |
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/food-storage-containers/" style="color: red;">Food Storage & Containers</a> |
<a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/extenders-racks/" style="color: red;">Extenders & Racks</a>
</div>
1 Like
Thanks Folks.
Both solutions are working fine.
However, the ‘|’ hasn’t changed color. Still showing as black.
@paul & @archibald - do you mind reviewing the code ?
Site URL
Rgds
In first line, change:
style="gap:10px;"
to:
style="gap:10px; color:red;"
(color:red;
can then be deleted from the <h4>
element.)
1 Like
PaulOB
June 10, 2025, 8:08pm
6
For the css version you can do this.
.nasa-flex,
.nasa-flex h4,
.nasa-flex a{
color:red!important;/* you can lose !important if you match specificity*/
}
1 Like
Thanks Folks.
It’s looking neater with a black b/g & white color text.
1 Like
As Archibald touched upon, using inline styles isn’t good practice. It overrides the CSS styling, so when you come back to it, or someone else picks up your project they are going to have a real headache trying to figure out why their CSS rules aren’t working.
I’m not familiar with elementor and the theme you are using, I would imagine there are probably in-built ways of doing your custom styling.
For a custom CSS approach though, the following styles seem to have the right specificity to achieve what you are after, without the need for inline styling e.g. style='gap:10px;'
or style='color: #fff;'
Edit: You have two .nasa-footer-bottom
sections. The second being the copyright, terms and condition section. The only unique identifier I could see is the data-id, with the section you are interested in being ‘42d648b’. Again I would imagine you could add a classname to this section in elementor e.g. .nasa-footer-bottom__product-links
, that would make things a little cleaner.
Using the data-id, this should work.
#nasa-footer .nasa-footer-bottom[data-id='42d648b'] {
color: white;
}
#nasa-footer .nasa-footer-bottom[data-id='42d648b'] a {
color: inherit;
}
#nasa-footer .nasa-footer-bottom[data-id='42d648b'] .nasa-flex {
gap: 10px;
}
or if CSS nesting is supported
#nasa-footer .nasa-footer-bottom[data-id='42d648b'] {
color: white;
a {
color: inherit;
}
.nasa-flex {
gap: 10px;
}
}
1 Like
Thanks for the useful tip.
I gave an inline CSS option because post #1 specifically asked for modification of the HTML code with bold emphasis.
1 Like
I wasn’t questioning you offering an inline solution, you already mentioned in post #3
It is poor practice , but you can insert inline CSS:
1 Like