MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

Trying to change size of currentweather module driving me nuts...

  • I have my currentweather module set to only show the weather icon and the degrees. I’m trying to make it smaller.

    So, this should work right? In custom.css:

    .currentweather {
       font-size: 20px;

    No, it doesn’t.

    Saw someone adding tableClass to config.js. How about now!?:

                            module: "currentweather",
                            position: "top_center",
                                    config: {
                                            location: "my-location",
                                            appid: "my-api-key",
                                            tableClass: "small",
                                            onlyTemp: true,


    Ok, let’s try copying currentweather.css into my custom.css and changing it from there?:

    .currentweather .weathericon,
    .currentweather .fa-home {
      font-size: 75%; /*I TRIED CHANGING THIS!!!*/
      line-height: 65px;
      display: inline-block;
      -ms-transform: translate(0, -3px); /* IE 9 */
      -webkit-transform: translate(0, -3px); /* Safari */
      transform: translate(0, -3px);
    .currentweather .humidityIcon {
      padding-right: 4px;
    .currentweather .humidity-padding {
      padding-bottom: 6px;

    Sorry bro, doesn’t work.

    Anyone with an answer to this? Thank you so much in advance…

  • Project Sponsor


    .currentweather .small {
       font-size: 10px;
    .currentweather .medium {
       font-size: 15px;
    .currentweather .large {
       font-size: 20px;

  • @magicmarc the code does

    		var large = document.createElement("div");
    		large.className = "large light";
                    return wrapper. 

    so you want to override the class “large” in your custom.css

    .currentweather .large {

    one thing you can do, by yourself, is look at the generated html

    open the developers window, either on the pi (ctrl-shift-i) or some other system accessing the pi (if address:“” and ipWhiteList: [] in config.js) , also -ctrl-shift-i in chrome)

    then selelect the elements tab, and find the div in the body that corresponds to to the module position, then drill in to find the module id, and its content, and look at the classes assigned for the elements…

  • Right… Thank u guys very much. This clarifies so many things!

Log in to reply