For a bit of background on this, nesting CSS as @44mc44 has tried to do (known as “CSS scoping”) was proposed for the CSS spec, but browsers were slow to support it, and eventually dropped it altogether. The idea was you could just limit your CSS to a certain selector like follows: .some-class { h1 { font-size: 24px; color: #ACACAC; } p { font-size: 18px; } } This would mean that h1 and p elements inside an element with the class some-class would have the styles applied, while h1 and p elements that are not contained in that class would not. This would be a safer way to write your CSS to ensure it doesn’t accidentally get applied to unintended elements. Unfortunately, this doesn’t work in any browser, so you have to write out the rules individually to achieve the same thing: .some-class h1 { font-size: 24px; color: #ACACAC; } .some-class p { font-size: 18px; } @Seann is correct in that if we were using a preprocessor such as SASS or SCSS, then scoping would indeed be supported. You would write your rules scoped, and then the preprocessor would take care of converting your rules to the long form. Using a preprocessor helps to make authoring your CSS easier and less verbose. Alas, Magic Mirror does not appear to use a CSS preprocessor, so we’re stuck with writing it out the long way.

In your second code example you are missing the . for region. Make sure you copy paste the code exactly, dots and hashes are important

@cowboysdude Noice!

@sachin I’m suddenly having this issue as well and can’t seem to find a fix.

Thanks everyone for your answers, will read them carefully and follow your advice, will post back soon.

@spwood100 thanks I actually just did some trial and error and figured it out, It was much simpler than I thought.

@rak Put something like this… .region.top.left { width: 768px; } .region.top.center { width: 768px; } .region.top.right { width: 384px; } .region.bottom.left { width: 960px; } .region.bottom.right { width: 960px; } in your custom.css file. I would venture to think it should work, tested it out on my laptop, and it seemed to be what you might be wanting, to get the number of pixels needed, I multiplied my screen resolution by .40 (40%) and .20 (20%). Then I divided my screen res width by 2 to get the 50% in pixels. IE: my screen res for total width is 1920px. Thus 1920 X .40 = 768, giving me the top_left and top_center amounts. then I multiplied 1920 X .20 to get the top_right amount. then to get the 2 bottom amounts, I divided 1920 /2 = 960.

@cowboysdude said in Box/Frame around module: -moz-border-image: url(https://forum.magicmirror.builders/assets/uploads/files/1500968912312-14284711641_ba88f4c074_o.jpg) 6 5 7 4 stretch; -webkit-border-image: url(https://forum.magicmirror.builders/assets/uploads/files/1500968912312-14284711641_ba88f4c074_o.jpg) 6 5 7 4 stretch; -o-border-image: url(https://forum.magicmirror.builders/assets/uploads/files/1500968912312-14284711641_ba88f4c074_o.jpg) 6 5 7 4 stretch; border-image: url(https://forum.magicmirror.builders/assets/uploads/files/1500968912312-14284711641_ba88f4c074_o.jpg) 6 5 7 4 fill stretch; So does this mean you are making constant calls out to the internet to reference this picture? Would it be a better option to store a copy of the image locally for reference? Sorry for the necro

@justjim1220 I started the same way when I moved to laptop boards but when I became more comfortable with Linux I didn’t see the need for Windows, at least where MM is concerned. I even wrote a tutorial a few months back about installing MM on Windows 7 and 10. https://forum.magicmirror.builders/topic/4089/complete-walkthrough-install-magicmirror-on-a-pc-windows-7-10

@zeular This requires a bit of CSS work in the custom.css file. The image is likely being positioned absolutely on the left or floated to the left, as it otherwise would be right-aligned as the text is. You’ll need to start MM in dev mode to open the inspector. Do this with npm start dev from the MagicMirror directory. Use the inspector to see what CSS is being applied to the image. The best part is that you can play with the CSS right in the inspector to try and see what rule is forcing the image to the left. If you are completely new to CSS, fear not! Start here: http://www.css-101.org/. This will give you the basics on how CSS works, and should be enough for you to figure out how to get the image right-aligned.

@ruckus09 LOL

@Mykle1, thank you for your quick answer. I am going to try that and keep you updated. :)

I would rather of course prefer it working out of the box, but if I can not get it to work I will try this. I looked at the github issues and they are talking about the --enable-touch-events parameter of electron. I have not worked with electron before - do you know where to put that parameter inside the electron.js file? Ok, I tried it like this: const app = electron.app; app.commandLine.appendSwitch('--enable-touch-events'); It does not do anything. How would I need to modify the magic mirror scripts in order for it to stop using electron and use chromium instead? I assume I would have to modify the run-start.sh script for that, (since you can not run bash through javascript). Can someone provide me some help for that?

Thank you! My problem is solved follow your readme! Great thanks

thanks It helps me !

There is kinda a cool feature here on the forum… it’s at the top right… I think they call it the Search feature… LOL People are afraid of it I think…

@acbc18 said in Modifying Compliments module: Thank you. I’m new at this and didn’t notice it but will do from now on. No worries friend. We’ve all been there. thanks guys turns out I had left out a comma and putting that in fixed it (after changing the quotes). Excellent! Those are two things you won’t forget. Enjoy your mirror! :^)

@pyrosmiley Not sure if you’ve been following but there is an issue with Magic Mirror 2.2.0 and Electron 1.7.6 that is triggered runaway CPU usage under no load, and it goes through the roof under any animated transitions. Any visual transitions struggle to animate – sounds like it might be what you’re experiencing… See this thread for me details: https://forum.magicmirror.builders/topic/4684/electron-cpu-usage/156?page=16 TL;DR: The solution seems to be to downgrade to MM 2.1.0 and Electron 1.4.15. Maybe give that a try to see if your performance improves.

I actually just made a comment explaining how I managed to get a CSS gradient in the background and not just the margins, but I’m still not quite where I want to be. I’m working on a vertical display board for the side of my fridge instead of a mirror, and it would be absolutely killer to have a slowly scrolling gradient, like the ones generated here and here (along with, I’m sure, a ton of other places!). My issue is though, while I can generate a static gradient that looks nice enough, I cannot for the life of me get it to animate. I have no idea why. Is this type of CSS animation just not doable in the MM framework, do I have to put it in its own <div> or something? I have no idea. Here’s the relevant part of my custom.css file: .region.fullscreen.below { background: linear-gradient(208deg, #235182, #196586); -webkit-animation: gradient 30s ease infinite; animation: gradient 30s ease infinite; @-webkit-keyframes gradient { 0%{background-position:25% 0%} 50%{background-position:76% 100%} 100%{background-position:25% 0%} } @keyframes gradient { 0%{background-position:25% 0%} 50%{background-position:76% 100%} 100%{background-position:25% 0%} } } I’m not entirely sure what they do or what they’re called, but I’ve tried this with the @keyframes part inside and outside the .region element, above and below. Still nothing. :shruggie: If it’s possible, it seems like it’d be super cool. Maybe I could try and put it in a module based on the MMM-ProfilePicture module that I’ve been using until recently? Sorry if this is a dumb and obvious question, and also thanks!

Edit; I am specially eager to work out why the lines below my headers are all different sizes. I would like them ALL to be the same size except for the oneliner part. If you put modules in the same region (like, top_left), most of them would have the same width (maybe it would be the largest width of modules) by default except some modules which has its own width value. Maybe, you have some troubles with width of various modules and region. Try this. .region.left { width:400px; } Most of your modules in left region (top_left, bottom_left) would have same width - 400px. (except some modules which control it’s width by itself) The problem was, I think, you might put some modules in top_left, and some in bottom_left, but the region width is not defined, so the width of modules in each region is set automatically to the largest width in each region.