@howi42 you can use z-index in custom.css to choose the stack level of elements

@j-e-f-f That DEFINITELY worked! Thanks mate. I just wanted a really nice and clean weather module. I will definitely check yours out. THANKS!

@j.e.f.f It works. Thanks a lot.

Have you tried to use an external Browser e.g. from your Laptop to Open your Magic Mirror Homepage ? (192.168.178.20:8080 for example) there you could use F12(developer Mode) to find out the css class names you Need

Thank you for both your help. @Anhalter42 said in Change heading color: header { color: green; } That’s exactly what I was looking for.

Hello, Im use the dht22 module from nebulx29. It shows the Temperature and Humidity in my Room. I’ve seen a table with Comfortzone. My Idea is to set colors for various Comfortzones. But, i have no idea to realize it.

@zeular Yeah, that’s the way I did it too.

@broberg https://github.com/MichMich/MagicMirror#configuration scroll down to module configuration https://github.com/MichMich/MagicMirror/blob/master/js/loader.js#L105 https://github.com/MichMich/MagicMirror/blob/master/js/main.js#L34

@PointPubMedia the hour and the minute are in the same div which makes it not possible to do it just in css, but there is a config option which adds a wrapper around the minutes, which is perfect for this task. the selector would be probably something like this: .clock div.time.bright.large.light span.bold { //set the font size here } therefore you also have to add clockBold: true to the config if you dont like the bold effect you can overwrite it as well where you change the font size

@poekel .compliments .xlarge { font-size: 30px; } do not add this inside body {} it goes after.

@johnnyboy I like the idea of what you proposed. I was thinking I’m currently running the MM on a Pi2 if I were to purchase a Pi3 (which has a substantial increase in power) could it run MM with 3rd party modules with more stability then it would on the Pi2?

@daiacandido you need a mirror with less light transmission (this will also dimm the things you want to see). However, when looking at the mirror in the dark, even with minimal light transmission, you would still see the backlight of the screen. I suppose the easiest solution is to increase the light in the room itself.

@strawberry-3.141 said in Compliments not displaying: @l1613532 this code isn’t working properly, you have to do if (this.config.remoteFile != null) { var self = this; this.complimentFile( function(response){ self.config.compliments = JSON.parse(response); }); } Tank you so much for this response. My Zero (non-W) was also suddenly not displaying compliments as well and I was trying to figure it out all week!

@valid8r The reason “.clock.time” doesn’t work is because it’s looking for an object with both classes “clock” AND “time”. “.clock div.time” would be correct but only to address a div with the class “time” (within an object with the class “clock” ). “.clock .time” would be the same, but the object doesn’t have to be a div - it could be a p (paragraph) with the class “time” “.clock.time” would address only objects that have both classes, not regarding their parents. So in your case it would be correct to write “.clock .time, .clock .date” to address both “.time” and “date” within “.clock”. Your example would address all objects with the class “date” regardless of their parents class being “clock” or not. Edit: Not to confuse you, but just to make this complete, there is another way to make sure you get the right child of a parent: “.clock > .time” would address “.time” only if the direct parent is “.clock”. So if it’s < div class=“clock” >    < div class=“time” > “.time” will be addressed, but if it is < div class=“clock” >    < div >       < div class=“time” > “.time” is not addressed. (Just in this instance with > in between.)

@Dimonic every region has the class region, the position gets splitted by underscore. then you have the class top and center the selector will match any tag which has the class region and top and center e.g. anytag class="region top center" EDIT: it wont let me write real html code < nor <

I am creating a picture frame module which changes between different layouts (displaying one, two or four pictures at a time). To get the correct size of the pictures I am using the object-fit property which relies on the container to have a set width. The “region fullscreen above” has the correct width and height set but the div ‘containers’ expand depending on the content. Once the container div has the correct size the dimensions can be propagated down with easy css. Since there is no parent selector in css how can I access and set the dimensions correctly. [image: e9om6ymb.png] I am aware that I can do this using javascript. I just want to know if there is a possibility using traditional css.

@broberg got it. thank you!

@Mr.Sponti Good to hear that you have what you were looking for :D Looks nice!

Sorry my bad, i was on mobile and didn’t notice that that css picture you made is the module’s css. I updated my code snippet above. I think this would be where you are looking for. One sidenote: if you set both the width and height then the pictures might not remain in their original aspect ratio, so try to set only one of them at first.