calendar

[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!