Change default interface colors

[00conman]

I’ll look into it. By the way what calendar are you using?

[KirAsh4]

A modified one that I haven’t checked into the base code yet. :)

[00conman]

Whatever it is it’s awesome. Good on you man.

[KirAsh4]

Once I figure out why git(hub) is pulling in all of the erroneous stuff and fix that, I’ll create a pull request so it gets merged.

[KirAsh4]

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;
}

[KirAsh4]

The same approach applies when you’re creating your own custom modules. Keep in mind that if you edit the default files, a future update can overwrite them and you lose your changes.

[KirAsh4]

Also note the warning as stated on the wiki page:
Note: If a file can not be loaded, the boot up of the mirror will stall.

Meaning, if you tell getStyles to look for a file called 'myStyles.css' but in reality it’s called 'mystyles.css' (case matters) or 'coolcolor.css', the mirror will stall and not load. So be careful.

[MichMich]

you can use the /css/custom.css to overwrite all styles. This file is embedded after all other css files, so you should be able to overwrite what you want. Is just a matter of creative CSS usage.

[00conman]

Okay thank you guys I’ll have to look into it.

[dyard]

@KirAsh4 Hi I am setting up my first magic mirror, is this old post still valid? This look is great, I tried to follow and add a custom mystyles.css and added to the same calendar module. But I didn’t see it make a change. Thanks for your help