How do I override css?


#1

I’m building a custom version of Vector skin and I want to override the CSS for element with id #footer-info-lastmod as shown below.

You will notice that the color of said element is defined by #footer ul li {color #222} as seen above. I want to change this to another color. While I can theoritically just add !important wherever I need, it’s bad practice and may become a debugging nightmare later on. I scanned through the skinning manual and found no relevant information.

While on the same subject, I’d also like to know how to override CSS for extensions as well. For instance if I want to keep the layouts of the translate suit of extenstions but change only icons and colors. Any guidance appreciated!

Theme Repo:


#2

This issue will be updated with more info soon as I’ve done a full reset of the git repo to figure out what is going on,


#3

I’ve updated the thread question!


#4

body #footer ul li or div#footer ul li are some common ways to get higher specificity without all the unwieldiness of !important. Not sure if that’s what you were asking?


#5

Perhaps, my example was bad. What I want I want to do I redefine a particular css class partially. Consider the example comparisons below :

And then the mapping in skin.json with a + prefix for mediawiki.notification in ResourceModuleSkinStyles

And then the full defintion as seen the mediawiki codebase:

Anyways, as you can see this is a bit over my head as to how to add css to a css class without overwriting the class properties and values. While higher specificity using IDs would be a good solution short term. If a class is used in multiple elements then I’d have to define specifics everywhere.

What is ResourceModuleSkinStyles and is it used to add properties to existing classes? If so is this the way I should be restyling Vector?


#6

See the docs at $wgResourceModuleSkinStyles. Basically it can replace or append the CSS/LESS files for a given module when your skin is enabled.