Read the statement by Michael Teeuw here.
Trying to create a white background with black text to the clock module title block.
-
I am trying to create a white background with black text to the clock module title block.
The custom CSS file I am using (see below) does not seem to effect the clock title block and all I am getting is white text and no white background. Any help would be appreciated.
Custom CSS File
/* Custom CSS Sample * * Change color and fonts here. * * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;' */ /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */ /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */ :root { --color-text: #000; --color-text-dimmed: #000; --color-text-bright: #000; --color-background: black; --font-primary: "Roboto Condensed"; --font-secondary: "Roboto"; --font-size: 20px; --font-size-small: 0.75rem; --gap-body-top: 60px; --gap-body-right: 60px; --gap-body-bottom: 60px; --gap-body-left: 60px; --gap-modules: 30px; } .module.clock ( background-color:rgba(255,255,255,0.5); border-radius:8px; padding:8px; ) )
-
@synint said in Trying to create a white background with black text to the clock module title block.:
.module.clock (
background-color:rgba(255,255,255,0.5);
border-radius:8px;
padding:8px;
)the 1st and last parens need to be braces {}
also don’t need .modulealso don’t edit the root settings, for color… affects everything…
just do it in the .clock override
color: black
-
@synint also
the clock module sets these classes
// Style Wrappers dateWrapper.className = "date normal medium"; timeWrapper.className = "time bright large light"; secondsWrapper.className = "seconds dimmed"; sunWrapper.className = "sun dimmed small"; moonWrapper.className = "moon dimmed small"; weekWrapper.className = "week dimmed medium";
you could over ride ,
this worked.clock { background-color:white; border-radius:8px; padding:8px; } .clock .time{ color: black; }
-
His Sam applied the changes as detailed below but it still has not added a white background,
/* Custom CSS Sample * * Change color and fonts here. * * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;' */ /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */ /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */ :root { --color-text: #000; --color-text-dimmed: #000; --color-text-bright: #000; --color-background: black; --font-primary: "Roboto Condensed"; --font-secondary: "Roboto"; --font-size: 20px; --font-size-small: 0.75rem; --gap-body-top: 60px; --gap-body-right: 60px; --gap-body-bottom: 60px; --gap-body-left: 60px; --gap-modules: 30px; .clock { background-color:white; border-radius:8px; padding:8px; } .clock .time{ color: black; }
-
@synint lack of a closing } on the root entry causes an error and the rest of the css is not processed
I would NOT override the root… as it affects EVERY module…
-
@synint I re-read your original post
you said clock title block…
what is that ? the header? (which is optional and not used on the clock)
-
Hi Sam,
I thought it would be easier if I showed an image of my MagicMirror screen and explain what I mean.
As you can see the clock text top left of the image covers the image and when the image has a light background you can not see/read the text easily. So I would like to make the background of the text white with say 50% opacity and the text black. I have also added below the last CSS.Custom file but still not showing white background.
CSS Custom file
/* Custom CSS Sample * * Change color and fonts here. * * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;' */ /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */ /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */ } .module.clock ( background-color:rgba(255,255,255,0.5); border-radius:8px; padding:8px; ) )
Cheers,
John -
-
@synint tge stuff before the open brace {
is called the selector clauseit selects the elements the stuff inside the braces will be applied to
.module.clock
on the elements with BOTH classes ( no space between them)… AND ONLY THOSE elements
but (it, only one) doesn’t have text or a background
Mine says
for the elements within class .clock and below change its background.
and secondly within .clock change the text color in .time
-
Hi Sam,
Thank you and based on your comments the clock is now working correctly.
I have 3 other modules I am trying to apply the same styling and using the CSS Customer file as detailed below I am getting the following visual appearance.
clock - Working
calendar - White box appears but text is also white
MMM-OpenmapWeather - No change to appearance
newsfeed - No change to appearance/* Custom CSS Sample * * Change color and fonts here. * * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;' */ /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */ /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */ .clock { background-color:white; border-radius:8px; padding:8px; } .clock .time, .date{ color: black; } .calendar { background-color:white; border-radius:8px; padding:8px; } .calendar .calendar-check{ color: black; .MMM-OpenmapWeather { background-color:white; border-radius:8px; padding:8px; } .MMM-OpenmapWeather { color: black; } .newsfeed { background-color:white; border-radius:8px; padding:8px; } .newsfeed { color: black; }
Kind regards,
John