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:
daegontaven
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,
daegontaven
I’ve updated the thread question!
Tgr
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?
daegontaven
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?
Tgr
See the docs at $wgResourceModuleSkinStyles. Basically it can replace or append the CSS/LESS files for a given module when your skin is enabled.