@Mykle1 said in CSS - Naming header to change?:
@Damian
So, why don’t you tell others how you found your answer? It may help them in a similar situation. :-)
Was in a rush so just posted the answer for others…
Ok, I was directed to open Terminal, into $ MagicMirrror, and run my mirror with
npm start dev
Which will open up the Console window on the right of MM main screen.
Then click the element tab at the top of the dev console window.
On the left you will see the regions of your mirror.
You have to click through them to find the module you are interested in, then click through that to find the header element.
There you will find the class of the header. Take that to your custom.css file and apply. It’s case sensitive to the name of the module.
This is what I did… as I have never been there before as never had cause to, so wanted to see it anyway.
But, the real way I found the answer to my mistake, was seeing an example given by @Mykle1 of what I may find, and how to then format the .HEADER.CLASS.NAME into my CSS…
.MMM-WWI .HEADER.CLASS.NAME {
color: green; /* Header color. */
text-align: right; /* Algin header text. left, center, right */
}
As soon as I saw .MMM-WWI I realised straight away that I was trying to copy the other examples of ,sonos that works by changing the other sonos module parts - Zone - Album art - Track name, and I should have used .MMM-Sonos for the header…
My mistakes were obvious when I see them now… Not using a Dot at the start of MMM… then using .sonos and ,Sonos, when it should have been -Sonos… using .header when no Dot was rrequired.
I now intend finding a list of MM CSS commands, and looking at them, and playing about with them so things like that (That I do not normaly play around with at all) will be understood more, and will prompt me more to playing around more in that part - customising.