Dashticz - Custom CSS
Moderators: leecollings, htilburgs, robgeerts
-
- Posts: 5
- Joined: Friday 09 February 2018 14:15
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Custom CSS
damn, off course, stupid of me
thx for the correction
thx for the correction
-
- Posts: 184
- Joined: Wednesday 06 September 2017 9:11
- Target OS: Linux
- Domoticz version:
- Contact:
Re: Dashticz - Custom CSS
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
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.
-
- Posts: 7
- Joined: Tuesday 02 May 2017 15:14
- Target OS: Raspberry Pi / ODroid
- Domoticz version: 3.5877
- Location: Holland
- Contact:
Re: Dashticz - Custom CSS
Is it possible to enlarge the textbox so that the text fits next to eachother in the textbox?
PS. keep up the good work on Dashticz
PS. keep up the good work on Dashticz
- 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
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) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
- HansieNL
- Posts: 957
- Joined: Monday 28 September 2015 15:13
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Custom CSS
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?
Can someone tell me how to do that?
Blah blah blah
-
- Posts: 3
- Joined: Thursday 31 May 2018 13:38
- Target OS: Windows
- Domoticz version: 3.8153
- Location: Netherlands
- Contact:
Re: Dashticz - Custom CSS
Derik wrote: ↑Tuesday 02 January 2018 12:05that works just for the icon....[ option for the text ]robgeerts wrote: ↑Tuesday 02 January 2018 9:25 Try:(I removed the quotes...)Code: Select all
.block_9448_1 { color:red !important; }
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:I try this block to give a other size and color: [ tekst block ]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;}
Only get it not working.Code: Select all
.block_9325 { font-size: 25px; !important; color: red;!important; }
a other thing.
I will try to set the sunset and sunrise icon a litle bit greater:Anyone a idea how?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;}
Perhaps here someone the garbage image i try to enlarge:no luck @ all..Code: Select all
.kliko.png { height:25px; width:25px; margin-left:2px ; margin-top: 2px;}
The swiper bullet .. I set i t the right that is ok..
Only i cannot enlarge this bullet..And the next:Code: Select all
/* ///////////// Swiper bullet \\\\\\\\\\\\\\\\\\\\*/ .swiper-pagination-bullet {background: #00FF00 ; width: 90px;!important; height: 90px;!important; float:left; position:relative; left:1000px;}
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
- mvveelen
- Posts: 678
- Joined: Friday 31 October 2014 10:22
- Target OS: NAS (Synology & others)
- Domoticz version: Beta
- Location: Hoorn, The Netherlands
- Contact:
Re: Dashticz - Custom CSS
I have this code to make the space between the blocks/buttons smaller:
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 ?
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 */
}
What can I do to preserve the same size for the buttons when I hover over them or click them ?
RPi3b+/RFXCOM rfxtrx433E/Shelly/Xiaomi Gateway/Philips HUE Lights/Atag Zone One/2 SunnyBoy inverters/AirconWithMe/P1 smartmeter/Domoticz latest Beta
-
- Posts: 184
- Joined: Wednesday 06 September 2017 9:11
- Target OS: Linux
- Domoticz version:
- Contact:
Re: Dashticz - Custom CSS
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:
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
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
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
-
- Posts: 1
- Joined: Saturday 20 October 2018 16:01
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Custom CSS: for a specific iframe
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
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
- Posts: 957
- Joined: Monday 28 September 2015 15:13
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Custom CSS
- Spoiler: show
....
.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
-
- Posts: 742
- Joined: Saturday 30 May 2015 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version: beta
- Contact:
Re: Dashticz - Custom CSS
Before posting the above question, I first searched the forum. I was surprised to see my own post from about a year ago.jake wrote: ↑Friday 03 November 2017 22:05 In custom.css I have pasted/modified the code: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.Code: Select all
.gasgebruik { background: rgba(255,128,128,0.3) !important; background-clip: padding-box; }
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.Verstuurd vanaf mijn K00C met TapatalkCode: Select all
.gasgebruik { background: rgba(255,128,128,0.3); }
Anyway, the problem is still the same and I would like some help to prevent the colored background to grow on me.
-
- Posts: 2261
- Joined: Monday 29 August 2016 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Custom CSS
I'm not exactly sure what you try to achieve, but did you try with ' content-box' instead of 'padding-box'?jake wrote: ↑Monday 29 October 2018 22:13Before posting the above question, I first searched the forum. I was surprised to see my own post from about a year ago.jake wrote: ↑Friday 03 November 2017 22:05 In custom.css I have pasted/modified the code: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.Code: Select all
.gasgebruik { background: rgba(255,128,128,0.3) !important; background-clip: padding-box; }
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.Verstuurd vanaf mijn K00C met TapatalkCode: Select all
.gasgebruik { background: rgba(255,128,128,0.3); }
Anyway, the problem is still the same and I would like some help to prevent the colored background to grow on me.
-
- Posts: 742
- Joined: Saturday 30 May 2015 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version: beta
- Contact:
Re: Dashticz - Custom CSS
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.Lokonli wrote:I'm not exactly sure what you try to achieve, but did you try with ' content-box' instead of 'padding-box'?jake wrote: ↑Monday 29 October 2018 22:13 In custom.css I have pasted/modified the code: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.Code: Select all
.gasgebruik { background: rgba(255,128,128,0.3) !important; background-clip: padding-box; }
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); }
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
- 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
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: 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.
I need to have 1 plock to show the temperature as big as I want to.
Something like this: 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
- HansieNL
- Posts: 957
- Joined: Monday 28 September 2015 15:13
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Custom CSS
@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%; }
.block_IDX .value { font-size: large; } or .block_IDX .value { font-size: 150%; }
Blah blah blah
- 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
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
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
- 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
Did found it... Google is here to help
Did something like this:
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
-
- Posts: 2261
- Joined: Monday 29 August 2016 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Custom CSS
In case you didn't solve it yet: Add '!important' to the background-clip line, likejake wrote: ↑Monday 29 October 2018 23:40Well, 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.Lokonli wrote:I'm not exactly sure what you try to achieve, but did you try with ' content-box' instead of 'padding-box'?jake wrote: ↑Monday 29 October 2018 22:13 In custom.css I have pasted/modified the code: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.Code: Select all
.gasgebruik { background: rgba(255,128,128,0.3) !important; background-clip: padding-box; }
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); }
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.
Code: Select all
gasverbruik {
background: rgba(255,128,128,0.3) !important;
background-clip: padding-box !important;
}
-
- Posts: 742
- Joined: Saturday 30 May 2015 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version: beta
- Contact:
Re: Dashticz - Custom CSS
Sweet, that does it. With padding.box !important; it works as expected. The previously suggested content.box !important; makes the colored box even smaller.Lokonli wrote:In case you didn't solve it yet: Add '!important' to the background-clip line, likejake wrote: ↑Monday 29 October 2018 23:40Well, 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.Lokonli wrote: I'm not exactly sure what you try to achieve, but did you try with ' content-box' instead of 'padding-box'?
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.Code: Select all
gasverbruik { background: rgba(255,128,128,0.3) !important; background-clip: padding-box !important; }
I don't understand what the !important addition does, but it works!
- 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
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
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
Who is online
Users browsing this forum: No registered users and 1 guest