4. Custom.css
MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

Custom.css

  • A

    I’m not getting something - and now am tired of banging my head against this:

    custom.css

    /* this is how you make EVERYTHING    .bright   red  - Makes sense and works 
 * .bright {
 *  color: #ff0000;
 * } */

/* this is how you make ONLY     calendar .bright    red  - again, makes sense and works
 * .module.calendar .bright {
 * color: #ff0000;
 * } */

/* but how do you make EVERYTHING in the    calendar module    red?  This does not work for me:  */
 .module.calendar {
 color: #ff0000;
 }

    I must be missing something…
    Thanks

    0
  • Moderator

    Because the various styles have an explicit color (white), you can’t simply set a color on the main class. However what you can do is set it on one of the elements, like 'TD':

    .calendar td {
  color: #ff0000;
}
    1
    A
     1 Reply
  • A

    @KirAsh4
    Was actually trying to set the FONT SIZE (didn’t realize that that has its own special problems). I like the idea of take a “dummy” element like TD & will see if that works. Thanks for the hint!

    0
  • Moderator

    It helps to look at the HTML generated when the mirror is running. You should be able to pull it up in your browser’s console facility. Then you can figure out which (repeating) element can be used.

    0
    A
     1 Reply
  • A

    @KirAsh4
    I am having trouble with that, since I run my pi headless & inspect the output from somewhere else (mirror is in workshop).
    I am having trouble interpreting the Chrome output. But I solved the problem the way I always do: brute hack. I like the idea of TD better, though.

    0
  • Moderator

    You don’t need a monitor on the pi to see the console. Any browser, anywhere, that can access the pi, can see the HTML output. In Chrome, hit 'F12' to open the console. At the top, make sure 'Elements' is selected. Now twiddle down the little arrows on the left, starting with the BODY tag. As you hover over the ones that just popped up, it highlights in the browser. 'region top bar' is where the calendar lives, twiddle that open. Hover over the 'region top left, center, right' and you can figure out where to go from there …

    0

  • Not to Hijack the thread, but is there a way to change the color on just specific calendars if I have more than one in the module?

    0 1 Reply

  • @bscarano It’s not officially supported, but every module instance get’s it’s own id. If you take a look at the generated html, you’s see something like: id="module_2_calendar". This means you can use the following css:

    #module_2_calendar td {
  color: #ff0000;
}

    But please note: since this isn’t an official feature, I can’t give any support on this, nor do I promise it will keep working in the future.

    0

  • Maybe what’s I’m asking isn’t possible.

    I have the calendar module that pulls from 2 different calendars (main and FB birthdays. Both display together. What I’d like to do is show one calendar in one color and the other in another one.

    Is this possible to do or am I asking too much?

    Brendon

    0

  • I have two calendars in one calendar module as well. I use different icons for both calendar.

    With this in mind, you could do some fancy css like:

    tr:has(.fa-icon1) td .bright{
   color: red;
}
tr:has(.fa-icon2) td .bright{
   color: green;
}

    I did not try it out, but It might work.

    0