Domoticz

Open source Home Automation System
https://forum.domoticz.com/

Dashticz - Custom CSS

https://forum.domoticz.com/viewtopic.php?t=19238

Page 4 of 5

Re: Dashticz - Custom CSS

Posted: Sunday 11 November 2018 21:25
by Minglarn
Minglarn wrote: ↑Saturday 10 November 2018 17:44 Hi..
Is it possible to have a thin border around the title block?

I want to have a thin border around the block with all my columns inside, like a group..

Skickat från min SM-N950F via Tapatalk
Did find the right div to add to custom.css

Code: Select all

/* Thin white border around blocks !! */
div.col-sm-4.col-xs-12 {
	border: 1px solid rgba(255,255,255,0.0);
}

Re: Dashticz - Custom CSS

Posted: Tuesday 13 November 2018 12:51
by askmurphy
A question:

You can use this:

blocks['blocktitle_ZONNEPANELEN'] = {}
blocks['blocktitle_ZONNEPANELEN']['type'] = 'blocktitle';
blocks['blocktitle_ZONNEPANELEN']['title'] = 'ZONNEPANELEN'
blocks['blocktitle_ZONNEPANELEN']['width'] = 12 ;

in stead of this:

blocks[214] = {}
blocks[214]['type'] = 'blocktitle';
blocks[214]['title'] = 'ZONNEPANELEN'
blocks[214]['width'] = 12 ;

Named indexes are more clear then numbers ;-)

BUT: but i it possible to change the css of such block, for example this is working when I use the number-index:

/* Solar panels */
.block_214 {
font-size:22px !important;
color:blue !important;
}

But how must I do this for named index items ??

Re: Dashticz - Custom CSS

Posted: Saturday 08 December 2018 22:17
by johnnie
Question,

I'm strugling to get the right entry in css to enlarge the font of the calendar entries output (not the title). Somebody willing to point me to the right direction?

Johnnie

Re: Dashticz - Custom CSS

Posted: Saturday 08 December 2018 23:00
by Lokonli
Try adding the following to custom.css:

Code: Select all

.containsicalendar {
}

.containsicalendar .items {
  font-size: 150%;
}

Re: Dashticz - Custom CSS

Posted: Sunday 09 December 2018 0:13
by johnnie
Lokonli wrote: ↑Saturday 08 December 2018 23:00 Try adding the following to custom.css:

Code: Select all

.containsicalendar {
}

.containsicalendar .items {
  font-size: 150%;
}
Oh yeah that did it, thanks!

Re: Dashticz - Custom CSS

Posted: Thursday 13 December 2018 21:19
by johnnie
Hi all,

Searching the forum but didn't find a way to increase the fontsize of TVguide and OVtransport.
Does somebody know how to achieve this?

Johnnie

Re: Dashticz - Custom CSS

Posted: Sunday 30 December 2018 11:34
by EdwinK
Lokonli wrote: ↑Saturday 08 December 2018 23:00 Try adding the following to custom.css:

Code: Select all

.containsicalendar {
}

.containsicalendar .items {
  font-size: 150%;
}

If only I had known it was that easy :) Been looking for this for quite some time.

Change button background Re: Dashticz - Custom CSS

Posted: Sunday 10 March 2019 22:50
by EdwinK
I foudn this on the wiki:

Code: Select all

.warning {
   background: rgba(199,44,44,0.3) !important;
   background-clip: padding-box;
   border: 7px solid rgba(255,255,255,0);
   -webkit-animation: BLINK-ANIMATION 1s infinite;
   -moz-animation: BLINK-ANIMATION 1s infinite;
   -o-animation: BLINK-ANIMATION 1s infinite;
   animation: BLINK-ANIMATION 1s infinite;
}

@-webkit-keyframes BLINK-ANIMATION {
   0%, 49% {
      background-color: rgba(199,44,44,0.3);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
   50%, 100% {
      background-color: rgba(199,44,44,0.7);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
}

.warningblue {
   background: rgba(45,119,204,0.3) !important;
    background-clip: padding-box;
   border: 7px solid rgba(255,255,255,0);
   -webkit-animation: BLINK-ANIMATION-BLUE 1s infinite;
   -moz-animation: BLINK-ANIMATION-BLUE 1s infinite;
   -o-animation: BLINK-ANIMATION-BLUE 1s infinite;
   animation: BLINK-ANIMATION-BLUE 1s infinite;
}

@-webkit-keyframes BLINK-ANIMATION-BLUE {
   0%, 49% {
      background-color: rgba(45,119,204,0.3);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
   50%, 100% {
      background-color: rgba(45,119,204,0.7);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
}
I don't need/want this blinking, but the colours need to change depending on the out-side temperature for some buttons. How does this need to be changed?

Re: Change button background Re: Dashticz - Custom CSS

Posted: Monday 11 March 2019 12:40
by Lokonli
EdwinK wrote: ↑Sunday 10 March 2019 22:50 I foudn this on the wiki:

Code: Select all

.warning {
   background: rgba(199,44,44,0.3) !important;
   background-clip: padding-box;
   border: 7px solid rgba(255,255,255,0);
   -webkit-animation: BLINK-ANIMATION 1s infinite;
   -moz-animation: BLINK-ANIMATION 1s infinite;
   -o-animation: BLINK-ANIMATION 1s infinite;
   animation: BLINK-ANIMATION 1s infinite;
}

@-webkit-keyframes BLINK-ANIMATION {
   0%, 49% {
      background-color: rgba(199,44,44,0.3);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
   50%, 100% {
      background-color: rgba(199,44,44,0.7);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
}

.warningblue {
   background: rgba(45,119,204,0.3) !important;
    background-clip: padding-box;
   border: 7px solid rgba(255,255,255,0);
   -webkit-animation: BLINK-ANIMATION-BLUE 1s infinite;
   -moz-animation: BLINK-ANIMATION-BLUE 1s infinite;
   -o-animation: BLINK-ANIMATION-BLUE 1s infinite;
   animation: BLINK-ANIMATION-BLUE 1s infinite;
}

@-webkit-keyframes BLINK-ANIMATION-BLUE {
   0%, 49% {
      background-color: rgba(45,119,204,0.3);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
   50%, 100% {
      background-color: rgba(45,119,204,0.7);
      background-clip: padding-box;
      border: 7px solid rgba(255,255,255,0);
   }
}
I don't need/want this blinking, but the colours need to change depending on the out-side temperature for some buttons. How does this need to be changed?
I think the example in the wiki more or less should work. Add the following code to custom/custom.js:

Code: Select all

function getStatus_145(idx,value,device){
   if(parseFloat(device['Data'])>23){
      $('div.block_145').addClass('warning');
   }
   else {
      $('div.block_145').removeClass('warning');
   }
}
In the above code replace 145 with the correct device ID (3 times). Replace ">23" with the condition that you want to use. Replace 'warning' with the name of the class that will be added to the block.
You have to add the class definition to custom.css, like:

Code: Select all

.warning {
   background: rgba(199,44,44,0.3) !important;
    background-clip: padding-box;
}

Re: Change button background Re: Dashticz - Custom CSS

Posted: Monday 11 March 2019 16:29
by EdwinK
Lokonli wrote: ↑Monday 11 March 2019 12:40 I think the example in the wiki more or less should work. Add the following code to custom/custom.js:

Code: Select all

function getStatus_145(idx,value,device){
   if(parseFloat(device['Data'])>23){
      $('div.block_145').addClass('warning');
   }
   else {
      $('div.block_145').removeClass('warning');
   }
}
In the above code replace 145 with the correct device ID (3 times). Replace ">23" with the condition that you want to use. Replace 'warning' with the name of the class that will be added to the block.
You have to add the class definition to custom.css, like:

Code: Select all

.warning {
   background: rgba(199,44,44,0.3) !important;
    background-clip: padding-box;
}
This seems to work ;) So, I was close :), but now I want several temperature 'levels'. >20 >25 >30 to have different colors. Would that also be possible?

Re: Dashticz - Custom CSS

Posted: Monday 11 March 2019 17:56
by Minglarn
I've done it like this...
This is for the dishwasher but the principle is the same :)

Code: Select all

/* DISHWASHER*/
function getStatus_478(idx,value,device){
	if(parseFloat(device['Data'])>=1) {
		/* DISHWASHER Working W is over >=1 */ 
		$("div.block_478").animate({'background-color': 'rgba(255, 0, 0, 1)'},550);
	}
	if(parseFloat(device['Data'])<=1) {
		/* Watt below <=1 */
		$("div.block_478").animate({'background-color': 'rgba(0, 128, 0, 1)'},550);
	}
}

Re: Dashticz - Custom CSS

Posted: Monday 11 March 2019 18:35
by EdwinK
going to try this. Thanks.

Re: Dashticz - Custom CSS

Posted: Wednesday 12 June 2019 18:43
by EastXIII
I really want to remove the transition the block's make on hovering. I don't mind the color change on clicking, but the transition needs to go.
I've searched CSS tutorials but whatever I try in the custom.css, even with the "!important" addition, I cannot get it to work.

I'm sure it's simple as heck... but so am I ;-)
The hover:hover addition like mentioned a few posts before does remove the color/transparancy change, but the transition (size adjustment on hover/click) stays.
Can someone help me out??

Re: Dashticz - Custom CSS

Posted: Wednesday 12 June 2019 22:45
by Lokonli
EastXIII wrote: ↑Wednesday 12 June 2019 18:43 I really want to remove the transition the block's make on hovering. I don't mind the color change on clicking, but the transition needs to go.
I've searched CSS tutorials but whatever I try in the custom.css, even with the "!important" addition, I cannot get it to work.

I'm sure it's simple as heck... but so am I ;-)
The hover:hover addition like mentioned a few posts before does remove the color/transparancy change, but the transition (size adjustment on hover/click) stays.
Can someone help me out??
If you want to remove hover completely add the following to the afterGetDevices function in custom.js:

Code: Select all

	$(".hover").removeClass('hover');
So the result should be something like:

Code: Select all

function afterGetDevices(){
	$(".hover").removeClass('hover');
}

Re: Dashticz - Custom CSS

Posted: Wednesday 12 June 2019 23:03
by EastXIII
Thanks! Big improvement for me. So is it possible to just see the color/opacity change? I was not looking to remove the hover altogether, just the 'movement' part of the block. Either way, this is a great alternative! Thanks again.

Re: Dashticz - Custom CSS

Posted: Wednesday 19 February 2020 20:56
by Jimster
Hi all,
I've added my Xiaomi Robot Vacuum cleaner to Domoticz. The block looks like this:
Image

Somehow the font size doesn't work. Any ideás what is going wrong?

Code: Select all

.block_72 {
  font-size:20px !important;
  height: 130px !important;
 }
I would like to remove some of the buttons, so I only have 2 left: Clean and Stop. Is this possible?

Re: Dashticz - Custom CSS

Posted: Monday 24 February 2020 22:15
by Jimster
The buttons I solved by editing the plugin.py. Can't figure out why the font isn't changing.

Re: Dashticz - Custom CSS

Posted: Monday 24 February 2020 23:05
by HansieNL
Jimster wrote: ↑Monday 24 February 2020 22:15 The buttons I solved by editing the plugin.py. Can't figure out why the font isn't changing.
Can you try with: .block_72 .btn {... and .block_72 .btn.active {...

Re: Dashticz - Custom CSS

Posted: Tuesday 25 February 2020 10:55
by Jimster
HansieNL wrote: ↑Monday 24 February 2020 23:05
Jimster wrote: ↑Monday 24 February 2020 22:15 The buttons I solved by editing the plugin.py. Can't figure out why the font isn't changing.
Can you try with: .block_72 .btn {... and .block_72 .btn.active {...
Thanks.. I found the issue. Forgot an { somewhere :roll:
So the font of the title of that block changed. And I moved it more to the left with margin-left:-30px. (I removed the icon).
Still need to figure out how to move the buttons to the left.

Re: Dashticz - Custom CSS

Posted: Thursday 27 February 2020 7:54
by flemm
I've spent the last couple of days making some custom css themes. And because I'm using different styling for differend kinds of blocks, that's kind of a pain: My css contains of big lists of block classes. And when blocks are added or removed, they have to be changed in a lot of places. So i was wondering, would it be possible to add custom classes in config.js? That would make custom styling a lot easier, i think..
All times are UTC+02:00
Page 4 of 5

Powered by phpBB® Forum Software © phpBB Limited