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

User avatar
EdwinK
Posts: 1246
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 669 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 | RFxcom | Dashticz V2 |

User avatar
HansieNL
Posts: 391
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi
Domoticz version: Stable
Location: NL
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: 673
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

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests