Dashticz - Custom CSS

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: robgeerts, htilburgs

User avatar
htilburgs
Posts: 509
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Dashticz - Custom CSS

Post by htilburgs » Monday 04 September 2017 9:32

Section for questions about custom CSS modifications in Dashticz v2.0
Hardware:
RPi3 - Aeon Labs Z-Stick GEN5 - Fibaro Dimmer 2 - Fibaro Roller Shutter 2 - Fibaro Smoke Sensor - Yeelight RGBW Led bulb - Yeelight Smart LED Light Strip - Neo Coolcam PIR Motion Sensor - Neo Coolcam PowerPlug - Nest Thermostat v3

PieterS
Posts: 36
Joined: Wednesday 31 May 2017 16:06
Target OS: NAS (Synology & others)
Domoticz version: V4.9700
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by PieterS » Tuesday 12 September 2017 17:17

When I try to change the size of the icons in the blocks there is no difference:
I change the imagesize of the png-file to 200% or even 300%; the size of the picture on the blocks does not change at all.

This is the code in config.js

Code: Select all

blocks[31] = {}
blocks[31]['title']='Huiskamerlamp';
blocks[31]['image']='Light144_On.png';
blocks[31]['width']=4;

blocks[10] = {}
blocks[10]['title']='Lamp poort';
blocks[10]['image']='Light48_On.png'
blocks[10]['width']=4;
Has someone a suggestion where to change that?

Jmerino
Posts: 7
Joined: Monday 04 September 2017 0:37
Target OS: -
Domoticz version:
Contact:

Change font of news ??

Post by Jmerino » Friday 29 September 2017 21:57

Hi all,

can you help me with the font-size of news module please?
I want to resize for a bigger one.

Thanks

User avatar
robgeerts
Posts: 1247
Joined: Saturday 24 January 2015 23:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: Change font of news ??

Post by robgeerts » Sunday 01 October 2017 12:50

In custom.css:

Code: Select all

#newsTicker li {
font-size:16px !important;
}
Creator of Dashticz
Do you appreciate my work and want to buy me a beer?
Send:
- XVG to D8fwNbyV6YxJk1aSiXftWTtdaPipsKn2Fa
- ANY ERC20-TOKEN to 0x9b8ee84329d77765a28bca188218c6c793875a8a

or donate via PayPal: https://www.paypal.me/robgeerts

User avatar
remb0
Posts: 1002
Joined: Thursday 11 July 2013 22:21
Target OS: Raspberry Pi
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: Change font of news ??

Post by remb0 » Sunday 01 October 2017 13:23

nice :!:

Jmerino
Posts: 7
Joined: Monday 04 September 2017 0:37
Target OS: -
Domoticz version:
Contact:

Re: Change font of news ??

Post by Jmerino » Sunday 01 October 2017 16:00

Thanks. Perfect!!

Ingmar
Posts: 68
Joined: Sunday 04 May 2014 1:34
Target OS: NAS (Synology & others)
Domoticz version:
Location: The Netherlands
Contact:

Re: Change font of news ??

Post by Ingmar » Tuesday 24 October 2017 15:46

How can i remove the icon of the news block? With the TV block i removed the icon via the block settings in config.js. Instead of naming an alternative icon, i left it blank between the single quotes which causes no icon to be shown. However, with the news block that doesn't work...

Any thoughts?
Synology NAS with stable release, AEON Z-wave, RFXCOM, Toon, Echo Dot, HAbridge, HarmonyHUB, Dashticz.

Ingmar
Posts: 68
Joined: Sunday 04 May 2014 1:34
Target OS: NAS (Synology & others)
Domoticz version:
Location: The Netherlands
Contact:

Re: Change font of news ??

Post by Ingmar » Tuesday 24 October 2017 19:41

Ingmar wrote:
Tuesday 24 October 2017 15:46
How can i remove the icon of the news block? With the TV block i removed the icon via the block settings in config.js. Instead of naming an alternative icon, i left it blank between the single quotes which causes no icon to be shown. However, with the news block that doesn't work...

Solved it! Well, sort of, it is a bit of cheating but it gets the job done :lol:

For future reference, place the code below in the custom.css.

Code: Select all

/* News block: Hide icon and change margins of text to fill block */
#rss-styled_news {
    margin-right: -20px;
    margin-left: -20px;
}
.fa.fa-newspaper-o {
    opacity: 0;
}
Synology NAS with stable release, AEON Z-wave, RFXCOM, Toon, Echo Dot, HAbridge, HarmonyHUB, Dashticz.

askmurphy
Posts: 35
Joined: Friday 03 October 2014 22:51
Target OS: Raspberry Pi
Domoticz version: beta
Contact:

Re: Dashticz - Custom CSS

Post by askmurphy » Thursday 02 November 2017 14:50

How can I change the background color of all blocks at once ?

And how can I change the background color of just a specific block ?

Ingmar
Posts: 68
Joined: Sunday 04 May 2014 1:34
Target OS: NAS (Synology & others)
Domoticz version:
Location: The Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by Ingmar » Thursday 02 November 2017 22:05

If you look through the "Show your dashboard and how-to's" topic and read the Wiki pages then you will find your answers.

As a courtesy, see below (place in the CSS file):

Code: Select all

/* change background of all blocks */
.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 {
	border: 5px solid rgba(255,255,255,0);		/* border: 7px -> 3px - Smaller space between blocks */
	background: rgba(255,0,0,0.8);
}
Synology NAS with stable release, AEON Z-wave, RFXCOM, Toon, Echo Dot, HAbridge, HarmonyHUB, Dashticz.

askmurphy
Posts: 35
Joined: Friday 03 October 2014 22:51
Target OS: Raspberry Pi
Domoticz version: beta
Contact:

Re: Dashticz - Custom CSS

Post by askmurphy » Friday 03 November 2017 11:47

thanks!

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

Re: Dashticz - Custom CSS

Post by jake » 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


freeshare
Posts: 2
Joined: Saturday 04 November 2017 8:18
Target OS: Raspberry Pi
Domoticz version: 3.8153
Location: France
Contact:

height

Post by freeshare » Saturday 04 November 2017 8:22

Hello,
I want to increase the size of the characters in each of the blocks.

I know how to do it (.col-data .lastupdate {font-size:21px !important;}, nevertheless by doing it the text overflows blocks. How to increase the height of the blocks?

Thank you.

freeshare
Posts: 2
Joined: Saturday 04 November 2017 8:18
Target OS: Raspberry Pi
Domoticz version: 3.8153
Location: France
Contact:

Re: height

Post by freeshare » Sunday 05 November 2017 21:39

no solution on dashticz ?

User avatar
robgeerts
Posts: 1247
Joined: Saturday 24 January 2015 23:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: height

Post by robgeerts » Thursday 09 November 2017 0:01

In custom.css, you can use:

Code: Select all

div.mh {
    height: 99px !important;
}
BUT, the original value has been optimized for the rest of the design of Dashticz..
Creator of Dashticz
Do you appreciate my work and want to buy me a beer?
Send:
- XVG to D8fwNbyV6YxJk1aSiXftWTtdaPipsKn2Fa
- ANY ERC20-TOKEN to 0x9b8ee84329d77765a28bca188218c6c793875a8a

or donate via PayPal: https://www.paypal.me/robgeerts

User avatar
Derik
Posts: 2195
Joined: Friday 18 October 2013 23:33
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Arnhem/Nijmegen Nederland
Contact:

Re: Dashticz - Custom CSS

Post by Derik » Sunday 31 December 2017 19:56

dear...
Problem 1:

Code: Select all

.block_'9448_1' {      color:red !important; }
Should give me a group [ block ] a other color, only not working
Try also only 9448 no luck @ all.

Problem 2:

Code: Select all

.fa-battery-three-quarters.on 	 	{ color: red; }
.fa-battery-three-quarters.off	 	{ color: blue;}
.fa-battery-three-quarters:before	{ font-size: 40px;}
.fa-battery-three-quarters		{ margin-top: 15px !important;} /* zet het icon in het midden van de block */
Should give me a on or of different color.
Only the battery icon stay on white?
Settings block:

Code: Select all

blocks[697] = {}
blocks[697]['width'] 			= 3; //1 to 12, remove this line if you want to use the default (4)
blocks[697]['title'] 			= 'Laders'; //if you want change the name of switch different then domoticz
blocks[697]['icon'] 			= '.fa-battery-three-quarters; //if you want an other icon instead of the default, choose from: ttp://fontawesome.io/cheatsheet/
//blocks[697]['image'] 			= 'bulb_off.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[697]['switch'] 			= true; //if you want to switch the title and data
blocks[697]['hide_data'] 		= true; //if you want to hide the data of this block
blocks[697]['show_lastupdate']	 	= false; //if you want to show the last update specific for this block
Try with these settings
.fa-eye

Code: Select all

.fa-eye.on 		{ color: red; }
.fa-eye.off		{ color: blue;}
.fa-eye:before		{ font-size: 40px;}
.fa-eye			{ margin-top: 15px !important;} /* zet het icon in het midden van de block */
And this is changing good.

Perhaps something in a long name or?
Xu4: Beta Extreme antenna RFXcomE,WU Fi Ping ip P1 Gen5 PVOutput Harmony HUE SolarmanPv OTG Winddelen Alive ESP Buienradar MySensors WOL Winddelen counting RPi: Beta SMAspot RFlinkTest Domoticz ...Different backups

User avatar
robgeerts
Posts: 1247
Joined: Saturday 24 January 2015 23:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: Dashticz - Custom CSS

Post by robgeerts » Tuesday 02 January 2018 10:25

Try:

Code: Select all

.block_9448_1 {      color:red !important; }
(I removed the quotes...)
Creator of Dashticz
Do you appreciate my work and want to buy me a beer?
Send:
- XVG to D8fwNbyV6YxJk1aSiXftWTtdaPipsKn2Fa
- ANY ERC20-TOKEN to 0x9b8ee84329d77765a28bca188218c6c793875a8a

or donate via PayPal: https://www.paypal.me/robgeerts

User avatar
Derik
Posts: 2195
Joined: Friday 18 October 2013 23:33
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Arnhem/Nijmegen Nederland
Contact:

Re: Dashticz - Custom CSS

Post by Derik » 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?
Xu4: Beta Extreme antenna RFXcomE,WU Fi Ping ip P1 Gen5 PVOutput Harmony HUE SolarmanPv OTG Winddelen Alive ESP Buienradar MySensors WOL Winddelen counting RPi: Beta SMAspot RFlinkTest Domoticz ...Different backups

User avatar
Derik
Posts: 2195
Joined: Friday 18 October 2013 23:33
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Arnhem/Nijmegen Nederland
Contact:

Re: Dashticz - Custom CSS

Post by Derik » Saturday 06 January 2018 23:33

Dear All,

I did found the creative.css...[ very nice to pimp the settings... :-) ]
Only are there more people work with this pad?
Do you have nice settings?
Please share some:
One of my favorites:

Code: Select all

.trafficmap {	height: 100%;}
.col-xs-1.block_trafficmap, 
.col-xs-2.block_trafficmap
, .col-xs-3.block_trafficmap, .col-xs-4.block_trafficmap, .col-xs-5.block_trafficmap, .col-xs-6.block_trafficmap, .col-xs-7.block_trafficmap, .col-xs-8.block_trafficmap, .col-xs-9.block_trafficmap, .col-xs-10.block_trafficmap, .col-xs-11.block_trafficmap, .col-xs-12.block_trafficmap {

	padding-left: 13px !important;
    padding-right: 13px !important;
	height:1000px !important;
}
where i make the height to 1000 to enlarge the screenpart of google maps.. :-)
question can i place the creative, css in my custom map?
Xu4: Beta Extreme antenna RFXcomE,WU Fi Ping ip P1 Gen5 PVOutput Harmony HUE SolarmanPv OTG Winddelen Alive ESP Buienradar MySensors WOL Winddelen counting RPi: Beta SMAspot RFlinkTest Domoticz ...Different backups

User avatar
robgeerts
Posts: 1247
Joined: Saturday 24 January 2015 23:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: Dashticz - Custom CSS

Post by robgeerts » Monday 08 January 2018 22:04

You have to add your custom css, to custom.css in the custom-folder.
Otherwise it will be overwritten in nexr update.
Creator of Dashticz
Do you appreciate my work and want to buy me a beer?
Send:
- XVG to D8fwNbyV6YxJk1aSiXftWTtdaPipsKn2Fa
- ANY ERC20-TOKEN to 0x9b8ee84329d77765a28bca188218c6c793875a8a

or donate via PayPal: https://www.paypal.me/robgeerts

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests