Dashticz - Custom CSS

[schorrie]

damn, off course, stupid of me

thx for the correction

[Vomera]

Is there a way to activate a block ?
I have the garbage block and it looks like it is inactive, the color of the bin and text are darker then the rest of the blocks.

edit: not needed anymore

[Wheeling]

Is it possible to enlarge the textbox so that the text fits next to eachother in the textbox?

Deshticz.png (133.07 KiB) Viewed 3943 times

PS. keep up the good work on Dashticz

[EdwinK]

Screen Shot 2018-05-17 at 14.12.44.png (256.87 KiB) Viewed 3903 times

It looks like the tile for the sunscreen is a bit too big. Tried several things in custom.css, but can't get it to be the same size as the other tiles.

This is what I have in custom.css

Code: Select all

h1, h2, h3, h4, h5, h6 {
font-family: 'tahoma';
margin: 0px;
margin-left: 15px;
font-weight: 900;
font-size: 200%;
}

/* Schakelaars */
.fa.fa-lightbulb-o.on           {color:#00FF00;}
.fa.fa-lightbulb-o.off          {color:#ff0000;}
.fa.fa-tv.on                    {color:#00FF00;}
.fa.fa-tv.off                   {color:#ff6666;}
.fa.fa-file-movie-o.on          {color:#00FF00;}
.fa.fa-file-movie-o.off         {color:#ffff00;}
.fa.fa-music.on                 {color:#00FF00;}
.fa.fa-music.off                {color:#0099ff;}
.fa.fa-power-off.off.on         {color:#00FF00;}
.fa.fa-power-off.off            {color:#ff8000;}
.fa-toggle-on.on                {color:#00FF00;}
.fa-toggle-on.off               {color:#ff0000;}
.fa-sign-out.on                {color:#00FF00;}
.fa-sign-out.off               {color:#ff0000;}


/* Weather */
.wi                             {color:#fff000;}

.fa-lightbulb-o:before          {font-size: 25px;}
.fa.fa-tv.on:before             {font-size: 25px;}
.fa.fa-tv.off:before            {font-size: 25px;}
.fa.fa-file-movie-o.on:before   {font-size: 25px;}
.fa.fa-file-movie-o.off:before  {font-size: 25px;}
.fa.fa-music.on:before          {font-size: 25px;}
.fa.fa-music.off:before         {font-size: 25px;}
.fa.fa-power-off.off.on:before  {font-size: 25px;}
.fa.fa-power-off.off:before     {font-size: 25px;}
.fa-toggle-on.on:before         {font-size: 25px;}
.fa-toggle-on.off:before        {font-size: 25px;}
fa-sign-out:before              {font-size: 25px;}




/* Calendar font modifications with NO icon active */

.col-xs-12.items {
   font-size: 15px;
}


.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
padding-top:15px;
padding-bottom:15px;
border: 3px solid rgba(255,255,255,0);	/* border: 7px -> 3px - Smaller space between blocks */
background: rgba(0,0,0,0.2);	
background-clip: padding-box;
}

[HansieNL]

I want all my text of the switches to be gray in the off status and white in the on status.

Can someone tell me how to do that?

[Danigympie]

Try:

Code: Select all

.block_9448_1 {      color:red !important; }

(I removed the quotes...)

that works just for the icon....[ option for the text ]
Is there perhaps a option to remove the icon?

Hope there are more people to help me, with this css higher math...

Some more CSS strange things:
I use for all the blocks with the underline text this:

Code: Select all

/*////////////////  Tekst in de buttons en er onder \\\\\\\\\\\\\\\\\\\\\*/
.col-data .title 	{ font-size: 45px; margin-left: 25px; font-weight: 600; color: deepskyblue; font-variant: small-caps;}
.col-data span 		{ font-size: 25px; margin-right: 25px; font-weight:220; color: dodgerblue;font-variant: small-caps;}

I try this block to give a other size and color: [ tekst block ]

Code: Select all

.block_9325			{ font-size: 25px; !important;  color: red;!important;  }

Only get it not working.

a other thing.
I will try to set the sunset and sunrise icon a litle bit greater:

Code: Select all

/*////////////////////////////////////// Zon opkomst en ondergang \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.sunrise	{ font-size: 25px; color: #FFFF00 ;!important; font-weight: 1; font-variant: small-caps;} 	
.wi-sunrise	{ color: yellow;!important;}									
.sunset		{ font-size: 25px; color: #0000FF ;!important; font-weight: 1; font-variant: small-caps;}	
.wi-sunset	{ color: indigo; !important;}									

Anyone a idea how?

Perhaps here someone the garbage image i try to enlarge:

Code: Select all

.kliko.png				{ height:25px; width:25px; margin-left:2px ; margin-top: 2px;}

no luck @ all..

The swiper bullet .. I set i t the right that is ok..
Only i cannot enlarge this bullet..

Code: Select all

/* /////////////  Swiper bullet \\\\\\\\\\\\\\\\\\\\*/
.swiper-pagination-bullet {background: #00FF00	; width: 90px;!important; height: 90px;!important; float:left; position:relative; left:1000px;}

And the next:
How can i get google maps traffic to 80% or 90% of the page height

How to enlarge the tekst and the div/frame from the [ domoticz] log??

And the last but not least.
Is there any setting possible to enlarge the text of the popup windows?

Don't know if you are still looking for the answer but mayby this will help you:

Spoiler: show

/*////////////////////////////////////// Zon opkomst en ondergang \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.sunrise { font-size: 25px; color: yellow;}
.wi-sunrise:before { color: yellow; font-size: 25px;}
.sunset { font-size: 25px; color: orange;}
.wi-sunset:before { color: orange; font-size: 25px;}

[mvveelen]

I have this code to make the space between the blocks/buttons smaller:

Code: Select all

.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 3px solid rgba(255,255,255,0);		/* border: 7px -> 3px - Smaller space between blocks */
	background: rgba(0,0,0,0.2);				
	background-clip: padding-box;
	border-radius: 16px;						/* Round corners */ 

}

Now, when I hover over a block/button or click it, the button gets smaller and the tekst is spread all over the button and space between the buttons. See:






What can I do to preserve the same size for the buttons when I hover over them or click them ?

[Vomera]

Hi there!

Is there a way to give the temperature a color by degrees? For example if it's 0 C outside the text of the temp will be blue and if it's 30 C outside the text will be dark red?

Tried with the custom.css file:

Spoiler: show

.block_3919.0 {
color:blue !important;
}

.block_3919.30 {
color:red !important;
}

But it doesnt work. I dont also know if it works with one decimal for example 30.0 or 31.0.

Would be also fun to make a hue light with the current temp outside in color


Also an option for the heating. If the heater is on show a flame icon and if its of show a snowflake

[laserted]

Greets -
I have an external source that presents a non-markup text blob that I am displaying in an iframe via:

in CONFIG.js:

var frames = {}
frames.textblob = {refreshiframe:10000,height:500,frameurl:"http://a.b.c.d/textblob.txt",width:12}
.....
columns[8] = {}
columns[8]['blocks'] = [frames.textblob];
columns[8]['width'] = 5;

columns[8] is then placed into a screen.

The text blob loads and displays as expected, however in black text with a transparent frame background (current default global css).
I understand how to use an iframes block in CSS, however that is global to ALL iframes (including other iframes that are in use)

I'm not understanding the naming hierarchy enough to determine how to format the css for ONLY the iframe for frames.textblob - the intent it to set the text color to white to start with.

I walked through a 'view-source' of the page, but the content is so dynamic, I can't see a specific reference to put me on the right path.
Could I ask the CSS-gurus for a guided suggestion? Once I understand how to do it on this one specific iframe, I think I can get the rest of the ones I have.

Thanks,
Ted

[HansieNL]

Spoiler: show

I have this code to make the space between the blocks/buttons smaller:

Code: Select all

.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 3px solid rgba(255,255,255,0);		/* border: 7px -> 3px - Smaller space between blocks */
	background: rgba(0,0,0,0.2);				
	background-clip: padding-box;
	border-radius: 16px;						/* Round corners */ 

}

Now, when I hover over a block/button or click it, the button gets smaller and the tekst is spread all over the button and space between the buttons. See:






What can I do to preserve the same size for the buttons when I hover over them or click them ?

.transbg.col-xs-1.hover:hover,
....
.transbg.col-xs-12.hover:hover {
padding-top:15px;
padding-bottom:15px;
border: 3px solid rgba(255,255,255,0); /* border: 7px -> 3px - Smaller space between blocks */
background: rgba(0,0,0,0.2);
background-clip: padding-box;
border-radius: 16px; /* Round corners */

}

[jake]

In custom.css I have pasted/modified the code:

Code: Select all

.gasgebruik {
 background: rgba(255,128,128,0.3) !important;
 background-clip: padding-box;
}

This changes the background color of my gasmeter when there is usage (defined in custom.js). This works as expected, however, when the box gets the red background, it also expands, the reddish background square is bigger than the default, semi-transparent background.

How can I prevent the box to grow when the above code changes it's background color? I tried to remove everthing after the background color, but then it doesn't work anymore at all.

Code: Select all

.gasgebruik {
 background: rgba(255,128,128,0.3);
}

Verstuurd vanaf mijn K00C met Tapatalk

Before posting the above question, I first searched the forum. I was surprised to see my own post from about a year ago.
Anyway, the problem is still the same and I would like some help to prevent the colored background to grow on me.

[Lokonli]

In custom.css I have pasted/modified the code:

Code: Select all

.gasgebruik {
 background: rgba(255,128,128,0.3) !important;
 background-clip: padding-box;
}

This changes the background color of my gasmeter when there is usage (defined in custom.js). This works as expected, however, when the box gets the red background, it also expands, the reddish background square is bigger than the default, semi-transparent background.

How can I prevent the box to grow when the above code changes it's background color? I tried to remove everthing after the background color, but then it doesn't work anymore at all.

Code: Select all

.gasgebruik {
 background: rgba(255,128,128,0.3);
}

Verstuurd vanaf mijn K00C met Tapatalk

Before posting the above question, I first searched the forum. I was surprised to see my own post from about a year ago.
Anyway, the problem is still the same and I would like some help to prevent the colored background to grow on me.

I'm not exactly sure what you try to achieve, but did you try with ' content-box' instead of 'padding-box'?

[jake]

In custom.css I have pasted/modified the code:

Code: Select all

.gasgebruik {
 background: rgba(255,128,128,0.3) !important;
 background-clip: padding-box;
}

This changes the background color of my gasmeter when there is usage (defined in custom.js). This works as expected, however, when the box gets the red background, it also expands, the reddish background square is bigger than the default, semi-transparent background.

How can I prevent the box to grow when the above code changes it's background color? I tried to remove everthing after the background color, but then it doesn't work anymore at all.

Code: Select all

.gasgebruik {
 background: rgba(255,128,128,0.3);
}

I'm not exactly sure what you try to achieve, but did you try with ' content-box' instead of 'padding-box'?

Well, every block on the panel hat it's own background, to make it stand out from the desktop behind it. Anyway, from the wiki I took this custom.css example to color the background differently on special occasions.
At the moment the principle works: as soon as the heater is on, the gasmeter counter shows a red background, for me an indicator that we are using gas (although the meter itself only updates once an hour my OTGW knows when the heater is on).

The problem is that the mentioned custom.css code makes this original background rectangle a bit bigger, like it is filling the background, but also wit a fat edge around it in the same color. Therefore the red colored background is bigger than the default 'black' background. When 2 blocks besides eachother get a red background, they even melt together in color, because their edges touch eachother in that case.
I would like to stay within the original block boundary, not grow any size, just change color.

I agree that the word 'padding' already implies 'fattening up'. Itried the suggested 'content-box', but that doesn't help anything in the size change. The colors still work fine, but the rectangle sill increases in size when it's colored differently than the default background.

[Minglarn]

Hi! Is it possible to change the font size for VALUE in one specific block?

I need to have 1 plock to show the temperature as big as I want to.
Something like this:

big_temp.PNG (17.16 KiB) Viewed 2809 times

At the moment i'm using PHP and frames, a bad solution and it's not the actual value as I update the frame every 5 minutes.

[HansieNL]

@Minglarn : You can add one of the following codes to your custom.css...
.block_IDX .value { font-size: large; } or .block_IDX .value { font-size: 150%; }

[Minglarn]

Did figure that out.. Thanks anyway
But the block won't stretch out to the width I want..

So I get something like this :
8.
5
°C

How the heck can I stretch to the same size as my block witch is 4...

Skickat från min SM-N950F via Tapatalk

[Minglarn]

Did found it... Google is here to help

Did something like this:

Code: Select all

.block_1111_1 {
   background: rgba(1,0,128,1) !important;
   width: 100% !important;
   height: 240px !important;
   text-align: center !important;
}
.block_1111_1 .title { 
	font-size: 100px !important; 
}
.block_1111_1 .value { 
	font-size: 40px !important;
}

[Lokonli]

In custom.css I have pasted/modified the code:

Code: Select all

.gasgebruik {
 background: rgba(255,128,128,0.3) !important;
 background-clip: padding-box;
}

This changes the background color of my gasmeter when there is usage (defined in custom.js). This works as expected, however, when the box gets the red background, it also expands, the reddish background square is bigger than the default, semi-transparent background.

How can I prevent the box to grow when the above code changes it's background color? I tried to remove everthing after the background color, but then it doesn't work anymore at all.

Code: Select all

.gasgebruik {
 background: rgba(255,128,128,0.3);
}

I'm not exactly sure what you try to achieve, but did you try with ' content-box' instead of 'padding-box'?

Well, every block on the panel hat it's own background, to make it stand out from the desktop behind it. Anyway, from the wiki I took this custom.css example to color the background differently on special occasions.
At the moment the principle works: as soon as the heater is on, the gasmeter counter shows a red background, for me an indicator that we are using gas (although the meter itself only updates once an hour my OTGW knows when the heater is on).

The problem is that the mentioned custom.css code makes this original background rectangle a bit bigger, like it is filling the background, but also wit a fat edge around it in the same color. Therefore the red colored background is bigger than the default 'black' background. When 2 blocks besides eachother get a red background, they even melt together in color, because their edges touch eachother in that case.
I would like to stay within the original block boundary, not grow any size, just change color.

I agree that the word 'padding' already implies 'fattening up'. Itried the suggested 'content-box', but that doesn't help anything in the size change. The colors still work fine, but the rectangle sill increases in size when it's colored differently than the default background.

In case you didn't solve it yet: Add '!important' to the background-clip line, like

Code: Select all

gasverbruik {
 background: rgba(255,128,128,0.3) !important;
 background-clip: padding-box !important;
}

[jake]

I'm not exactly sure what you try to achieve, but did you try with ' content-box' instead of 'padding-box'?

Well, every block on the panel hat it's own background, to make it stand out from the desktop behind it. Anyway, from the wiki I took this custom.css example to color the background differently on special occasions.
At the moment the principle works: as soon as the heater is on, the gasmeter counter shows a red background, for me an indicator that we are using gas (although the meter itself only updates once an hour my OTGW knows when the heater is on).

The problem is that the mentioned custom.css code makes this original background rectangle a bit bigger, like it is filling the background, but also wit a fat edge around it in the same color. Therefore the red colored background is bigger than the default 'black' background. When 2 blocks besides eachother get a red background, they even melt together in color, because their edges touch eachother in that case.
I would like to stay within the original block boundary, not grow any size, just change color.

I agree that the word 'padding' already implies 'fattening up'. Itried the suggested 'content-box', but that doesn't help anything in the size change. The colors still work fine, but the rectangle sill increases in size when it's colored differently than the default background.

In case you didn't solve it yet: Add '!important' to the background-clip line, like

Code: Select all

gasverbruik {
 background: rgba(255,128,128,0.3) !important;
 background-clip: padding-box !important;
}

Sweet, that does it. With padding.box !important; it works as expected. The previously suggested content.box !important; makes the colored box even smaller.

I don't understand what the !important addition does, but it works!

[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