quoteAuthorDiv.className = "small dimmed" not working

[dwburger]

First, thank you for creating this module for the Magic Mirror. I'm a beginner just learning how to manipulate CSS to change the appearance of MM2.5 modules. I've been trying to change the size and color of the quoteTextDiv.className = "normal" and the quoteAuthorDiv.className = "small dimmed" text displayed in the MM. I've been able to alter the size and color of "normal", but the "small dimmed" class does not work. Here are the lines from my custom.css file that I've been using for the "normal" class that works:

.module.MMM-quote-of-the-day .normal{ color: #f9f907; font-size: 18px; }

When I do something similar for the "small dimmed" class I don't get any changes in the size or color of the author text. For example, I've tried:

.module.MMM-quote-of-the-day .small dimmed { color: #c6c6ec; font-size: 12px; } .module.MMM-quote-of-the-day .small { font-size: 12px; }

.module.MMM-quote-of-the-day .dimmed { color: #c6c6ec; }

The only way I was able to get the changes I wanted was to change "small dimmed" to "small_dimmed" in the MMM-quote-of-the-day.js file (line#37).

Maybe you can point to my error in using the "small dimmed" class name??? Thanks!

[Sispheor]

I never tried to do something like this. Sorry I don't know how to help you. I recommand you to open a thread on the project forum. Good luck !

[dwburger]

OK.

[greybeard-code]

small dimmed isn't the class name. It's the name of two different classes.

.normal {
        color: white;
}
.dimmed {
        color: #E5E4E2;
}

.MMM-quote-of-the-day .normal {
        align: center;
        text-align: center;
        width: 400px;
        color: gold;
}
.MMM-quote-of-the-day .dimmed {
        align: center;
        text-align: center;
        color: GoldenRod;
}