From 6a901a392c652c2d69f55bcae807009fd8079875 Mon Sep 17 00:00:00 2001 From: Jordan Welch Date: Sat, 2 May 2026 17:27:21 -0500 Subject: [PATCH 1/3] Add more custom CSS Details --- modules/customcss.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/modules/customcss.md b/modules/customcss.md index 0f92903e..73c85abf 100644 --- a/modules/customcss.md +++ b/modules/customcss.md @@ -1,7 +1,16 @@ # Custom CSS MagicMirror² comes with a default theme but it can be customized by placing a -custom css-file in `config/custom.css`. +custom CSS file at `config/custom.css`. You can start with +[`config/custom.css.sample`](https://github.com/MagicMirrorOrg/MagicMirror/blob/master/config/custom.css.sample) +as an example of how to override the default variables. + +```sh +cp config/custom.css.sample config/custom.css +``` + +The full main CSS file for MagicMirror² is located at +[`css/main.css`](https://github.com/MagicMirrorOrg/MagicMirror/blob/master/css/main.css). ### Example From 588519a9cfb2938be86af00508fcb094cddad3f9 Mon Sep 17 00:00:00 2001 From: Jordan Welch Date: Sun, 3 May 2026 11:36:29 -0500 Subject: [PATCH 2/3] Explain base CSS vs module CSS --- modules/customcss.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/modules/customcss.md b/modules/customcss.md index 73c85abf..a05c042f 100644 --- a/modules/customcss.md +++ b/modules/customcss.md @@ -9,9 +9,13 @@ as an example of how to override the default variables. cp config/custom.css.sample config/custom.css ``` -The full main CSS file for MagicMirror² is located at +The base CSS file for MagicMirror² is located at [`css/main.css`](https://github.com/MagicMirrorOrg/MagicMirror/blob/master/css/main.css). +Each module can then have their own CSS styles located in their respective +folders. For example the `weather` modules has its own CSS file located at +[`defaultmodules/weather/weather.css`](https://github.com/MagicMirrorOrg/MagicMirror/blob/master/defaultmodules/weather/weather.css) + ### Example One common request is to make the weather icons colorful, this can easily be From d913a8a624937d920d69faa4b3fa2290cdb57073 Mon Sep 17 00:00:00 2001 From: Jordan Welch Date: Sun, 3 May 2026 11:42:00 -0500 Subject: [PATCH 3/3] Explain CSS precedence --- modules/customcss.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/modules/customcss.md b/modules/customcss.md index a05c042f..d25a3e9e 100644 --- a/modules/customcss.md +++ b/modules/customcss.md @@ -16,6 +16,10 @@ Each module can then have their own CSS styles located in their respective folders. For example the `weather` modules has its own CSS file located at [`defaultmodules/weather/weather.css`](https://github.com/MagicMirrorOrg/MagicMirror/blob/master/defaultmodules/weather/weather.css) +The `custom.css` file is loaded after all the default CSS files, so any styles +you add there will override the default styles. You should not edit any of the +default files directly. + ### Example One common request is to make the weather icons colorful, this can easily be