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: 29
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 1031 times
PS. keep up the good work on Dashticz :)

User avatar
EdwinK
Posts: 1333
Joined: Sunday 22 January 2017 22:46
Target OS: Raspberry Pi
Domoticz version: Stable
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 991 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 BETASTABLE on a Pi-3 | Toon® Thermostat (rooted) | RFxcom | Dashticz V2

User avatar
HansieNL
Posts: 445
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: 674
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: 29
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: 445
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

Post Reply

Who is online

Users browsing this forum: rbo0567, Thuis and 3 guests