Dashticz - Custom CSS

[htilburgs]

Section for questions about custom CSS modifications in Dashticz v2.0

[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?

[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]

In custom.css:

Code: Select all

#newsTicker li {
font-size:16px !important;
}

[remb0]

nice

[Jmerino]

Thanks. Perfect!!

[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?

[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...

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

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;
}

[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]

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);
}

[askmurphy]

thanks!

[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]

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]

no solution on dashticz ?

[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]

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?

[robgeerts]

Try:

Code: Select all

.block_9448_1 {      color:red !important; }

(I removed the quotes...)

[Derik]

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?

[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?

[robgeerts]

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