Domoticz

Derik wrote: ↑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?

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

Spoiler: show

.block_3919.0 {
color:blue !important;
}

.block_3919.30 {
color:red !important;
}

Spoiler: show

mvveelen wrote: ↑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:






What can I do to preserve the same size for the buttons when I hover over them or click them ?

jake wrote: ↑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

jake wrote: ↑Monday 29 October 2018 22:13

jake wrote: ↑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

Before posting the above question, I first searched the forum. I was surprised to see my own post from about a year ago.
Anyway, the problem is still the same and I would like some help to prevent the colored background to grow on me.

Lokonli wrote:

jake wrote: ↑Monday 29 October 2018 22:13 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);
}

I'm not exactly sure what you try to achieve, but did you try with ' content-box' instead of 'padding-box'?

jake wrote: ↑Monday 29 October 2018 23:40

Lokonli wrote:

jake wrote: ↑Monday 29 October 2018 22:13 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);
}

I'm not exactly sure what you try to achieve, but did you try with ' content-box' instead of 'padding-box'?

Well, every block on the panel hat it's own background, to make it stand out from the desktop behind it. Anyway, from the wiki I took this custom.css example to color the background differently on special occasions.
At the moment the principle works: as soon as the heater is on, the gasmeter counter shows a red background, for me an indicator that we are using gas (although the meter itself only updates once an hour my OTGW knows when the heater is on).

The problem is that the mentioned custom.css code makes this original background rectangle a bit bigger, like it is filling the background, but also wit a fat edge around it in the same color. Therefore the red colored background is bigger than the default 'black' background. When 2 blocks besides eachother get a red background, they even melt together in color, because their edges touch eachother in that case.
I would like to stay within the original block boundary, not grow any size, just change color.

I agree that the word 'padding' already implies 'fattening up'. Itried the suggested 'content-box', but that doesn't help anything in the size change. The colors still work fine, but the rectangle sill increases in size when it's colored differently than the default background.

gasverbruik {
 background: rgba(255,128,128,0.3) !important;
 background-clip: padding-box !important;
}

Lokonli wrote:

jake wrote: ↑Monday 29 October 2018 23:40

Lokonli wrote: I'm not exactly sure what you try to achieve, but did you try with ' content-box' instead of 'padding-box'?

Well, every block on the panel hat it's own background, to make it stand out from the desktop behind it. Anyway, from the wiki I took this custom.css example to color the background differently on special occasions.
At the moment the principle works: as soon as the heater is on, the gasmeter counter shows a red background, for me an indicator that we are using gas (although the meter itself only updates once an hour my OTGW knows when the heater is on).

The problem is that the mentioned custom.css code makes this original background rectangle a bit bigger, like it is filling the background, but also wit a fat edge around it in the same color. Therefore the red colored background is bigger than the default 'black' background. When 2 blocks besides eachother get a red background, they even melt together in color, because their edges touch eachother in that case.
I would like to stay within the original block boundary, not grow any size, just change color.

I agree that the word 'padding' already implies 'fattening up'. Itried the suggested 'content-box', but that doesn't help anything in the size change. The colors still work fine, but the rectangle sill increases in size when it's colored differently than the default background.

In case you didn't solve it yet: Add '!important' to the background-clip line, like

Code: Select all

gasverbruik {
 background: rgba(255,128,128,0.3) !important;
 background-clip: padding-box !important;
}