Dashticz - Custom CSS

[Derik]

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

Yep i do understand that...
Only in the creative there are a lot options possible [ say thanks to you!!]
An i can save the creative to.
And place the thing back after a update,:-)
Or is this a stupid idea?

[robgeerts]

I dont want to say its stupid but not very handy
What if I add something to creative.css? You'll miss that if you place back your backup..

BUT, everything that is possible in creative.css is of course also possible to custom.css...
Just move that code

If it isnt working, try adding !important-rules

[Derik]

@ rob:
stupid as i am:
"Just move that code "
How simple can life be...

[RichardvdWeerd]

Hi all,

My first post here. I'm a newby as it comes to dashticz. First I want to make big compliments to Rob for making this great application.

Now playing for a week with dashticz, I discovered a lot. Took me three days to get my calendar on the screen. After exporiting, removing and importing my google calendar it finally worked. It appears there was an error in the google calendar.

At this moment there is just one issue I can't figure out: Displaying domoticz switches places the text under the icon and the text is shown outside the box. Widening the box (5 or 6) displays the text next to the icon. My preferred display, but with a lot of space between the icon and the text.

So my question: How to narrow the space between the icon and the text, so that there can be three (or four) boxes in one row. The pictures shows the first column of the screen. Columns width = 5. The boxes on the first row have width 6, the rest of the boxes have the same settings (width =4).

Grtz
Richard

column1.PNG (345.84 KiB) Viewed 4742 times

[robgeerts]

Whats your screen width?
By the way, in latest version (beta) it is possible to add something like this in config:

Code: Select all

blocks['174'] = {};
blocks['174']['width'] = 4;
blocks['174']['width_smartphone'] = 6;

This means that device 174 (IDX) has a column-width of 4 (like the switches in the second row (and third etc.) in your screenshot) but on smaller screens they will have a column-width of 6.

[RobertK]

Hi all,

Confused all over the place currently, I hope someone can give this CSS rookie some hints. I'm trying to add the Raspberry CPU (temp, usage etc)
to the dashboard. I have created the hardware device (Motherboard) and have the IDx's 347 and 348 assigned to these 2 devices.
I've added it to the dashboard successfully like this:

Capture.JPG (14.74 KiB) Viewed 4577 times

CONFIG.js contains:

Code: Select all

// RPI Info //
blocks[347] = {}        // CPU %
blocks[347]['width'] = 6;
blocks[347]['title'] = 'CPU usage';
blocks[347]['image'] = 'rpi.png';

blocks[348] = {}        // CPU temp
blocks[348]['width'] = 6;
blocks[348]['title'] = 'CPU temp';
blocks[348]['image'] = 'tuxpi.jpg';

and a partial custom.css for block 347 looks like:

Code: Select all

.block_347 .title {
        text-align: center !important;
        vertical-align: middle;
        font-size: 15px !important;
        font-weight: 900 !important;
        color: yellow;
}

Question number 1:
I would think that the title of this block should contain 'CPU usage', like the CONFIG.js file mentions. However, it seems that this
.title property in the CSS file changes the behavior of the percentage!? The data part (percentage number) has now changed its color to yellow instead
of the 'CPU usage' text, which actually is supposed to be the title of the block...?
Does anyone know if this is expected or did I skip a step somewhere?

Question number 2:
How can I change the size of the image rpi.png in this block? I have tried several things in custom.css like:

Code: Select all

.block_347 .image {
        width: 200% !important;
}

or

Code: Select all

.block_347 .image {
        height: 50px !important;
        width: 50px !important;
}

But image size doesn't change one bit with those settings.
Can anyone provide a hint how I can change an image in a block? Is '.image' not the right property to adjust such image properties inside a block?

Many thanks,
Robert

EDIT: Question number 1 is solved. RTFM...: I just found the required setting for that:

Code: Select all

blocks[347]['switch'] = true;

This switches the title and data part of the block.

One down, one to go.

[htilburgs]

Question number 2:
How can I change the size of the image rpi.png in this block? I have tried several things in custom.css like:

Try, this probably will work....

Code: Select all

.block_347 img.icon,
.block_348 img.icon {
	height: 50px !important;
	width: 50px !important;
}

[RobertK]

Thanks! img.icon ... I would not have guessed that.
It works after I also increased max-width for img.icon (otherwise the width of the image did not change, only the heigth changed).

Code: Select all

img.icon {
max-width: 50px !important
}

And now I have to figure out how to shift the title and data parts a bit, such that the image and the text do not overlap .
Thanks for pointing me in the right direction!

[htilburgs]

Thanks! img.icon ... I would not have guessed that.
It works after I also increased max-width for img.icon (otherwise the width of the image did not change, only the heigth changed).

Code: Select all

img.icon {
max-width: 50px !important
}

And now I have to figure out how to shift the title and data parts a bit, such that the image and the text do not overlap .
Thanks for pointing me in the right direction!

Use something like:

Code: Select all

.block_347 .title,
.block_348 .title {
	margin-left: 10px !important;	
}
.block_347 .state,
.block_348 .state {
	margin-left: 10px !important;
}

[RobertK]

Thanks, but unfortunately that only works for the title. The values (CPU usage and temperature) are apparently not a 'state' value.
Looking at the output with DOM explorer shows:

Code: Select all

<div class="col-xs-8 col-icon"...<\div>
    <strong class="title">CPU usage</strong>
    <br />
    <span>2.08%</span>
</div>

Other elements, like on/off switches, do indeed have a state class which I can adjust, but not these ones for some reason...

[htilburgs]

Ok, I see.
There is no class defined for the value. Maybe @robgeerts can add a class for this, so we can use it in custom.css
I'm currently to busy to look into the code myself on the github page.

[DewGew]

It maybe works with .block124 .title .span or similar?

[htilburgs]

I created a PR so the <span> gets the class="value" and can be use in the custom.css
https://github.com/Dashticz/dashticz_v2/pull/272/files

[RobertK]

Thanks!
The current beta version of the getStateBlock() routine appears to be too different from the (stable) version which I use, to cherrypick the changes
and try them out. I will try with a full beta version (including these changes) later this week.
Thanks for picking this us so quick.

[htilburgs]

Thanks!
The current beta version of the getStateBlock() routine appears to be too different from the (stable) version which I use, to cherrypick the changes
and try them out. I will try with a full beta version (including these changes) later this week.
Thanks for picking this us so quick.

You can install the beta in other directory, so you always have the stable version to fallback to.

See the wiki how to install beta with “git clone” in other directory.

[schorrie]

Question: how do you change the height of blocks in Dashticz V2.
can't figure it out

[schorrie]

Question: how do you change the width of a scene/group block

I have a scene/group in domoticz to swith multiple lights, IDX input with dashticz is with sIDX, but when i try this, dashticz board is not showing.
blocks[4] = {}; //aanpassing block 4
blocks[4]['width'] = 12; //aanpassing block IDX2 breedte
blocks[s1]{};
blocks['s1']['width'] = 12;

[htilburgs]

Code: Select all

blocks[s1] = {}

You forgot the =

[DewGew]

Code: Select all

blocks[s1] = {}

You forgot the =

Code: Select all

blocks['s1'] = {}

Also the '

[htilburgs]

Code: Select all

blocks[s1] = {}

You forgot the =

Code: Select all

blocks['s1'] = {}

Also the '

See the Dashticz Wiki for the correct notation:
http://www.domoticz.com/wiki/Dashticz_V ... g_-_Blocks