Dashticz - modify OWM icon in the big weather section

[dekoene]

Hi all,

I'm struggeling with my custom.css to make the icon in the OWM weather section bigger. From a distance I couldn't read the degrees so I made them bigger but I can't find the correct reference to the Icon in order to make it bigger as well.

Does anyone know how to do this? I see often dashboards where this icon is really small. So I suppose some more people would benefit from it.

The section in my dashboard:

OWM Weather big.JPG (50.87 KiB) Viewed 2324 times

The section in my Custom.css:
.col-xs-12
??????? {
font-size: 55px;
font-weight: 30;}
.big .weatherdegrees {
font-size: 55px;
font-weight: 10;}
.big .weatherloc {
display: inline-block;
margin-top: -4px;
font-size: 35px;
font-weight: normal;
margin-right: 4px;
text-align:left;}

Thanks!

[HansieNL]

Can you try:
.weather ::before {
font-size: 36px !important;
}

[dekoene]

Like this?

.col-xs-12
.weather ::before {
font-size: 36px !important;}
.big .weatherdegrees {
font-size: 55px;
font-weight: 10;}
.big .weatherloc {
display: inline-block;
margin-top: -4px;
font-size: 35px;
font-weight: normal;
margin-right: 4px;
text-align:left;}

That doesnt seem to do the trick...

Another sugestion?
Where is the icon defined? Maybe I can change it in the original json or css file?

[Lokonli]

Hi all,

I'm struggeling with my custom.css to make the icon in the OWM weather section bigger. From a distance I couldn't read the degrees so I made them bigger but I can't find the correct reference to the Icon in order to make it bigger as well.

Does anyone know how to do this? I see often dashboards where this icon is really small. So I suppose some more people would benefit from it.

The section in my dashboard:
OWM Weather big.JPG

The section in my Custom.css:
.col-xs-12
??????? {
font-size: 55px;
font-weight: 30;}
.big .weatherdegrees {
font-size: 55px;
font-weight: 10;}
.big .weatherloc {
display: inline-block;
margin-top: -4px;
font-size: 35px;
font-weight: normal;
margin-right: 4px;
text-align:left;}

Thanks!

There are 4 parts:
* The block
* The skycon icon
* The temperature
* The city

You can style the size as follows:

Code: Select all

.block_currentweather_big_owm {
  height: 200px !important;
 }

 .block_currentweather_big_owm .skycon {
  max-width: 200px;
  width: 200px;
}

 .block_currentweather_big_owm .title {
  font-size: 50pt;
  margin-left: 100px;
 }

 .block_currentweather_big_owm .weatherloc {
  font-size: 50pt;
 }

[dekoene]

Great - that worked!

Thanks!

[madpatrick]

Hi,

Is it possible to create a seprate block name with currentweather_big_owm to make 2 different setting.
I want to put the temperature and icon on the stanby screen with a different color and font then on the normal screen in custom.css

Something like this

Code: Select all

blocks[Own_weather]		= { 'currentweather_big_owm'}

[Chris12]

There are 4 parts:
* The block
* The skycon icon
* The temperature
* The city

You can style the size as follows:

Code: Select all

.block_currentweather_big_owm {
  height: 200px !important;
 }

 .block_currentweather_big_owm .skycon {
  max-width: 200px;
  width: 200px;
}

 .block_currentweather_big_owm .title {
  font-size: 50pt;
  margin-left: 100px;
 }

 .block_currentweather_big_owm .weatherloc {
  font-size: 50pt;
 }

How can you align the icon and the text? in my dashboard those are slightly shifted.
The icon is always at the bottom, and the text is centered.

[Lokonli]

Please add a screen shot, and indicate what you would like to have changed.

[Lokonli]

Hi,

Is it possible to create a seprate block name with currentweather_big_owm to make 2 different setting.
I want to put the temperature and icon on the stanby screen with a different color and font then on the normal screen in custom.css

Something like this

Code: Select all

blocks[Own_weather]		= { 'currentweather_big_owm'}

If you put .standby in front of the class definition in custom.css then only the block on the standby screen will be changed.
So like:

Code: Select all

.standby .block_currentweather_big_owm

[Chris12]

Please add a screen shot, and indicate what you would like to have changed.

Hi Lokonli thank you for looking into this small issue.
As you can see in the screenshot below, the cloud-icon is not inline with the text showing the temperature and city.



in my custom.css I got these parts of weather related css:

Spoiler: show

Code: Select all

[data-id="currentweather_big"].big .weatherloc,
[data-id="currentweather_big"].big .weatherdegrees {
  font-size: 15px;  /*default font you see is 24px, decrease that number at will if you want a smaller font or increase otherwise*/
  icon-size: 20px !important
}

.block_currentweather_big_owm {
  height: 80px !important;
 }
 .block_currentweather_big_owm .skycon {
  max-width: 85px;
  width: 85px;
  text-align: left;
}
 .block_currentweather_big_owm .title {
  font-size: 70pt;
  margin-left: 50px;
 }
 .block_currentweather_big_owm .weatherloc {
  font-size: 150pt;
 }

[Chris12]

One other thing I'm also struggeling with regarding the weather icons.

On my standby-screen I want the days of the week with a bigger font, and also when possible the weather icons itself a little bigger (or bold)
Also the space between the weather forcast and the clock I cannot determine why that's so large.



my standby screen config:

Spoiler: show

Code: Select all

//Standby screen configuration
var columns_standby = {}
	columns_standby[1] = {}
	columns_standby[1]['blocks'] = ['weather_owm', 'basicclock',];
	columns_standby[1]['width'] = 12;
	columns_standby[1]['standby_after'] = 3;
	
blocks['basicclock'] = {
    width: 12,
	scale: 0.3,

[madpatrick]

For it is the centering of the weather icon.
The text can be centered, but the icon is not moving

[madpatrick]

Please add a screen shot, and indicate what you would like to have changed.

Hi Lokonli thank you for looking into this small issue.
As you can see in the screenshot below, the cloud-icon is not inline with the text showing the temperature and city.



in my custom.css I got these parts of weather related css:

Spoiler: show

Code: Select all

[data-id="currentweather_big"].big .weatherloc,
[data-id="currentweather_big"].big .weatherdegrees {
  font-size: 15px;  /*default font you see is 24px, decrease that number at will if you want a smaller font or increase otherwise*/
  icon-size: 20px !important
}

.block_currentweather_big_owm {
  height: 80px !important;
 }
 .block_currentweather_big_owm .skycon {
  max-width: 85px;
  width: 85px;
  text-align: left;
}
 .block_currentweather_big_owm .title {
  font-size: 70pt;
  margin-left: 50px;
 }
 .block_currentweather_big_owm .weatherloc {
  font-size: 150pt;
 }

Chris,

You can add this to your custom.css (copy of mu setting)

Code: Select all

/* ---------------OWM Weather ---------------  */ 
.block_currentweather_big_owm 			{height: 80px !important;}
.block_currentweather_big_owm .skycon 		{width: 80px;margin-top: -5px;margin-left: -20px;display: inline-block !important;text-align:center !important;}
.block_currentweather_big_owm .title 		{color:#f4ffcc !important;}
.block_currentweather_big_owm .weatherdegrees 	{color:#f4ffcc !important;margin-left: 10px;font-size: 30px !important;}
.block_currentweather_big_owm .weatherloc 	{color:#f4ffcc !important;margin-left: 10px;font-size: 24px !important;}

Play around with margin or padding options

[Chris12]

You can add this to your custom.css (copy of mu setting)

Code: Select all

/* ---------------OWM Weather ---------------  */ 
.block_currentweather_big_owm 			{height: 80px !important;}
.block_currentweather_big_owm .skycon 		{width: 80px;margin-top: -5px;margin-left: -20px;display: inline-block !important;text-align:center !important;}
.block_currentweather_big_owm .title 		{color:#f4ffcc !important;}
.block_currentweather_big_owm .weatherdegrees 	{color:#f4ffcc !important;margin-left: 10px;font-size: 30px !important;}
.block_currentweather_big_owm .weatherloc 	{color:#f4ffcc !important;margin-left: 10px;font-size: 24px !important;}

Play around with margin or padding options

Thanks this one is solved! Any ideas about the standby screen, how to change the weather icon/text there of the 'weather_owm'?

[madpatrick]

I think you need to replace .blocks into .standby

[Chris12]

Now using the following which is fine for me:

Code: Select all

 /* Standby screen items */
 .screenstandby {
    background-color: black !important
}
.standby .basicclock {
	display: flex !important;
	font-size: 20px;
	justify-content: center !important;
	align-items: center !important; 
	background-color: rgb(0,0,0) !important;
	height: 400px !important; }

.standby .block_weather_owm  .skycon 					{width: 150% !important;}
.standby .block_weather_owm  .weatherfull > div div.day			{font-size: 60px !important;font-weight: bold !important;}
.standby .block_weather_owm  .weatherfull > div div.day.owmdescription	{font-size: 40px !important;}
.standby .block_weather_owm  .weatherfull > div div			{font-size: 40px !important;}
.standby .block_weather_owm  .weatherfull > div div.temp		{font-size: 60px !important;}
.standby .block_weather_owm  .weatherfull > div div.temp .nightT	{font-size: 40px !important;}

@Lokonli, a minor thing noticed, is that the days of the week do not start with a capital char. Like Saturday instead of saturday
And the basic clock is showing the day in english, and not in native language ie. dutch. Or does this follow the system/browser defined language?

[Lokonli]

basicclock follows the language setting:

Code: Select all

config['language'] = 'nl_NL'

[Chris12]

basicclock follows the language setting:

Code: Select all

config['language'] = 'nl_NL'

Thanks! overlooked that setting.
@Lokonli, the days of the week do not start with a capital char. Like Saturday instead of saturday. You recognize this as a bug/enhancement?

[Lokonli]

basicclock follows the language setting:

Code: Select all

config['language'] = 'nl_NL'

Thanks! overlooked that setting.
@Lokonli, the days of the week do not start with a capital char. Like Saturday instead of saturday. You recognize this as a bug/enhancement?

basicclock and miniclock follow the standard language rules.

Thursday is with a first capital
donderdag is lower char only.

The garbage and calendar blocks follow the setting from config['calendarlanguage']

Do you somewhere see thursday instead of Thursday? Then I would consider that as a bug.

donderdag is correct. I would consider Donderdag as a bug

[madpatrick]

Lokonli,

Is it possible to make the color of the icon adjustable ?

Is see in /js/weather_own.js that is a fixed color

Code: Select all

var skycon = '<script>';
  skycon += 'var skycons = new Skycons({"color": "white"});';