Dashticz - Custom CSS

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: robgeerts, htilburgs

User avatar
Derik
Posts: 2100
Joined: Friday 18 October 2013 23:33
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Arnhem/Nijmegen Nederland
Contact:

Re: Dashticz - Custom CSS

Post by Derik » Monday 08 January 2018 22:10

robgeerts wrote:
Monday 08 January 2018 22:04
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?
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

User avatar
robgeerts
Posts: 1233
Joined: Saturday 24 January 2015 23:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: Dashticz - Custom CSS

Post by robgeerts » Monday 08 January 2018 22:20

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
Creator of Dashticz
Do you appreciate my work and want to buy me a beer?
Send:
- XVG to D8fwNbyV6YxJk1aSiXftWTtdaPipsKn2Fa
- ANY ERC20-TOKEN to 0x9b8ee84329d77765a28bca188218c6c793875a8a

or donate via PayPal: https://www.paypal.me/robgeerts

User avatar
Derik
Posts: 2100
Joined: Friday 18 October 2013 23:33
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Arnhem/Nijmegen Nederland
Contact:

Re: Dashticz - Custom CSS

Post by Derik » Monday 08 January 2018 22:22

@ rob:
stupid as i am:
"Just move that code ;)"
How simple can life be...:-)
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

RichardvdWeerd
Posts: 1
Joined: Sunday 14 January 2018 22:23
Target OS: Raspberry Pi
Domoticz version: 3.8740
Location: Assen
Contact:

Re: Dashticz - Custom CSS

Post by RichardvdWeerd » Thursday 18 January 2018 23:15

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
column1.PNG (345.84 KiB) Viewed 1254 times

User avatar
robgeerts
Posts: 1233
Joined: Saturday 24 January 2015 23:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

Re: Dashticz - Custom CSS

Post by robgeerts » Monday 22 January 2018 22:15

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.
Creator of Dashticz
Do you appreciate my work and want to buy me a beer?
Send:
- XVG to D8fwNbyV6YxJk1aSiXftWTtdaPipsKn2Fa
- ANY ERC20-TOKEN to 0x9b8ee84329d77765a28bca188218c6c793875a8a

or donate via PayPal: https://www.paypal.me/robgeerts

User avatar
RobertK
Posts: 17
Joined: Wednesday 31 January 2018 23:55
Target OS: Raspberry Pi
Domoticz version: 3.8153
Contact:

Re: Dashticz - Custom CSS

Post by RobertK » Sunday 11 February 2018 21:39

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
Capture.JPG (14.74 KiB) Viewed 1089 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.

User avatar
htilburgs
Posts: 509
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by htilburgs » Monday 12 February 2018 22:50

RobertK wrote:
Sunday 11 February 2018 21:39

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

User avatar
RobertK
Posts: 17
Joined: Wednesday 31 January 2018 23:55
Target OS: Raspberry Pi
Domoticz version: 3.8153
Contact:

Re: Dashticz - Custom CSS

Post by RobertK » Tuesday 13 February 2018 0:17

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 :roll: .
Thanks for pointing me in the right direction!

User avatar
htilburgs
Posts: 509
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by htilburgs » Tuesday 13 February 2018 8:38

RobertK wrote:
Tuesday 13 February 2018 0:17
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 :roll: .
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;
}
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

User avatar
RobertK
Posts: 17
Joined: Wednesday 31 January 2018 23:55
Target OS: Raspberry Pi
Domoticz version: 3.8153
Contact:

Re: Dashticz - Custom CSS

Post by RobertK » Tuesday 13 February 2018 16:47

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

User avatar
htilburgs
Posts: 509
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by htilburgs » Tuesday 13 February 2018 19:09

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

User avatar
DewGew
Posts: 204
Joined: Thursday 21 April 2016 12:01
Target OS: Raspberry Pi
Domoticz version: V3.8799
Location: Sweden
Contact:

Re: Dashticz - Custom CSS

Post by DewGew » Tuesday 13 February 2018 19:26

It maybe works with .block124 .title .span or similar?
Raspberry Pi 2B - domoticz - Aeon Labs Z-Stick GEN5 - RFlink gateway
NanoPi NEO-air - domoticz - REGO6XX interface

User avatar
htilburgs
Posts: 509
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by htilburgs » Wednesday 14 February 2018 16:16

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

User avatar
RobertK
Posts: 17
Joined: Wednesday 31 January 2018 23:55
Target OS: Raspberry Pi
Domoticz version: 3.8153
Contact:

Re: Dashticz - Custom CSS

Post by RobertK » Thursday 15 February 2018 0:50

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.

User avatar
htilburgs
Posts: 509
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by htilburgs » Thursday 15 February 2018 7:44

RobertK wrote:
Thursday 15 February 2018 0:50
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.
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

schorrie
Posts: 7
Joined: Friday 09 February 2018 15:15
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post by schorrie » Friday 23 February 2018 0:48

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

schorrie
Posts: 7
Joined: Friday 09 February 2018 15:15
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - Custom CSS

Post by schorrie » Friday 23 February 2018 1:00

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;

User avatar
htilburgs
Posts: 509
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by htilburgs » Friday 23 February 2018 8:05

Code: Select all

blocks[s1] = {}
You forgot the =
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

User avatar
DewGew
Posts: 204
Joined: Thursday 21 April 2016 12:01
Target OS: Raspberry Pi
Domoticz version: V3.8799
Location: Sweden
Contact:

Re: Dashticz - Custom CSS

Post by DewGew » Friday 23 February 2018 8:39

htilburgs wrote:
Friday 23 February 2018 8:05

Code: Select all

blocks[s1] = {}
You forgot the =

Code: Select all

blocks['s1'] = {}

Also the '
Raspberry Pi 2B - domoticz - Aeon Labs Z-Stick GEN5 - RFlink gateway
NanoPi NEO-air - domoticz - REGO6XX interface

User avatar
htilburgs
Posts: 509
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - Custom CSS

Post by htilburgs » Friday 23 February 2018 8:57

DewGew wrote:
Friday 23 February 2018 8:39
htilburgs wrote:
Friday 23 February 2018 8:05

Code: Select all

blocks[s1] = {}
You forgot the =

Code: Select all

blocks['s1'] = {}

Also the '
:D
See the Dashticz Wiki for the correct notation:
http://www.domoticz.com/wiki/Dashticz_V ... g_-_Blocks
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

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests