Hi TagDiv,
I have a question regarding custom CSS code. Let’s say I’ve added an extra class help of tagdiv composer to an element and applied custom CSS to it. Will this conflict with the default CSS provided by the TagDiv Composer?
For Example:-
I’ve added an extra class .title { position: absolute; , background-color: red;}
While the default TagDiv Composer class is .td-module-title { position: relative; , background-color: black;}
Will these two styles conflict with each other? or will the CSS code I’ve added to my extra class take priority?
And second question is Can I use Inspect Element to find the default CSS classes assigned by TagDiv Composer to the element, and then add my custom code directly to those same classes?
Would this be considered a good practice?
Also, could having multiple classes on a single element have any negative impact on SEO?
Thanks,
Atul
Hi Atul,
1. Custom CSS applied through an extra class can override the default TagDiv Composer styles, depending on CSS specificity and the order in which the styles are loaded. If both the default and custom classes are applied to the same element, the style with higher specificity or the one loaded later will take precedence. To ensure consistency and avoid unintended overrides, it’s best to use clearly defined and unique custom classes.
2. Yes, you can use your browser’s Inspect Element tool to identify the default classes used by TagDiv Composer. However, targeting these default classes directly is not always a good practice, especially if they are dynamically generated or subject to change when modifying layouts. It’s safer and more maintainable to add your own custom classes to elements and style those instead.
3. No, using multiple CSS classes on a single element does not affect SEO. CSS classes are used strictly for styling and scripting purposes and have no negative impact on how search engines crawl or rank your content.
Thank you!
Thank you for the clarification.
Just to confirm: in my case, I’ve added an extra class like .title { position: absolute; background-color: red; } to an element that already has the default TagDiv Composer class .td-module-title { position: relative; background-color: black; }.
– Does the custom class .title which is add an extra class get loaded after the default TagDiv styles in terms of CSS order or not?
– If both classes are applied to the same element, and my custom CSS is overriding the default styles, does that mean the default styles are still being unwanted css code unnecessarily in css file?In such cases, is it possible to remove the default TagDiv CSS code?
Since we’re applying custom styles through an extra class, the default CSS becomes unnecessary for that element. This adds unused code to the stylesheet, making the overall CSS heavier. Is there a recommended method to safely remove or exclude such default styles? If possible?
Thanks,
Atul
Hi,
To ensure your code is applied correctly, try using the following:
.title .td-module-title {
position: absolute;
background-color: red;
}
Using custom CSS will override the theme’s default styles, even if those styles are still being loaded. While manually removing the unused CSS from the theme isn’t an option, you can use a caching plugin such as WP Rocket to remove or minimize unused CSS and improve performance.
Thank you!
