Extreme basic question!

chris_d

I’ve written my own module to display a set of family tasks which rotate each week.
Once I’ve done some javascript to build a string of HTML, I display with.

        var element = document.createElement("div")
        element.className = "myContent
        element.innerHTML = output;
        return element

I just want to format this element with an existing magic mirror class so that the text doesn’t look massive and out of place, say “title” for example. But I can’t work out how to actually achieve that.

sdetweil

@chris_d in custom.css

 .module_name .classname {
   font-size:. ?????
}

.module_name is your module name
. classname is .myContent
fix the missing " in your posted text

note the dot in front. that means class
no dot means element name (div, table. li, …)
# means id

sdetweil

@chris_d

the string of things before the {

is called the selector clause.

this gives u the ability to ‘select’ the html elements you want to apply the styles to

I use this cheat sheet to view the different choices
https://www.w3schools.com/cssref/css_selectors.php

the selector can be very complex

here is one from my MMM-Config module

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