Domoticz Community Forum - Support & Discussion

Posted: **Monday 04 September 2017 9:32**

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

Posted: **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?

Posted: **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

Posted: **Sunday 01 October 2017 12:50**

In custom.css:

Code: Select all

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

Posted: **Sunday 01 October 2017 13:23**

nice

Posted: **Sunday 01 October 2017 16:00**

Thanks. Perfect!!

Posted: **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?

Posted: **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

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

Posted: **Thursday 02 November 2017 13: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 ?

Posted: **Thursday 02 November 2017 21: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);
}

Posted: **Friday 03 November 2017 10:47**

thanks!

Posted: **Friday 03 November 2017 22: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

Posted: **Saturday 04 November 2017 7: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.

Posted: **Sunday 05 November 2017 20:39**

no solution on dashticz ?

Posted: **Wednesday 08 November 2017 23: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..

Posted: **Sunday 31 December 2017 18: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?

Posted: **Tuesday 02 January 2018 9:25**

Try:

Code: Select all

.block_9448_1 {      color:red !important; }

(I removed the quotes...)

Posted: **Tuesday 02 January 2018 12:05**

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?

Posted: **Saturday 06 January 2018 22: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?

Posted: **Monday 08 January 2018 21:04**

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

Domoticz Community Forum - Support & Discussion

Dashticz - Custom CSS

Dashticz - Custom CSS

Re: Dashticz - Custom CSS

Change font of news ??

Re: Change font of news ??

Re: Change font of news ??

Re: Change font of news ??

Re: Change font of news ??

Re: Change font of news ??

Re: Dashticz - Custom CSS

Re: Dashticz - Custom CSS

Re: Dashticz - Custom CSS

Re: Dashticz - Custom CSS

height

Re: height

Re: height

Re: Dashticz - Custom CSS

Re: Dashticz - Custom CSS

Re: Dashticz - Custom CSS

Re: Dashticz - Custom CSS

Re: Dashticz - Custom CSS