Overall "skin" based on the Orange Tree theme with custom widgets and styles

oeo · March 14, 2018, 5:19am

Just change the downloaded css- file like you prefer your colors.

trollmar1 · April 11, 2018, 8:22pm

Hi,

great stuff!! has somebody created a single Button widget?
For example to start a scene or something else

varneyb · August 29, 2018, 5:05pm

What size screen do you use to display this?

Tolotos · October 28, 2018, 12:37pm

My switches are only grey. The log shows state changes of the item if I click but the color of the switch symbol is not changing. Any idea why?

Edit: I added a text to the item like “My switch [%s]”. Now the colors changes.

Tolotos · October 28, 2018, 1:24pm

Is a solution for this available?
The mix looks not really pretty:

thorsten_gilfert · November 21, 2018, 7:16pm

Hi, I’d like to share my custom dummy widget with a left bracket.

dummy-widget

You will need to add this to your style sheet:

.dummy-leftborder {
    margin-top: 1em;
    color: var(--primary-color);
}

dummy-leftborder.widget.json (646 Bytes)

Tolotos · November 24, 2018, 3:33pm

If i use %.1f or %d as format I see no values. Only %s works but this delivers e.g 10 decimals for air pressure.

thorsten_gilfert · November 24, 2018, 4:31pm

%.1f °C

works for me:

Number  OS_Garden_Temperature  "Außentemperatur [%.1f °C]" <temperature> (gAirTemperature)    { channel="homematic:HM-WDS10-TH-O:ccu:KEQXXXXXXX:1#TEMPERATURE" }

Tolotos · November 24, 2018, 4:37pm

Number:Pressure Aussenluftdruck_Karlsruhe "Außenluftdruck KA [%d %unit%]" { channel="yahooweather:weather:karlsruhe:pressure" }

Sample

bfksoql · December 21, 2018, 9:42am

Hello,
How you achieve bigger backdrop icon size in dummy elements at right side (sensor section) ?

mazakane · January 8, 2019, 1:02pm

Hi, I do love your theme and already implement it for my home! Thanks for your efforts. But I do have an issue regarding visibility for the charts, I cannot see the orange dots on the chartline like in your picture, what did I do wrong?

I can see the dot if I hover with the mouse, but that’s not the way it should be?

Regards

Fichte07 · January 15, 2019, 7:08pm

First of all, thanks for this great Theme. I worked on it a little bit and created some first dashboards.
Here some impressions…

Now i want to add a navigation menu on the top. I created a little mockup for it…

My main challenge atm is how to link the different icons to different dashboards AND to show a different icon(e.g. ICONNAME_active with different color) for the active dashboard.
Any ideas or code snipptes around?
Thx in advance.

Regards,
Fichte

Fichte07 · January 20, 2019, 2:17pm

ping

guny74 · April 14, 2019, 8:11am

Hello,

I tried to build a “list”-leftborder like the “s.m.a.r.t status” but I unsucceded to position the “summary label”
at the end.

Could you share your widget or code ?

Thanks

Regards
Thorsten

MadFrankie · April 15, 2019, 11:17am

My main challenge atm is how to link the different icons to different dashboards AND to show a different icon(e.g. ICONNAME_active with different color) for the active dashboard.
Any ideas or code snipptes around?

I’m currently looking for the same, I know in javascript you can get the current url by

window.location.href

and the following should I believe get the last bit of URL, after the last / - which is what we need to know what page / dashboard we are on

window.location.search.substring(1)

However, try as I might I can’t get it to work…I’m hoping someone out there can whip it in to a Habpanel style code and get it working???

Virendra_Panchal · May 24, 2019, 5:16am

Can i get the HTML code for the orange tree dashboard

Kimzer · May 28, 2019, 4:38am

This was really neat. Could you share please?

Francesco_Salvadori · July 30, 2019, 8:58pm

Very beautiful dashboard.
I’m a beginner and not expert in CSS/HTML/Angular.
Just some info-.

how did you created the widget network with the list of active IPs?
how did you created the titles (ex. network with bottom line and icon)?

Thanks for your shared experience

sebastian13 · December 7, 2019, 9:31pm

Hi guys,
I tried to use the Orange Tree theme. I want to use HABPanel on a tablet and Amazon Echo show 8 and my mobile phone.

This is my dashboard, which looks good on a tablet:

Using the mobile breakpoint it looks like this:

Is it possible to get a break that contains the content withe the red, green and blue border:

Thanks

rubbens16 · March 3, 2020, 9:52pm

I love the design. But how can I make the CSS responsive so it also shows correctly on a phone?