Change default interface colors

Reply to Change default interface colors on Tue, 10 May 2016 08:06:48 GMT

MichMich — Tue, 10 May 2016 08:06:48 GMT

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.

Reply to Change default interface colors on Tue, 18 Aug 2020 20:59:05 GMT

sdetweil — Tue, 18 Aug 2020 20:59:05 GMT

@dyard please, just edit the css/custom.css, don’t change the module code unless u are fixing a bug or adding function (and then don’t tell anyone about it, release a new updated module)

https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1597692865011

Reply to Change default interface colors on Tue, 18 Aug 2020 20:54:41 GMT

dyard — Tue, 18 Aug 2020 20:54:41 GMT

@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

Reply to Change default interface colors on Tue, 10 May 2016 11:11:51 GMT

00conman — Tue, 10 May 2016 11:11:51 GMT

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

Reply to Change default interface colors on Tue, 10 May 2016 08:06:48 GMT

MichMich — Tue, 10 May 2016 08:06:48 GMT

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.

Reply to Change default interface colors on Tue, 10 May 2016 01:44:36 GMT

KirAsh4 — Tue, 10 May 2016 01:44:36 GMT

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.

Reply to Change default interface colors on Tue, 10 May 2016 01:33:58 GMT

KirAsh4 — Tue, 10 May 2016 01:33:58 GMT

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.

Reply to Change default interface colors on Tue, 10 May 2016 01:32:40 GMT

KirAsh4 — Tue, 10 May 2016 01:32:40 GMT

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

Reply to Change default interface colors on Tue, 10 May 2016 01:20:51 GMT

KirAsh4 — Tue, 10 May 2016 01:20:51 GMT

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.

Reply to Change default interface colors on Tue, 10 May 2016 01:19:58 GMT

00conman — Tue, 10 May 2016 01:19:58 GMT

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

Reply to Change default interface colors on Tue, 10 May 2016 01:19:37 GMT

KirAsh4 — Tue, 10 May 2016 01:19:37 GMT

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

Reply to Change default interface colors on Tue, 10 May 2016 01:17:58 GMT

00conman — Tue, 10 May 2016 01:17:58 GMT

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

Reply to Change default interface colors on Tue, 10 May 2016 01:16:37 GMT

KirAsh4 — Tue, 10 May 2016 01:16:37 GMT

For custom modules that you create, you can use the getStyles method to assign a custom CSS file so you can override the colors to whatever you want. For the current, default modules, I think those are hard coded styles. I suppose you can always edit those files should you really want to.

Reply to Change default interface colors on Tue, 10 May 2016 00:27:19 GMT

00conman — Tue, 10 May 2016 00:27:19 GMT

I’m asking in reference to the color of the text.

Reply to Change default interface colors on Mon, 09 May 2016 17:11:17 GMT

KirAsh4 — Mon, 09 May 2016 17:11:17 GMT

Assuming you’re simply talking about the elements on the display, one possible way is to use a custom CSS file, where you over ride the colors of the various elements.

Reply to Change default interface colors on Tue, 10 May 2016 04:47:22 GMT

paviro — Tue, 10 May 2016 04:47:22 GMT

@00conman what exactly do you mean? Do you want to for example change a text color?

Another note: Please use a title for new topics that consists of more than just one word so people know what it is about! I chanced it for you this time :)