Put something like this…
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
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.
@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.
@ninjabreadman Thanks again for the assistance, one day I will return the favor (just give me some time to learn JS and CSS)!
This bit of CSS did in fact reduce the size of my news feeds to a more reasonable size, though it introduced a new problem - it moved the entire module to the left hand side of the screen. I don’t know if this is due to alignment or what, but my fix for THAT was to include the following bit of CSS into my custom.css as well:
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;
@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:
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.