Notifications
Clear all

overriding .twg_topx_sel a:visited / a:link in my_style.css

(@catharsis)
Active Member

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?

 

 

 

 

Quote
Topic starter Posted : 29/05/2021 6:02 pm
TinyWebGallery
(@admin)
Administrator Admin

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

ReplyQuote
Posted : 29/05/2021 11:12 pm