Custom Widget: Switch-Dim-Color

Apps & Services HABPanel
,
6

The widget has a config called shadow format.

Default is
0px 0px 6px 3px rgba(0, 95, 255,0.8)

No shadow is easy just enter the word none.

The rgba is what you want to play with, those four numbers are the red,green,blue values with the last number being the transparency amount. 0.8 is 80% solid and 20% see through.

You can use online color pickers to help you choose.

I went this way so you can change the shadow colour or any aspect of the shadow on groups of controls. You may want fans to be one colour and lights to be another.

Many Other ways you can play with the shadow are here:

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

7

Thank! I am ashamed that I missed this, sorry :slight_smile:

1 Like
8

@matt1 no answer to me? :frowning:

9

See the first post again, it has been edited to make it easier.

10

New changes to the widget and the css files just uploaded and did some work to make the widget display better between large screens, tablets and mobile devices. Not perfect yet due to reusing of the basic widgets don’t allow % based resizing and also some don’t allow any resizing via css. Will look at it some more after moving to openhab 3.

11

finally i’ve tried everything and it’s almost perfect! just 3 questions:

is it possible to make your widget to look like the one on the left?

image

i mean move the item name (and make it in bold) a little bit high and aligned to left and also add the status of the item below the item name. also if is possible to increase the icon dimensions on the top left.

anyway, you did a fantastic job! next step is to make the widget for thermostats :wink:

12

You can easily do all those thing if you learn CSS, it would take you a few hours at the most. Have a look at the switch-glowing lines in the css files I provided and the absolute positions are what your after. The only things that would need a change to the widget are the icon size and the status, the rest are all possible with css tweaks. You can try the two css files to see how easy it is to create a new look. You can create a third.

@rubenfuser
Widget code is updated so now you can get it 100% how u want it to be with just CSS code.

13

yes i have almost finished to adapt your widget :wink: just one question, ihow can i remove transaprency from active/inactive buttons? i want solid white or solid black when button are ON or OFF…

thanks!

14

Replied in the other thread you asked the same question.

15

great work mate,how can i change the font size of the widget?I want the font size little bigger for my switches.

16

Google css and changing text size, 10 minutes and you should be a pro at doing it no need to edit widget it’s all easy via css.

17

i have spent almost an hour but i didnt find a way to change font size via css.I am interested to change font size only on your widget leaving everything else as it is.Thank you.

18

Edit widget code (not the css of the theme) abd look for “font-size” :wink:
Soon i will upload the “simplified version” of Skinah widget :wink:

19

tried to edit widget code,no reference for label’s “font-size”

20

Small snippet from the widget…

<span class="glow-switch-label-on"

So you can use the class to apply text change or the h5, both ways should work.

.glow-switch-label-on{
font-size: 150% !important;
}

.glow-switch-label-off{
font-size: 150% !important;
}

I dont know CSS very well but if that does not work, just have a play and then post what works when you figure it out.

21

yeap that did the job,thank you

22

I imported this widget. Wanting to use it to control my wiz WiFi bulbs and smart plug. Made a new item and found it on the network and it says online . Linked the Chanel’s but I’m not getting a response from the light. Wiz app controls it but openHAB doesn’t. Although it shows on and off state

23

Do you have a suggestion of a good way to learn the CSS that is applicable to its use within habpanel? I’ve got pluralsight subscription access but there are of course a multitude of courses available - I could spend days on all of them :slight_smile:

24

See here.

the good news is, CSS is used the same way for all websites and it is not unique for just habpanel. You learn it and it will help you if you ever want to do web design.

25

Actually I more meant the CSS specifics relating to habpanel. Luckily I was searching around and found this link which was very helpful