Dashticz - Custom CSS

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

User avatar
Minglarn
Posts: 214
Joined: Friday 21 August 2015 19:27
Target OS: Raspberry Pi / ODroid
Domoticz version: v3.8153
Location: Stockholm / Sweden
Contact:

Re: Dashticz - Custom CSS

Post 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);
} 
When you eliminate the impossible, whatever remains, however improbable, must be the truth.” -Spock in Star Trek VI
askmurphy
Posts: 30
Joined: Friday 03 October 2014 22:51
Target OS: Raspberry Pi / ODroid
Domoticz version: beta
Contact:

Re: Dashticz - Custom CSS

Post 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 ??
johnnie
Posts: 37
Joined: Wednesday 10 December 2014 21:08
Target OS: Raspberry Pi / ODroid
Domoticz version: 4.10717
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post 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
Raspi 3B+; Razberry zwave; zigbee; lots and lots of sensors
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post by Lokonli »

Try adding the following to custom.css:

Code: Select all

.containsicalendar {
}

.containsicalendar .items {
  font-size: 150%;
}
johnnie
Posts: 37
Joined: Wednesday 10 December 2014 21:08
Target OS: Raspberry Pi / ODroid
Domoticz version: 4.10717
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post 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!
Raspi 3B+; Razberry zwave; zigbee; lots and lots of sensors
johnnie
Posts: 37
Joined: Wednesday 10 December 2014 21:08
Target OS: Raspberry Pi / ODroid
Domoticz version: 4.10717
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post 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
Raspi 3B+; Razberry zwave; zigbee; lots and lots of sensors
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Dashticz - Custom CSS

Post 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.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Change button background Re: Dashticz - Custom CSS

Post 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?
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Change button background Re: Dashticz - Custom CSS

Post 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;
}
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Change button background Re: Dashticz - Custom CSS

Post 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?
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
User avatar
Minglarn
Posts: 214
Joined: Friday 21 August 2015 19:27
Target OS: Raspberry Pi / ODroid
Domoticz version: v3.8153
Location: Stockholm / Sweden
Contact:

Re: Dashticz - Custom CSS

Post 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);
	}
}
When you eliminate the impossible, whatever remains, however improbable, must be the truth.” -Spock in Star Trek VI
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Dashticz - Custom CSS

Post by EdwinK »

going to try this. Thanks.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
EastXIII
Posts: 29
Joined: Monday 08 October 2018 13:56
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Contact:

Re: Dashticz - Custom CSS

Post 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??
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post 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');
}		
EastXIII
Posts: 29
Joined: Monday 08 October 2018 13:56
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Contact:

Re: Dashticz - Custom CSS

Post 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.
Jimster
Posts: 82
Joined: Tuesday 04 February 2020 11:42
Target OS: Raspberry Pi / ODroid
Domoticz version: 2020.2
Location: The Netherlands
Contact:

Re: Dashticz - Custom CSS

Post 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?
Jimster
Posts: 82
Joined: Tuesday 04 February 2020 11:42
Target OS: Raspberry Pi / ODroid
Domoticz version: 2020.2
Location: The Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by Jimster »

The buttons I solved by editing the plugin.py. Can't figure out why the font isn't changing.
User avatar
HansieNL
Posts: 957
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post 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 {...
Blah blah blah
Jimster
Posts: 82
Joined: Tuesday 04 February 2020 11:42
Target OS: Raspberry Pi / ODroid
Domoticz version: 2020.2
Location: The Netherlands
Contact:

Re: Dashticz - Custom CSS

Post 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.
User avatar
flemm
Posts: 25
Joined: Thursday 20 February 2020 8:04
Target OS: Raspberry Pi / ODroid
Domoticz version: 4.11780
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post 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..
Mario ipsum RGB mushroom 1-up.
Post Reply

Who is online

Users browsing this forum: Google [Bot] and 1 guest