Question about 'Feels Like' temperature text size

[tomtroublemaker]

Hello Tom,

I would like to know if there is a way to control the text size of the 'Feels Like' temperature separately from the current temperature, possibly on a separate line.

Using your suggestion I the README.md file about using the 'npm start dev' command to check the CSS info, I tried using two instances of your OpenWeatherForecast module where the first instance only displays the current temperature, and the second instance displays the Feels Like temperature, along with the daily forecast below then using CSS to modify the text sizes separately. From what I can tell (and my CSS knowledge is not much), it seems that the two temperatures are not able to be controlled separately in the custom.css file. I have since gone back to using only one instance of your module since the experiment didn't work.

Do you have any suggestions for something I have missed?

Thank you,

Tom Hartley

[Tom-Hirschberger]

Hi,

I saw a similar question in the forum a couple of days ago.
The problem is that I implemented the option to display both temperatures as a quick fix.
At the moment they are concatenated to a combined string and you could only change all values at the same time.
I am at vacation at the moment and do have access to my mobile.
I will check if there is a way to implement it in a clean way without breaking backwards compatibility after the trip.

[tomtroublemaker]

Hello Tom, Thank you for looking into this. I hope you're enjoying your vacation. I wanted to send you this while I'm thinking about it, but not for you to reply to until you're back from vacation and settled in. I noticed something in the README.md file (I don't think this is a problem with the module). What I get when using the example configuration text does not match the images in the README.md file. Specifically, it seems that when I use position: "top_right" as shown in the example, this causes the header text ("Current Conditions") and the forecast header text ("Forecast") to be right-justified, but the example images show them left-justified. I discovered that if I set the module to position: "top_left", the text for those headers shifts to left-justified. Of course, the module shows up on the left side though too. In other words, the images are for position: "top_left" not "top_right". The other thing I noticed was that the color for this text in the example images is a light blue (#7CD5FF) instead of the gray that I get without using the custom.css file. If I use the custom.css file, I can add 'text-justify: left;' to get the text to shift to the other side (I think this is probably a hack), but I haven't figured out how to set the text color to light blue. On one machine if I add 'color: #7CD5FF;' for the next line under the text-justify command, It changes the color, but on another machine it doesn't, so I'm thinking this is probably a hack as well since I don't get consistent behavior. I'm not well versed in css. Would you mind sharing how you set that text to be light blue? Thanks, Tom

…

On Thu, May 14, 2026 at 4:04 AM Thomas Hirschberger < ***@***.***> wrote: *Tom-Hirschberger* left a comment (Tom-Hirschberger/MMM-OpenWeatherForecast#23) <#23 (comment)> Hi, I saw a similar question in the forum a couple of days ago. The problem is that I implemented the option to display both temperatures as a quick fix. At the moment they are concatenated to a combined string and you could only change all values at the same time. I am at vacation at the moment and do have access to my mobile. I will check if there is a way to implement it in a clean way without breaking backwards compatibility after the trip. — Reply to this email directly, view it on GitHub <#23 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BNFAXBV5YJZ4AAG6JOST3T342WR3HAVCNFSM6AAAAACY4ZSQKCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DINJQGEYTGOJQGE> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[Tom-Hirschberger]

Hi.

The change for the feels like temperature is more work but i could check the CSS things.
You are right...the module in the screenshots looks different than it looks like with the default settings.

As the module uses some default values of the MagicMirror main code i think they may have changed over time.

If you want to align and change the color of the text like in the screenshots you can use the following settings in your custom.css

/*.module.MMM-OpenWeatherForecast .module-content header {*/
.module.MMM-OpenWeatherForecast header {
    color: lightblue;
    border-bottom: 1px solid lightblue;
    text-align: left;
    width: 320px;
}

If you use the first selector only the inner header lines change but the main line stays with the default MagicMirror settings

[Tom-Hirschberger]

With the latest version of the module it is now possible to set different styles for the "normal" temperature and feels like.
This example shows the new classes:

.module.MMM-OpenWeatherForecast .current .temperature {
    color: red;
    font-size: 22px;
}

.module.MMM-OpenWeatherForecast .current .feelsLike {
    color: green;
    font-size: 16px;
}

.module.MMM-OpenWeatherForecast .forecast-item .temperature {
    color: yellow;
    font-size: 12px;
}

.module.MMM-OpenWeatherForecast .forecast-item .feelsLike {
    color: purple;
    font-size: 10px;
}

[tomtroublemaker]

Hi Tom,Thank you for the CSS info. I’ll be trying it either later today or tomorrow.Best regards,Tom Sent from my iPhoneOn Jun 12, 2026, at 03:56, Thomas Hirschberger ***@***.***> wrote:Tom-Hirschberger left a comment (Tom-Hirschberger/MMM-OpenWeatherForecast#23) With the latest version of the module it is now possible to set different styles for the "normal" temperature and feels like. This example shows the new classes: .module.MMM-OpenWeatherForecast .current .temperature { color: red; font-size: 22px; } .module.MMM-OpenWeatherForecast .current .feelsLike { color: green; font-size: 16px; } .module.MMM-OpenWeatherForecast .forecast-item .temperature { color: yellow; font-size: 12px; } .module.MMM-OpenWeatherForecast .forecast-item .feelsLike { color: purple; font-size: 10px; } —Reply to this email directly, view it on GitHub, or unsubscribe.Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today! You are receiving this because you authored the thread.Message ID: ***@***.***>

[tomtroublemaker]

Hello Tom, I wanted to get back to you about the Feels Like and header stuff I had asked you about. Everything is working nicely just as you said your improvements would do. For my situation, since I use Farenheit for the temperature, and we get summer temperatures that can be 100F and a little higher, with three digits and five characters for the Feels Like temperature you can see how things can get crowded on the top line of Current Conditions with the icon as well. Things were getting shoved to two lines before your update. We are forecast to get over 100F this weekend so I'll be able to see if using the smaller text size for the Feels Like will be enough, along with widening the overall layout a little bit. Thank you for your work. Best regards, Tom

…

On Fri, Jun 12, 2026 at 8:44 AM T Hartley ***@***.***> wrote: Hi Tom, Thank you for the CSS info. I’ll be trying it either later today or tomorrow. Best regards, Tom Sent from my iPhone On Jun 12, 2026, at 03:56, Thomas Hirschberger ***@***.***> wrote:  *Tom-Hirschberger* left a comment (Tom-Hirschberger/MMM-OpenWeatherForecast#23) <#23 (comment)> With the latest version of the module it is now possible to set different styles for the "normal" temperature and feels like. This example shows the new classes: .module.MMM-OpenWeatherForecast .current .temperature { color: red; font-size: 22px; } .module.MMM-OpenWeatherForecast .current .feelsLike { color: green; font-size: 16px; } .module.MMM-OpenWeatherForecast .forecast-item .temperature { color: yellow; font-size: 12px; } .module.MMM-OpenWeatherForecast .forecast-item .feelsLike { color: purple; font-size: 10px; } — Reply to this email directly, view it on GitHub <#23?email_source=notifications&email_token=BNFAXBSALISR5YEVJJQRDST47POU7A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTINRZGA2DSNJYHA3KM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KYZTPN52GK4S7MNWGSY3L#issuecomment-4690495886>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BNFAXBVKR27SYMR2WMIEHRT47POU7AVCNFSNUABFKJSXA33TNF2G64TZHM3TQOJVGIYDMNRZHNEXG43VMU5TINBTHE4DIMJVGA22C5QC> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/BNFAXBUR4N3PC7XZC7M5OVT47POU7A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTINRZGA2DSNJYHA3KM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KUZTPN52GK4S7NFXXG> and Android <https://github.com/notifications/mobile/android/BNFAXBWUVSQKNS4CSAHZIPT47POU7A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTINRZGA2DSNJYHA3KM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2K4ZTPN52GK4S7MFXGI4TPNFSA>. Download it today! You are receiving this because you authored the thread.Message ID: ***@***.***>