calendar

videogame95

Re: CSS 101 - Getting started with CSS and understanding how CSS works

I have no under standing how to change my calendar ,
what do put at beginning of the custom css to select Calendar to make board black or gray around it,

I have read you help but not were to start
sorry ,any help please

JohnGalt

You can try the following in your custom.css file. The first 3 lines are comments, explaining what is happening. Next the background is applied to the clock module. Finally it is applied to the calendar module, with a different transparency - it produces a dark grey background.

// background-color: rgba(red, green, blue, alpha)
// red, green, blue: 0 - 255
// alpha: 0 -1 (0=transparent, 1=opaque)
.module.clock {
  background-color:rgba(0,0,0,0.4);
  border-radius:8px;
  padding:8px;
}
.module.calendar {
  background-color:rgba(0,0,0,0.6);
  border-radius:8px;
  padding:8px;
}

sdetweil

@JohnGalt dont need .module

sdetweil

@videogame95 sorry, I missed your question

https://docs.magicmirror.builders/modules/customcss.html#target-a-specific-module

.modulename .... { 
.....
}

like

.clock { 
...
}

applies to the stuff in the clock module output

the .modulename … before the { is called the css selector clause… it ‘selects’ the elements the data inside the {} will apply to

I use this to remind me of the things that can go there …
https://www.w3schools.com/cssref/css_selectors.php

here is a clause in my MMM-Config module form to hide a useless element I have no control over

.possibly-hidden-tab div:nth-child(2)  > div > div >div >ul >li:only-child >a[rel*="Item 1"] {
  display: none;
}

the selector clause ALWAYS selects ALL elements in the document that match the selector… SO .modulename prefix means u only mess up your stuff!

JohnGalt

@sdetweil - Thanks! I will clean up my code some, when I get a chance. I appreciate the input.

JohnGalt

@sdetweil – BTW, it this also true for all modules? That is, also for non-default modules? [Somehow I had internalized that even if default modules could be addressed this way, others required something like the following]:

.module.MMM-WeatherAlerts header {text-align: left;
}
.module.MMM-WeatherAlerts {  background-color:rgba(255,255,255,0.2); 
}

sdetweil

@JohnGalt its the same for all modules…

.clock
.calendar
.MMM-Config
whatever

when MM puts the content in a section it adds a class (.modulename) to that block of content

JohnGalt

@sdetweil - Great, good to know.

sdetweil

@JohnGalt here is a copy out of some of the content for a weather module

<div class="container" style="display: block;">
     <div id="module_5_weather" class="module weather weather">
         <header class="module-header" style="display: none;"></header>
           <div class="module-content">
               // module content would go here
              <div class="dimmed light small"> Cargando … </div>
          </div>
    </div>
</div>

on this line

<div id="module_5_weather" class="module weather weather">

you have the modulename as a class
and the id “module_5_weather”
as the selectable elements to target the content inside
module_5 is the count of modules top down starting at 0
good if u had multiple instances of a module and wanted to target different ones for different styles

JohnGalt

@sdetweil - Thanks Sam. This will help when I work on cleaning up my display overall, as i do have multiple instances of both calendar and weather running!