Change Currentweather colors

[Phate]

@Anachor

Can you please post how you even changed the colour of the calendar…

Much appreciated for people like myself who need a little more help…

I’m starting to see a few UI tweaks scattered about… Would be nice to get them all in one thread

[MichMich]

You can modify the styling of your mirror using css/custom.css.

[Phate]

@MichMich

thank you… even the basic info helps… I see little snippets about that are specific.

They really help amateurs like me… Cant beat copy paste and a little finagling lol

Awesome job tho for any help

[Anachor]

Hello Phate!

i change the colors with some help from a other post. Here is the quote :-)

@KirAsh4 said in Change default interface colors:

By the way, that colorful screen capture was simply demonstrating that if you want to edit the default modules, you can, and you can then color them any way you want. In this case, I opened calendar.js and in the 'getStyles' section, I added another file:

        // Define required scripts.
        getStyles: function() {
                return ["calendar.css", "font-awesome.css", "mystyles.css"];
        },

In this instance, 'mystyles.css' is my custom one, which I then created and added my own colors to the various elements:

#module_1_clock .time, #module_1_clock .date {
        color: #99F;
}

#module_1_clock .dimmed {
        color: #449;
}

#module_2_calendar header {
        color: #F00;
        border-bottom: 2px solid #600;
}

#module_2_calendar .title {
        color: #F99;
}

#module_2_calendar .time {
        color: #FBB;
}

#module_2_calendar .symbol {
        color: #FF0;
}

Use this and you can change the colors of the calender with some use of HTML color codes. What i’am now need is some example of the code for each symbol of the currentweather module…try a few times but nothing real works. :-/

[smithdsl]

Hey @Anachor ,

This is what I found. Let start by saying I’m a new to css and java, But I seem to be learning something from this ( or just lucky). I found that the order a module loads needs to be listed in the custom.css file. This is have my default layout looks:

alert module 0
clock module 1
calendar module 2
compliments module 3
currentweather module 4
weatherforecast module 5
newsfeed module 6

So to change the sunrise and sunset icon colors I add the “module_4_currentweather” before the css tag .wi-sunrise:

#module_4_currentweather .wi-sunrise {
        color: #ff0;
}
#module_4_currentweather .wi-sunset {
        color: #eb0;
}

Same thing for rain and showers tags:

#module_4_currentweather .wi-night-showers {
        color: #07f;
}
#module_4_currentweather .wi-degrees {
        color: #415;
}

#module_4_currentweather  .wi-rain {
        color: #00f;

I’m attaching my custom file so you can take a look.
0_1470076546710_custom.css

It does not change all icons yet, some tags I have not found the right name for. But I hope it helps.

---

Note from admin: Please use Markdown on code snippets for easier reading!

[daveyg_71]

@smithdsl How did you find which modules are loaded in which order?

[strawberry 3.141]

@daveyg_71 it’s the order they’re listed in the config.js file

[djdwayneanthony]

@Anachor Hi i’m following your instructions, in what folder do you save your new “mystyles.css” in order for this to work?