Modifying Stylesheet (Weathermap, News feed & Temperature)

werdnllac

Hi all, I am new here and had benefited from the forum building my first magic mirror.

I had a default magic mirror built and would like to modify the style sheet, changing the font size and colour.

Can anyone share how to get it done?

Appreciate for your advice.

doubleT

My advice is to check both files in MagicMirror/css/: main.css and custom.css.
In main.css you can see all default css, don’t change anything but you can learn a lot. When you identify what you want to change, copy it in main.css, paste it into custom.css and make the changes.

For css, it’s relevant when something is loaded. If an identifier with a style is mentioned two times in a file, the second one overwrites the first one. And custom.css is loaded after main.css, so styles there override main.css.

Here’s how to get started with css: https://www.w3schools.com/css/

Also, you might want to check out the browsers developer tools. Start the mirror with npm start dev and you can select the elements, learn about their identifiers, classes, IDs and you can test changes directly in these developer tools (non permanent).

werdnllac

@doubleT Thank you. I manage to get the stylesheet.

j.e.f.f

@doubleT said in Modifying Stylesheet (Weathermap, News feed & Temperature):

For css, it’s relevant when something is loaded. If an identifier with a style is mentioned two times in a file, the second one overwrites the first one. And custom.css is loaded after main.css, so styles there override main.css.

Not quite accurate, and this can lead to some confusion. The second rule will take precedence over the first if they are equally specific, or if the second rule is more specific that the first. A more specific rule will always take precedence over a less specific rule, not matter what order they appear to the system.

Here are some examples:

.module-content {
  width: 150px;
}

...

.module-content {
  width: 300px;
}

/*
  exactly the same specificity, 2nd rule takes precedence,
  and anything with the class .module-content will be
  sized to 300px wide
*/

Another example:

.region.top.left .module-content {
  width: 150px;
}

...

.module-content {
  width: 300px;
}

/*
  First rule is more specific. Any element with the class .module-content
  within an element with the classes .region.top.left will be sized to
  150px wide. Any other element with the class .module-content
  will be sized to 300px.

  for example, here is some markup:

  < div class="region top right" >
    < div class="module-content" >
      This will be sized to 300px
    < /div>
  < /div>

  < div class="region top left" >
    < div class="module-content" >
      This will be sized to 150px
    < /div>
  < /div>

*/

Lastly, any rule with the !important flag will take precedence regardless of specificity.

Example:

.region.top.left .module-content {
  width: 150px;
}

...

.module-content {
  width: 300px !important;
}

/*
  Any element with the class .module-content will be
  sized to 300px. The !important flag takes precedence
  over the more specific rule above it.
*/

Try not to never use the !important flag. This makes it much harder to override your rule later if you decide you need to. Instead, if you are finding that your rule is not taking effect, it is most likely due to a more specific rule taking precedence. The real solution is to write a more specific rule to make yours take precedence.