Trying to create a white background with black text to the clock module title block.

synint

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;
)
)

sdetweil

@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 .module

also don’t edit the root settings, for color… affects everything…

just do it in the .clock override

color:  black

sdetweil

@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;
}

synint

@sdetweil

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;
}

sdetweil

@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…

sdetweil

@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)

synint

@sdetweil

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

sdetweil

@synint yes try mine instead

Also add, after .time

, .date

sdetweil

@synint tge stuff before the open brace {
is called the selector clause

it 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

synint

@sdetweil

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