MMM-OpenweatherForecast

bradley1982

Hi There,

cid:E53BB8FF-8900-4EAE-A499-D822B8A55106

per the attached picture would anyone be able to advise how i make the font on the weather app slightly bigger and brighter to that i can be read as it is a bit small and dull?

thanks again in advance

sdetweil

@bradley1982 which soure

in the module folder do

git remote -v

typically font color and size are adjusted thru css

bradley1982

@sdetweil thanks

what does the git remote -v do?

tried to change the colours however it was still dim from a brightness perspective

sdetweil

@bradley1982 git remote shows the url from where the module was cloned

sdetweil

@bradley1982 css is very specific

stuff before the {
is called the selector clause
it ‘selects’ the elements that will be affected by the settings after the {

there is no ‘simple’ answer

you can use the developers window elements tab to discover and test css styles to determine what should go in custom css

see the second link in my signature below for a quick overview of how to use the elements tab

knowing the module source location would allow me to look at its css settings to see if there was something more direct

bradley1982

@sdetweil great ok thanks for coming back so quickly

bradley1982

@sdetweil

bradley@raspberrypi:~/MagicMirror/modules/MMM-OpenWeatherForecast $ git remote -v
origin https://github.com/Tom-Hirschberger/MMM-OpenWeatherForecast (fetch)
origin https://github.com/Tom-Hirschberger/MMM-OpenWeatherForecast (push)

does this help

sdetweil

@bradley1982 from the module readme

Styling

This module is set to be 320px wide by default. If you wish to override it, you can add the following to your custom.css file:

.MMM-OpenWeatherForecast .module-content {
  width: 500px; /* adjust this as desired */
}
Most important elements of this module have one or more class names applied. Examine the MMM-OpenWeatherForecast.css, mmm-openweather-forecast.njk, or inspect elements directly with your browser of choice to determine what class you would like to override (Pro tip: If you start MagicMirror with npm start dev you'll get Chrome dev tools that will allow you to directly inspect any HTML element in the module).