MagicMirror default weather module

sdetweil

@sankum i do not know, but you can use the developers window elements tab to discover and test css changes

see the second link in my signature below for a starter discussion on how to use it

you can also discover some info from the css we provide in the module folder

MagicMirror/modules/default/weather

weather also uses the nunjucks template formatting file,
.njk, it is a text file, you can see the class assignments there too

sankum

Thanks Sam,
I was trying to use the web dev tool in the browser. The trouble was that the screen display was quite busy and was hard to navigate to the right corners. Did not quite know how to disable other module displays, so I could focus on weather module.

Ultimately I just commented out some of the modules and then it was easier to navigate!! I found the dimming of the feels like is span.dimmed and dimmed is defined in main.css.

Dont quite know how to do undim in .feelslike so as to be a local effect, so for now I just defined the dimmed color. Is there another way?

Also, is it possible to disable displays of some modules in web dev tool other than have to comment them out in config.js? Thanks.

sdetweil

@sankum lots to learn!

dont need to comment out, just add

disabled :true,

after the module: line

in dev window , elements tab
you can select each module entry and add

display:none;

to hide it

changing a style
css stands for cascading style sheet
which means there are layers, and you can override a previous definition at any layer

MagicMirror provides a mechanism to be the last layer
css/custom.css

using this syntax you select the elements you want apply styles to

selector_clause {
    styles
}

a selector clause contains items to identify the elements
. means class , class=
# means id , id=
no prefix means html tag name , div, span, table, tr, li, p etc

a selector_clause ALWAYS selects ALL elements in the web page/document, so you have to be careful not to modify everything accidentally.

we recommend always using the modulename as a class prefix to only select the elements in that tree

.modulename dimmed {
????
}

note:

that IF you have multiple instances of the same module, this selector will select ALL modules of that classname, even if you didn’t intend that… you could use the ID field, OR add a

classes:"classname"

to the module instance in config.js and use THAT class in the selector clause, as it would ONLY apply to the module(s) you added the classes: property to

this is where the dev window helps. select the elements you are interested in modifying and set the styles in the upper right window

if they produce the effect you want, you can swipe copy/paste them to insert in custom css

then put the selector around the content you pasted

sankum

Thank you Sam. The guidelines were very helpful. I could use the web dev as you suggested.

I was also able to use classes and modify the styles I wanted in custom.css. I still have a few issues with the styles in the custom.css (mainly in syntax and largely due to my lack of knowledge) but will persevere. Thanks.

sdetweil

@sankum i use this guide for selector clause
https://www.w3schools.com/cssref/css_selectors.php

used to be all one page, now in different sections

you can combine all kinds of elements