Dashticz - Custom CSS

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: robgeerts, htilburgs

schorrie
Posts: 7
Joined: Friday 09 February 2018 15:15
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post by schorrie » Friday 23 February 2018 13:22

damn, off course, stupid of me

thx for the correction

Vomera
Posts: 33
Joined: Wednesday 06 September 2017 9:11
Target OS: Linux
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post by Vomera » Monday 14 May 2018 11:59

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
Last edited by Vomera on Tuesday 15 May 2018 17:12, edited 1 time in total.

Wheeling
Posts: 7
Joined: Tuesday 02 May 2017 15:14
Target OS: Raspberry Pi
Domoticz version: 3.5877
Location: Holland
Contact:

Re: Dashticz - Custom CSS

Post by Wheeling » Monday 14 May 2018 21:19

Is it possible to enlarge the textbox so that the text fits next to eachother in the textbox?
Deshticz.png
Deshticz.png (133.07 KiB) Viewed 1437 times
PS. keep up the good work on Dashticz :)

User avatar
EdwinK
Posts: 1406
Joined: Sunday 22 January 2017 22:46
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Dashticz - Custom CSS

Post by EdwinK » Thursday 17 May 2018 14:15

Screen Shot 2018-05-17 at 14.12.44.png
Screen Shot 2018-05-17 at 14.12.44.png (256.87 KiB) Viewed 1397 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;
}
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | RFxcom | Dashticz V2

User avatar
HansieNL
Posts: 460
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post by HansieNL » Thursday 31 May 2018 22:09

I want all my text of the switches to be gray in the off status and white in the on status.
Image
Can someone tell me how to do that?
Blah blah blah

Danigympie
Posts: 3
Joined: Thursday 31 May 2018 13:38
Target OS: Windows
Domoticz version: 3.8153
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by Danigympie » Wednesday 06 June 2018 14:42

Derik wrote:
Tuesday 02 January 2018 13:05
robgeerts wrote:
Tuesday 02 January 2018 10:25
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;}

User avatar
mvveelen
Posts: 684
Joined: Friday 31 October 2014 11:22
Target OS: NAS (Synology & others)
Domoticz version: Beta
Location: Hoorn, The Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by mvveelen » Monday 23 July 2018 10:31

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:

Image


Image

What can I do to preserve the same size for the buttons when I hover over them or click them ?
RPi3 + RFXCOM rfxtrx433E + Xiaomi Gateway + Philips HUE Lights + Nefit Easy + Dashticz v2 + Domoticz latest Beta

Vomera
Posts: 33
Joined: Wednesday 06 September 2017 9:11
Target OS: Linux
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post by Vomera » Tuesday 09 October 2018 16:17

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
Posts: 1
Joined: Saturday 20 October 2018 16:01
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Custom CSS: for a specific iframe

Post by laserted » Saturday 20 October 2018 16:21

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

User avatar
HansieNL
Posts: 460
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post by HansieNL » Saturday 20 October 2018 16:55

Spoiler: show
mvveelen wrote:
Monday 23 July 2018 10:31
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:

Image


Image

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 */

}
Blah blah blah

jake
Posts: 492
Joined: Saturday 30 May 2015 22:40
Target OS: Raspberry Pi
Domoticz version: beta
Contact:

Re: Dashticz - Custom CSS

Post by jake » Monday 29 October 2018 23:13

jake wrote:
Friday 03 November 2017 23:05
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
Posts: 151
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post by Lokonli » Monday 29 October 2018 23:48

jake wrote:
Monday 29 October 2018 23:13
jake wrote:
Friday 03 November 2017 23:05
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
Posts: 492
Joined: Saturday 30 May 2015 22:40
Target OS: Raspberry Pi
Domoticz version: beta
Contact:

Re: Dashticz - Custom CSS

Post by jake » Tuesday 30 October 2018 0:40


Lokonli wrote:
jake wrote:
Monday 29 October 2018 23:13
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.


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

Re: Dashticz - Custom CSS

Post by Minglarn » Monday 05 November 2018 23:00

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
big_temp.PNG (17.16 KiB) Viewed 301 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.
When you eliminate the impossible, whatever remains, however improbable, must be the truth.” -Spock in Star Trek VI

User avatar
HansieNL
Posts: 460
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post by HansieNL » Monday 05 November 2018 23:55

@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%; }
Blah blah blah

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

Re: Dashticz - Custom CSS

Post by Minglarn » Tuesday 06 November 2018 9:12

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

When you eliminate the impossible, whatever remains, however improbable, must be the truth.” -Spock in Star Trek VI

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

Re: Dashticz - Custom CSS

Post by Minglarn » Wednesday 07 November 2018 18:06

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;
}
When you eliminate the impossible, whatever remains, however improbable, must be the truth.” -Spock in Star Trek VI

Lokonli
Posts: 151
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post by Lokonli » Wednesday 07 November 2018 20:54

jake wrote:
Tuesday 30 October 2018 0:40
Lokonli wrote:
jake wrote:
Monday 29 October 2018 23:13
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
Posts: 492
Joined: Saturday 30 May 2015 22:40
Target OS: Raspberry Pi
Domoticz version: beta
Contact:

Re: Dashticz - Custom CSS

Post by jake » Saturday 10 November 2018 1:24

Lokonli wrote:
jake wrote:
Tuesday 30 October 2018 0:40
Lokonli wrote: 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!

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

Re: Dashticz - Custom CSS

Post by Minglarn » Saturday 10 November 2018 18: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

When you eliminate the impossible, whatever remains, however improbable, must be the truth.” -Spock in Star Trek VI

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests