@howi42 it just means that there are several weights available. When you use the font in your CSS, you can specify the weight as follows:
font-family: "Roboto Condensed";
font-weight: normal; /* bold, 300, 100, etc. */
@howi42 it just means that there are several weights available. When you use the font in your CSS, you can specify the weight as follows:
font-family: "Roboto Condensed";
font-weight: normal; /* bold, 300, 100, etc. */
@I_Am_Anthony Looks like it might work! You should call updateBackground()
once before setting up the timer so that you’ll have a background at module startup, instead of having to wait for the timer to fire for the first time.
@Fonfon No, but you can add a background colour to the module to make the text stand out better. try something like this in your custom.css
file:
.MMM-MyCalendar .module-content {
background-color: rgba(0,0,0,0.5);
}
The first three parameters 0,0,0
mean black, and the fourth parameter 0.5
is the level of transparency. Specify a decimal between 0 and 1, where 0 is fully transparent, and 1 is fully opaque.
@schlachtkreuzer6 z-index is a real pain in the butt to work with sometimes… The value you set affects the element’s position within the applicable stacking context. If each region (top_right, lower_third, etc.) have their own stacking contexts, then you’ll need to set the z-index of the regions themselves, not the modules within. Also, z-index does not take negative values, only positive. So in order to position element B below element A, set z-index values for both elements, making sure than A’s value is higher than B’s.
Finally, the draw order affects default stacking. the last element to be written to the screen by default has the highest z-index within its stacking context. So you may be able to influence the order in which items are drawn to the screen by changing the order you configure the modules in your config.js file. (i.e., try configuring MMM-Globe first in your config). However I don’t know enough about how MM works to state with certainty that this is true.
Finally, there is a region named “fullscreen_below” that is positioned under all other elements. It is used for things like the animated snow background module. You might be able to assign your MMM-Globe module to this region, then use some CSS to size and position it as desired. This will guarantee that any other module will be above the globe.
For more info on z-index and stacking contexts, read this:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
My recomenrdation to this is try as much as possible to avoid overlapping elements. Resizing modules is often much easier than trying to work with z-index.
@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.
@pugsly said in MMM-DarkSkyForecast - Yet ANOTHER weather module:
Trying to find out how to remove this spacing circled in RED.
By default my module forces a fixed width of 300px
. It looks like your parent column (i.e.: top_right
) is either explicitly set to be larger or is being forced larger by another module (maybe the “Devices Online” module underneath the forecast in your screenshot).
You can address either of the above situations in your custom.css
file. If you’ve set an explicit width for the parent column, then this should fix the issue:
.MMM-DarkSkyForecast .module-content {
width: 100%;
}
Otherwise, if another module is forcing the width of the column to be larger than normal, then you can either try to tame the width of that module, or you can set an explicit pixel width for your forecast to use the extra space. Try something like this:
.MMM-DarkSkyForecast .module-content {
width: 450px; /* adjust this as desired */
}
@allebone Are you referring to adjusting or eliminating the margin around the outside edges of the layout? If so, you need to add some rules in your custom.css
file, like this:
body {
margin: 10px; /* Adjust this to taste */
/* Also adjust these to subtract 2 x the value above */
width: calc(100% - 20px);
height: calc(100% - 20px);
}
If you want to eliminate the margin altogether, then the CSS looks like this:
body {
margin: 0;
width: 100%;
height: 100%;
}
@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.
Yeah… not sure what I’m going to do about this yet… Need to rewrite my weather module AGAIN due to API going belly-up. Any suggestions on a good, free API?
@pjkoeleman This is wonderful! Thank you very much. I’ll work this in this evening and post a few screenshots.