Custom.css is not working

[cookblook]

Hello,

I am trying to change the width of the columns but with no success. I added the values to the custom.css but for some reason, it doesn’t work. When I go and change the CSS settings directly in the modules CSS file it works. Does anyone have an idea of what this can cause?

[sdetweil]

@cookblook I don’t know the answer, but if you use the developers window (ctrl-shift-i), and select the elements tab, you can navigate thru the dom. and on any selected element you will see the style classes used, top to bottom.

I was just working on this for a style not being applied… darned computers are VERY picky about the spelling!

I just looked thru the MM code , and custom.css is loaded in the js/loader.js file

                        } else {
                                // All modules loaded. Load custom.css
                                // This is done after all the modules so we can
                                // overwrite all the defined styles.

                                loadFile(config.customCss, function() {
                                        // custom.css loaded. Start all modules.
                                        startModules();
                                });

[buzzkc]

It looks like the custom.css is the last css loaded in the header, so it should override any others. What specific changes have you added to the custom.css?

[lavolp3]

@sdetweil Sam do you know if there is some tutorial available on what you just explained.
Because I find it very precious as well and I would guess not nearly everyone knows about this possibility in the developer’s tab.

If there’s nothing, I’m inclined to write a piece on that.

[lavolp3]

@lavolp3 @sdetweil
Sorry, I could have just looked for it myself. Found it super fast.
https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works

[cookblook]

I tried this one when I put it in the custom.css nothing happens. if I change it in the module CSS file it works.

.MMM-DarkSkyForecast .module-content {
  width: 600px;
}