CSS - Naming header to change?

[Damian]

Hi, I have managed to change a few things in my Sonos module using CSS, but stuck at what name I should use for the Header in order to change it’s color, and increase the font a little.
Can anyone advise what I should be naming it? There is nothing in the module read me to suggest changing anything about the header through CSS, just being able to change the name in the config.js obviously.

I tried a few variations, but not sure if header still uses the same styling as the other parts that I managed to edit?

Thanks

{
	module: 'MMM-Sonos',
	header: "Playing on SONOS",
	position: "top_center", // This can be any of the regions, best results in center regions
	classes: "default everyone",
	config: {
		// See 'Configuration options' for more information.
	}
}

}
.sonos ul .type {
    font-size: 18px;
    padding: 0px 0px;
    line-height: 12px;
    width: 260px;
    color: red;
}
.sonos ul .room {
    font-size: 20px;
    padding: 0px 0px;
    line-height: 16px;
    width: 260px;
    color: blue;
}
.sonos ul .song {
    padding: 0px 0px;
    position: relative;
}
.sonos ul .art img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin: 0px 0px;
    border: 2px solid #FFF;
}
.sonos ul .name {
    width: 200px;
    font-size: 20px;
    padding: 0px 4px;
    line-height: 16px;
    color: yellow;
}
.sonos ul .header {
   color: blue;
}
.sonos ul .header {
   text-color-blue

[Damian]

.MMM-Sonos header {
Color: #ff00ff;

[Mykle1]

@Damian

So, why don’t you tell others how you found your answer? It may help them in a similar situation. :-)

[Damian]

@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.