A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
Read the statement by Michael Teeuw here.
How can elements in the default weather module be moved
-
I am trying t get things lined up but I don’t know enough to get this looking good and would really appreciate some help. In the default Weather module I have made some changes to hide the wind info and move the Feels Like temp into the same area as the icon and temperature. I changed the icons to a set of svg images in a custom css. In the custom css I added the following to change the size of the weather icon size:
.weather .weathericon { width: 2.75em !important; height: 2.75em !important;}
Currently I have:
And would like to get to:
Following is my current.njk
{% macro humidity() %} {% if current.humidity %} <span class="humidity"><span>{{ current.humidity | decimalSymbol }}</span><sup> <i class="wi wi-humidity humidity-icon"></i></sup></span> {% endif %} {% endmacro %} {% if current %} {% if not config.onlyTemp %} <div class="normal medium"> {# Start of config setting I added #} {% if config.showWindInfo %} <span class="wi wi-strong-wind dimmed"></span> <span> {{ current.windSpeed | unit("wind") | round }} {% if config.showWindDirection %} <sup> {% if config.showWindDirectionAsArrow %} <i class="fas fa-long-arrow-alt-down" style="transform:rotate({{ current.windFromDirection }}deg)"></i> {% else %} {{ current.cardinalWindDirection() | translate }} {% endif %} </sup> {% endif %} </span> {% endif %} {# End of config setting I added #} {% if config.showHumidity === "wind" %} {{ humidity() }} {% endif %} {% if config.showSun %} <span class="wi dimmed wi-{{ current.nextSunAction() }}"></span> <span> {% if current.nextSunAction() === "sunset" %} {{ current.sunset | formatTime }} {% else %} {{ current.sunrise | formatTime }} {% endif %} </span> {% endif %} {% if config.showUVIndex %} <td class="align-right bright uv-index"> <div class="wi dimmed wi-hot"></div> {{ current.uv_index }} </td> {% endif %} </div> {% endif %} <div class="large"> {% if config.showIndoorTemperature and indoor.temperature or config.showIndoorHumidity and indoor.humidity %} <span class="medium fas fa-home"></span> <span style="display: inline-block"> {% if config.showIndoorTemperature and indoor.temperature %} <sup class="small" style="position: relative; display: block; text-align: left;"> <span> {{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }} </span> </sup> {% endif %} {% if config.showIndoorHumidity and indoor.humidity %} <sub class="small" style="position: relative; display: block; text-align: left;"> <span> {{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }} </span> </sub> {% endif %} </span> {% endif %} <span class="light wi weathericon wi-{{ current.weatherType }}"></span> <span class="light bright">{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}</span> {# Start of changes I made #} {% if (config.showFeelsLike) and not config.onlyTemp %} <span class="normal medium feelslike"> <span class="dimmed"> {{ "FEELS" | translate({DEGREE: current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }) }} </span> </span> {% endif %} {# End of changes I made #} {% if config.showHumidity === "temp" %} <span class="medium bright">{{ humidity() }}</span> {% endif %} </div> {# {% if (config.showFeelsLike or config.showPrecipitationAmount or config.showPrecipitationProbability) and not config.onlyTemp %} #} {% if (config.showPrecipitationAmount or config.showPrecipitationProbability) and not config.onlyTemp %} <div class="normal medium feelslike"> {% if config.showFeelsLike %} <span class="dimmed"> {% if config.showHumidity === "feelslike" %} {{ humidity() }} {% endif %} {#{{ "FEELS" | translate({DEGREE: current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }) }}#} </span> <br /> {% endif %} {% if config.showPrecipitationAmount and current.precipitationAmount %} <span class="dimmed"> <span class="precipitationLeadText">{{ "PRECIP_AMOUNT" | translate }}</span> {{ current.precipitationAmount | unit("precip", current.precipitationUnits) }} </span> <br /> {% endif %} {% if config.showPrecipitationProbability and current.precipitationProbability %} <span class="dimmed"> <span class="precipitationLeadText">{{ "PRECIP_POP" | translate }}</span> {{ current.precipitationProbability }}% </span> {% endif %} </div> {% endif %} {% if config.showHumidity === "below" %} <span class="medium dimmed">{{ humidity() }}</span> {% endif %} {% else %} <div class="dimmed light small">{{ "LOADING" | translate }}</div> {% endif %} <!-- Uncomment the line below to see the contents of the `current` object. --> <!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{current | dump}}</div> -->
Thank you for taking a look at this.
-
@DDE12 can you use the developer window to get the generated html? With the class assignments
See the second link in my signature below