Dashticz - Custom CSS

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

User avatar
htilburgs
Posts: 464
Joined: Tuesday 03 November 2015 11:01
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: Netherlands
Contact:

Dashticz - Custom CSS

Post by htilburgs »

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: 195
Joined: Wednesday 31 May 2017 16:06
Target OS: NAS (Synology & others)
Domoticz version: 2024.7
Location: NL
Contact:

Re: Dashticz - Custom CSS

Post by PieterS »

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?
Synology with Domoticz build (V2024.7) in Docker
Jmerino
Posts: 7
Joined: Monday 04 September 2017 0:37
Target OS: -
Domoticz version:
Contact:

Change font of news ??

Post by Jmerino »

Hi all,

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

Thanks
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: Change font of news ??

Post by robgeerts »

In custom.css:

Code: Select all

#newsTicker li {
font-size:16px !important;
}
User avatar
remb0
Posts: 499
Joined: Thursday 11 July 2013 22:21
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: Change font of news ??

Post by remb0 »

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

Re: Change font of news ??

Post by Jmerino »

Thanks. Perfect!!
Ingmar
Posts: 51
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 »

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: 51
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 »

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: 30
Joined: Friday 03 October 2014 22:51
Target OS: Raspberry Pi / ODroid
Domoticz version: beta
Contact:

Re: Dashticz - Custom CSS

Post by askmurphy »

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: 51
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 »

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: 30
Joined: Friday 03 October 2014 22:51
Target OS: Raspberry Pi / ODroid
Domoticz version: beta
Contact:

Re: Dashticz - Custom CSS

Post by askmurphy »

thanks!
jake
Posts: 742
Joined: Saturday 30 May 2015 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version: beta
Contact:

Re: Dashticz - Custom CSS

Post by jake »

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 7:18
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.8153
Location: France
Contact:

height

Post by freeshare »

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 7:18
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.8153
Location: France
Contact:

Re: height

Post by freeshare »

no solution on dashticz ?
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: height

Post by robgeerts »

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..
Derik
Posts: 1601
Joined: Friday 18 October 2013 23:33
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Arnhem/Nijmegen Nederland
Contact:

Re: Dashticz - Custom CSS

Post by Derik »

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
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: Dashticz - Custom CSS

Post by robgeerts »

Try:

Code: Select all

.block_9448_1 {      color:red !important; }
(I removed the quotes...)
Derik
Posts: 1601
Joined: Friday 18 October 2013 23:33
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Arnhem/Nijmegen Nederland
Contact:

Re: Dashticz - Custom CSS

Post by Derik »

robgeerts wrote: Tuesday 02 January 2018 9: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
Derik
Posts: 1601
Joined: Friday 18 October 2013 23:33
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Arnhem/Nijmegen Nederland
Contact:

Re: Dashticz - Custom CSS

Post by Derik »

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
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: Dashticz - Custom CSS

Post by robgeerts »

You have to add your custom css, to custom.css in the custom-folder.
Otherwise it will be overwritten in nexr update.
Post Reply

Who is online

Users browsing this forum: Google [Bot] and 1 guest