@fillilutten said in MMM-OpenWeatherForecast - Replacement for MMM-DarkSkyForecast:
Any way to change the order of the different extraCurrentConditions?
This is technically possible with CSS, but it’s likely more trouble than it’s worth for me to explain it here, and error prone. A better and easier option for you would be to modify the mmm-openweather-forecast.njk
file to reorder these items as you like.
Starting on line 39 you’ll see the templates for the extra current conditions. The order in which they appear here is the order in which they appear in the module.
Here are the first several lines of that section:
{# -------------- Extra Current Conditions -------------- #}
{% if config.showExtraCurrentConditions %}
<div class="extra-current-conditions-wrapper small bright">
{# -- High / Low Temp -- #}
{% if config.extraCurrentConditions.highLowTemp %}
<span class="temperature-container">
<span class="high-temperature">{{ forecast.currently.tempRange.high }}</span>
<span class="temperature-separator dimmed">/</span>
<span class="low-temperature">{{ forecast.currently.tempRange.low }}</span>
</span>
{% endif %}
{# -- Sunrise -- #}
{% if config.extraCurrentConditions.sunrise %}
<span class="sunrise-container">
<img class="inline-icon sunrise-icon" src="{{ inlineIcons.sunrise }}" />
{{ forecast.currently.sunrise }}
</span>
{% endif %}
{# -- Sunset -- #}
{% if config.extraCurrentConditions.sunset %}
<span class="sunset-container">
<img class="inline-icon sunset-icon" src="{{ inlineIcons.sunset }}" />
{{ forecast.currently.sunset }}
</span>
{% endif %}
Say you wanted the Hi / Lo temps to display after sunrise / sunset, just move the whole block as follows:
{# -------------- Extra Current Conditions -------------- #}
{% if config.showExtraCurrentConditions %}
<div class="extra-current-conditions-wrapper small bright">
{# -- Sunrise -- #}
{% if config.extraCurrentConditions.sunrise %}
<span class="sunrise-container">
<img class="inline-icon sunrise-icon" src="{{ inlineIcons.sunrise }}" />
{{ forecast.currently.sunrise }}
</span>
{% endif %}
{# -- Sunset -- #}
{% if config.extraCurrentConditions.sunset %}
<span class="sunset-container">
<img class="inline-icon sunset-icon" src="{{ inlineIcons.sunset }}" />
{{ forecast.currently.sunset }}
</span>
{% endif %}
{# -- High / Low Temp -- #}
{% if config.extraCurrentConditions.highLowTemp %}
<span class="temperature-container">
<span class="high-temperature">{{ forecast.currently.tempRange.high }}</span>
<span class="temperature-separator dimmed">/</span>
<span class="low-temperature">{{ forecast.currently.tempRange.low }}</span>
</span>
{% endif %}
Keep in mind that doing this will make it a touch more difficult to update my module as I release updates. When you want to update, you’ll need to to the following:
- Make a backup of your modified
mmm-openweather-forecast.njk
file (copy it to another location, for example)
- Restore the original with
git checkout mmm-openweather-forecast.njk
- Update the code with
git pull
- Restore your modified version of
mmm-openweather-forecast.njk
from your backup