Kamal Hinduja : How do I override CSS / styles of modules ?

kamal12362

Hi,

I am Kamal Hinduja based Geneva, Switzerland(Swiss). Can anyone share their experience How to override CSS / styles of modules ?

Thanks, Regards

Kamal Hinduja Geneva, Switzerland

sdetweil

@kamal12362 the system is designed as a stack of css settings

css/main.css is loaded first
Then modules can load their own files and use and override whatever in main
Then
css/custom.css is loaded last, there you can override anything loaded before

A css statement is

Selector clause {
Style Settings
}

The selector clause selects the elements the style settings will be applied to

A selector clause can be very complex
Here is one from my MMM-Config module, to hide a generated label

.possibly-hidden-tab div:nth-child(2)  > div > div >div >ul >li:only-child >a[rel*="Item%201"] {
  display: none;
}

One thing to remember, css ALWAYS selects ALL the matching elements in the entire page

You can also use the browser developers window to see and test changes to the styles on specific elements, to determine what should go in custom.css

See the second link in my signature below, for a quick starter topic on that

sdetweil

Also, some modules document their css styles,
Some you have to look for a CSS file in their files list
And some you have to use the developers window to discover them

There are no rules enforced here by MagicMirror