I tried adding the following to my_style.css:
.twg_topx_sel a:visited { color:#333333 !important }
.twg_topx_sel a:link { color:#333333 !important }
(I initially tried it without the !important)
It seems that because the default values for these (a5a5a5) are set in style-min.css instead of style.css the overriding doesn't really work properly
I ended up with duplicate sections in the final CSS, like this:
.twg_topx_sel a:link {
color: #a5a5a5
}
.twg_topx_sel a:visited {
color: #a5a5a5
}
...
.twg_topx_sel a:visited { color:#333333 !important }
.twg_topx_sel a:link { color:#333333 !important }
And I suppose the browser prefers to use the one that occurs earlier in the file
I added the !important hoping to work around the issue but it didn't help
What I ended up doing was just removing those entries from the style-min.css entirely
Is there a better way to handle this?
Hi,
css always uses the latest style. This is why it is called Cascading Style Sheets :).
my_style.css is loaded as one of the latest css file.
as you would see in head.inc.php there are many styles loaded and my_style.css is way after style-min.css. style.css is not used at all. it is the not optimized file where then in the deployment process the style-min.css is generated.
Normally $optimize_css is enabled.
which means all of the files are copied into one and stored in the cache folder.
you can set this to false. Then you see in the browser all files and also where which style is set.
Best regards, Michael
Hello, Check the specificity of the selectors: Ensure that the selectors you are using to override the styles have a higher specificity than the default styles. This will ensure that your styles take precedence. Use the "!important" declaration sparingly: While "!important" can override styles, it should be used as a last resort. It's generally better to rely on specificity and cascade rules to achieve the desired effect. Adjust the order of CSS files: If you have control over the order in which the CSS files are loaded, you can rearrange them so that your custom styles are loaded after the default styles. This way, your styles will have a higher priority. Modify the existing styles: If possible, try to modify the existing styles instead of overriding them completely. This way, you can avoid conflicts and maintain a more streamlined CSS structure.
