New design talent wanted!

[Fejitatete]

Hi all,

I had a challenge for a kind web designer cause I’m lame at web design but I love pretty UI : reproduce this very beautiful template of panel made with CometVISU/Knx and adapt it to HABPanel/OpenHAB.

Is someone ready for this challenge ?

Cheers,

Feji.

[xsherlock (Maciej Eckstein)]

holly s*it, that is one of the nicest panels I have seen so far.

[Fejitatete]

how right you are !!!

[Fejitatete]

No one enough skilled for that challenge ?

C’mon,

There is a beer pack in sight, maybe two

[kubawolanin]

I’m on it

But first, we’re on track of making it easier to make themes for HABPanel. Stay tuned

[pahansen (Paul Hansen)]

Oooooh. Very nice. I’ll be dusting off my css skills to work something custom up for sure.

[jirm (Jose I Rol)]

OOOOWWWW Kubawolanin !!! .Really looks awesome. So far I´m closely tuned to that work. Great !

[Fejitatete]

Glad to see there is still Hero xD. I look forward to all the places where it may lead.

[gravidigit (Gravidi)]

Hi @Fejitatete and @kubawolanin

awesome templates!

You would make the templates available for download please?

Thanks

[kubawolanin]

Just wait some more time
It’s already merged to HABPanel repository, I’m sure @ysc will announce all the new features.

[ysc (Yannick Schaus)]

Yes, but the “Orange tree” theme you made is already bundled in, so users only have to switch to it. I’ll make a post about other more developer-oriented additions.

Edit: ended up explaining most of these things here:

Habpanel standard icon colors

As it happens, there is a new (undocumented) way of accessing these colors in a template since last week when the themes were rewritten by @kubawolanin: The syntax below: {{ variable | themeValue:'primary-color' }} (leave out the {{ }} if you’re already in an expression, obviously) will give you the “primary color” of the current theme (for example for the Material theme it will be red) if variable is not set. This is useful so you can replace variable with e.g. a color config option of your…

Habpanel standard icon colors

Oh, and you can now also easily override some of these variables with the new “additional stylesheet” option in HABPanel’s additional settings. [image] You cannot provide your stylesheet inline because “reasons”, rather you have to write a file like below and put it in the static files directory of your openHAB server (conf/html): :root { --body-bg: #333; --primary-color: #888888; --box-bg: rgba(255, 255, 255, 0.1); --icon-color-filter: invert(90%) sepia(0%) saturate(0…

[Dominic_Bonneau]

Hey kubawolanin, how did you do to only change the color of the icon instead of the whole square when activated ? is this something easy to make or I need te reprograms all my icon !?

[Andrew_Pawelski]

@kubawolanin can you tell me the values to use for a CSS filter to match dark orange for svg images?

[ysc (Yannick Schaus)]

Edit: I started a new topic about the implementation of this in the HABPanel Examples category

HABPanel Examples

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

This is another example of using an additional stylesheet file (a new option in 2.1) along with custom widgets to change HABPanel’s appearance significantly. The design has been first suggested here: New design talent wanted! Screenshot [image] Note: it’s optimized for a 16:10 aspect ratio, YMMV. Instructions First, create a new file in conf/html and name it orange-tree-overrides.css with the content below: /* Use with Orange Tree theme and switch-leftborder & slider-leftborder custom w…

[kubawolanin]

Amazing job, man!
Well done.

I love these custom widgets especially.

Maybe it’d be worth to update orange-tree with your overrides? Looks a lot better!

[furax54]

@ysc : Why do you define buttton and slider css style in overrides.css and not in widget ?

[ysc (Yannick Schaus)]

Because when you’re defining it in the widget it gets repeated every time you spawn the widget.
Those widgets simply suppose you’re aware of the associated stylesheet.

This is currently a bit tricky to setup, but I’m envisioning as a mid-term goal for HABPanel a way to distribute complete “skins” including styles, widgets, eventually additional iconsets and so on. You would simply install the skin (which could be a standard openHAB addon/OSGi bundle) and everything would become available at once.

[ysc (Yannick Schaus)]

@kubawolanin

Maybe it’d be worth to update orange-tree with your overrides? Looks a lot better!

I’ll let you be the judge, after all it’s your theme

[Fejitatete]

It takes shape, yummy xD.

[Benjy (Ben Clark)]

Just tested it since I’m thinking of adding a panel to the house! I’ll probably squash those dummy widgets into one though. Nice one!