Dashticz - Custom CSS

[Minglarn]

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

[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]

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

[Lokonli]

Try adding the following to custom.css:

Code: Select all

.containsicalendar {
}

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

[johnnie]

Try adding the following to custom.css:

Code: Select all

.containsicalendar {
}

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

Oh yeah that did it, thanks!

[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

[EdwinK]

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.

[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?

[Lokonli]

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

[EdwinK]

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?

[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);
	}
}

[EdwinK]

going to try this. Thanks.

[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]

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]

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]

Hi all,
I've added my Xiaomi Robot Vacuum cleaner to Domoticz. The block looks like this:


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]

The buttons I solved by editing the plugin.py. Can't figure out why the font isn't changing.

[HansieNL]

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 {...

[Jimster]

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
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.

[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..