style box height

[pvklink]

Hi,
i have a device with the content of a weatheralarm. Lot of text i below the box. Is there a way the change the height of the box or to autoadjust or scrool the box?

[felix63]

I use the Machinon theme which has scrolling included. Works a treat!

[pvklink]

ok, i am gonna try it! how do i install/use that?

[felix63]

Hi, you can follow the instructions on the wiki or on github. It does require that you run domoticz on a Raspberry I think .It's a very nice theme. Added some icons and tweaked the colours a little..

[pvklink]

OK,
1. does this effect my current installatio?
2. When i want the old config, simple change the theme ?
3. the doc on github/wiki only mentions domoticz not dashticz, is this gonna work on dashticz?

[Lokonli]

OK,
1. does this effect my current installatio?
2. When i want the old config, simple change the theme ?
3. the doc on github/wiki only mentions domoticz not dashticz, is this gonna work on dashticz?

3) No

You want to show the value of a Domoticz text device in a bigger Dashticz block?

[HansieNL]

With Dashticz you can have different configurations. Just place your config files in the folder custom_2 and load index2.html.

[pvklink]

@lokonli : yes

[felix63]

Sorry. I was quick in answering and not reading properly so I missed the Dashticz bit. Machinon is a theme for Domoticz and has nothing to do with Dashticz. So sorry for wasting your time.

[pvklink]

ok, no problem!

[pvklink]

I see that the 'log' does has a slider. Is it possible to use this for a switch with text like the weather(alarm)

[Lokonli]

@lokonli : yes

If the domoticz text id is 124 then to change the block height add the following to custom.css:

Code: Select all

.block_124 {
  height: 500px !important;
}

If you want to add a scroll bar:

Code: Select all

.block_124 {
  height: 200px !important;
}

.block_124 .col-data {
  height: 100%;
  overflow-y: auto;
}

[pvklink]

thanks!

[pvklink]

Works perfect! Thank you lokonli!

Does this also works for default buildin blocks like buttons.webcam and calenders.fam?
i tried to change height in calender.fam, that did nothing...

calendars.fam = { maxitems: 6, title: 'Familie kalender', url:'https://calendar.google.com/calendar/em ... x',icalurl: 'xxx.ics' }

buttons.webcam1 = {width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'xxx', url: 'xxx'}

[Lokonli]

Works perfect! Thank you lokonli!

Does this also works for default buildin blocks like buttons.webcam and calenders.fam?
i tried to change height in calender.fam, that did nothing...

calendars.fam = { maxitems: 6, title: 'Familie kalender', url:'https://calendar.google.com/calendar/em ... x',icalurl: 'xxx.ics' }

buttons.webcam1 = {width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'xxx', url: 'xxx'}

To be able to select the calendar you have to add a key-parameter, for instance:

Code: Select all

calendars.fam = { key:'mycal', maxitems: 6, title: 'Familie kalender', url:'https://calendar.google.com/calendar/embed?height=2000&wkst=1&bgcolor=%23666666&src=xxxx',icalurl: 'xxx.ics' }

Then in custom.css add the following:

Code: Select all

div[data-id='calendars.mycal'] {
  height: 100px;
}

div[data-id='calendars.mycal'] .items {
  height: 100%;
  overflow-y: auto;
}

For a button you have to add the key parameter as well:
buttons.webcam1 = {key:'cam', width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'xxx', url: 'xxx'}

and in custom.css:

Code: Select all

div[data-id='buttons.cam'] {
  height: 100px;
  overflow-y: auto;
}

[pvklink]

Both did not work.. put them on the bottom of my css
also tried !important after 400px did not work either..

div[data-id='calendars.fam'] {height: 400px;}
div[data-id='calendars.fam'] .items {height: 100%;overflow-y: auto;}

div[data-id='buttons.webcam1'] {height: 400px;overflow-y: auto;}
div[data-id='buttons.webcam2'] {height: 400px;overflow-y: auto;}

[Lokonli]

Did you add key: 'fam', key:'webcam1' and key 'webcam2' to your button and calendar definitions?

[pvklink]

oeps..
now i understand how it works..
going to add it after work...

[pvklink]

mmm.. still not working,,

css
div[data-id='calendars.divfam'] {height: 150px;}
div[data-id='calendars.divfam'] .items {height: 100%;overflow-y: auto;}

js
calendars.fam = { key:'divfam',maxitems: 6, title: 'Familie kalender', url: 'x',icalurl: 'x' }

The bottons do work!
buttons.webcam1 = {key:'divcam1', width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'x', url: 'x'}
buttons.webcam2 = {key:'divcam2', width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'x', url: 'x'}

div[data-id='buttons.divcam1'] {height: 300px;overflow-y: auto;}
div[data-id='buttons.divcam2'] {height: 300px;overflow-y: auto;}

[Lokonli]

mmm.. still not working,,

css
div[data-id='calendars.divfam'] {height: 150px;}
div[data-id='calendars.divfam'] .items {height: 100%;overflow-y: auto;}

js
calendars.fam = { key:'divfam',maxitems: 6, title: 'Familie kalender', url: 'x',icalurl: 'x' }

The bottons do work!
buttons.webcam1 = {key:'divcam1', width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'x', url: 'x'}
buttons.webcam2 = {key:'divcam2', width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'x', url: 'x'}

div[data-id='buttons.divcam1'] {height: 300px;overflow-y: auto;}
div[data-id='buttons.divcam2'] {height: 300px;overflow-y: auto;}

The buttons are working, but sizing of the calendar doesn't work. Correct?

Do you see the calendar? It's displayed as normal?

If you right-click on your calendar and then on 'inspect' a window should open.
Can you make a screenshot of the element starting with:
<div data-id="calendars.....

and the few lines underneath.