Domoticz

Posted: **Sunday 09 June 2019 10:32**

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 2329 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!

Posted: **Sunday 09 June 2019 14:31**

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

Posted: **Sunday 09 June 2019 22:48**

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?

Posted: **Monday 10 June 2019 22:07**

dekoene wrote: ↑Sunday 09 June 2019 10:32 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;
 }

Posted: **Tuesday 11 June 2019 21:25**

Great - that worked!

Thanks!

Posted: **Tuesday 22 December 2020 19:09**

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'}

Posted: **Tuesday 22 December 2020 19:45**

Lokonli wrote: ↑Monday 10 June 2019 22:07
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.

Posted: **Tuesday 22 December 2020 21:50**

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

Posted: **Tuesday 22 December 2020 22:56**

madpatrick wrote: ↑Tuesday 22 December 2020 19:09 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

Posted: **Wednesday 23 December 2020 8:21**

Lokonli wrote: ↑Tuesday 22 December 2020 21:50 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;
 }

Posted: **Wednesday 23 December 2020 8:36**

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,

Posted: **Wednesday 23 December 2020 9:20**

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

Posted: **Wednesday 23 December 2020 9:24**

Chris12 wrote: ↑Wednesday 23 December 2020 8:21
Lokonli wrote: ↑Tuesday 22 December 2020 21:50 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

Posted: **Wednesday 23 December 2020 14:02**

madpatrick wrote: ↑Wednesday 23 December 2020 9:24 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'?

Posted: **Wednesday 23 December 2020 14:53**

I think you need to replace .blocks into .standby

Posted: **Thursday 24 December 2020 14:04**

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?

Posted: **Thursday 24 December 2020 14:42**

basicclock follows the language setting:

Code: Select all

config['language'] = 'nl_NL'

Posted: **Thursday 24 December 2020 14:54**

Lokonli wrote: ↑Thursday 24 December 2020 14:42 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?

Posted: **Thursday 24 December 2020 15:21**

Chris12 wrote: ↑Thursday 24 December 2020 14:54
Lokonli wrote: ↑Thursday 24 December 2020 14:42 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

Posted: **Thursday 24 December 2020 15:53**

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"});';

Domoticz

Dashticz - modify OWM icon in the big weather section

Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section

Re: Dashticz - modify OWM icon in the big weather section