Cheers, I had managed to find another post where you pointed it out so had got it working.
Question about CSS for the sliders where/what do I change to adjust the width / style of the slider. Your images at the start of this have a different style to the ones I am getting. I can move the title, max and min values etc, even the position of the slider but I cant change the slider itself.
the style from a widget shouldnt be changed in the widget itselve but in the skin or by changing it in the dashboard.
in your skin you need to have this:
new_input_slider_title_style: $style_title
new_input_slider_title2_style: $style_title2
new_input_slider_minvalue_style: $style_title
new_input_slider_maxvalue_style: $style_title
new_input_slider_value_style: $style_title
new_input_slider_slider_style: ""
new_input_slider_container_style: ""
new_input_slider_widget_style: $background_style
all those default vars can be changed with any valid css.
the result is that you create a new default view for the widget.
if you then want to change 1 specific widget you use:
your_widget_name:
widget_style: new_input_slider
entity: your_entity
title: ""
title2: ""
title_style: ""
title2_style: ""
minvalue_style: ""
maxvalue_style: ""
value_style: ""
slider_style: ""
container_style: ""
widget_style: ""
in all the style variables you can put any valid css.
so when you want to change how the slider looks?
then you put the css for that in slider_style or in new_input_slider_slider_style.
if you want to learn what valid css is for the slider?
you can look up a lot here:
https://www.w3schools.com/howto/howto_js_rangeslider.asp
Hi @ReneTode, thanks very much for the light with brightness widget, itâs exactly the functionality I was looking for. Iâm wondering if you could help me with the configuration - Iâd like to apply the some styles to the widget, so I currently have in my .dash file:
living_room_floor_lamp:
widget_type: light_with_brightness
title: Living Room
title2: Lamp
entity: light.living_room_floor_lamp
title_style: "font-weight: bold;"
icon_on: mdi-lamp
icon_off: mdi-lamp
icon_style_active: "color: yellow"
But it shows up in my dashboard like this:
No bold title, no yellow for active (and inactive is also white and not grey as it should be). But it looks like itâs picked up the icon. I feel like Iâm missing something simple hereâŚ
Thanks!
do you use a skin?
if so:
you need to add the lines:
light_with_brightness_icon_on: mdi-lightbulb
light_with_brightness_icon_off: mdi-lightbulb
light_with_brightness_title_style: $style_title
light_with_brightness_title2_style: $style_title2
light_with_brightness_slider_style: ""
light_with_brightness_widget_style: $background_style
light_with_brightness_icon_style_active: $style_active
light_with_brightness_icon_style_inactive: $style_inactive
to the variables.yaml from your skin.
if not:
you need to add those lines to the variables.yaml from default.
Thank you for the reply. I donât use a skin, just the default. I am using the app daemon Docker container and I donât think I have a variables.yaml file in my config directory currently. Where should I create it?
it is not in your config.
it is in the files from appdaemon itself.
it depends on where your package is installked, but the dir should be
appdaemon/assets/css/default
there is a variables.yaml that needs to be changed.
Hi will this be moved into an official update for hadashboard?
yes they will be in the near future.
Hey Rene,
I just added the input select to my dashboard and its not showing up right, I get an error when I look at java but havent been able to decipher it. No errors show in appdaemon. If you can take a look and see if you notice anything I would appreciate it.
da@das:/home/homeassistant/conf/custom_widgets$ ls
baseselect baseslider_vertical new_input_slider.yaml
baseslider_new input_select.yaml vertical_input_slider.yaml
da@das:/home/homeassistant/conf/custom_widgets$
da@das:/home/homeassistant/conf/custom_widgets$
da@das:/home/homeassistant/conf/custom_widgets$ cd baseselect/
da@das:/home/homeassistant/conf/custom_widgets/baseselect$
da@das:/home/homeassistant/conf/custom_widgets/baseselect$
da@das:/home/homeassistant/conf/custom_widgets/baseselect$ ls
baseselect.css baseselect.html baseselect.js
da@das:/home/homeassistant/conf/custom_widgets/baseselect
Its actually causing my other widgets to be black also:
it seems i have changed 1 part from the css binding but forgot to change that in the input_select.yaml
open the input_select.yaml and add this line:
selectcontainer_style: $input_select_container_style
think about indention!
i changed it in the github also. so you can also download the changed file.
sorry for the trouble
Thank you sir. Added that line and they showed up! It actually looks pretty cool on the ipad, I dig it. Thanks again for all your hard work, patience, and help!
Hey one more question. For the light with color picker, it is just showing up as a bar and blanked out the below widgets. see below. I looked for a set / select value but do not see that. Ive added the files, did I miss something on this one too? 
da@das:/home/homeassistant/conf/custom_widgets$ ls
base_light_with_colorpicker baseslider_vertical light_with_colorpicker.yaml wunderground.yaml
baseselect basewunderground new_input_slider.yaml
baseslider_new input_select.yaml vertical_input_slider.yaml
da@das:/home/homeassistant/conf/custom_widgets$
da@das:/home/homeassistant/conf/custom_widgets$ cd base_light_with_colorpicker/
da@das:/home/homeassistant/conf/custom_widgets/base_light_with_colorpicker$
da@das:/home/homeassistant/conf/custom_widgets/base_light_with_colorpicker$ ls
base_light_with_colorpicker.css base_light_with_colorpicker.html base_light_with_colorpicker.js
da@das:/home/homeassistant/conf/custom_widgets/base_light_with_colorpicker$
what is in your dashboard?
I almost responded with pool balls LOL. Caught me off guard there.
basement_strips:
widget_type: light_with_colorpicker
entity: light.basement_color
title: Strips
layout:
- clock.clock(2x1), garage, lock, alarm, temp, climate(2x1)
- basementtv, basementpause, currently_playing(4x1), wun(2x2)
- basementcable, basementatv, basement_vol(4x1)
- playselect(2x1), bar, tvarea, game_room, pooltable, aurora(2x1)
- living_room_light, kitchen_light, basement_strips(4x1), familyroom_light, foyer_light
- dashboard(2x1), basementpage(2x1), basesonospage(2x1), lrlights, infoseems allright.
did you add these lines to your variables.yaml in your skin?
light_with_colorpicker_icon_on: mdi-lightbulb
light_with_colorpicker_icon_off: mdi-lightbulb
light_with_colorpicker_title_style: $style_title
light_with_colorpicker_title2_style: $style_title2
light_with_colorpicker_button_style: ""
light_with_colorpicker_widget_style: $background_style
light_with_colorpicker_icon_style_active: $style_active
light_with_colorpicker_icon_style_inactive: $style_inactive
Ive usally waited to add those in my skins until after I got it working. But I did just add them and it didnt change. Here is a screen shot directly from my ipad. And the variables file. I am seeing a light bulb above that line now, but nothing that is able to slide, like on my volume for example you see the little bubble you drag to change the value. I tried to restart the appdaemon server, my ipad, and chrome / safari / firefox on my mac. All with similar results. I get what you see in the image below on all of them except in chrome I get the lightbulb above. (I normally do use chrome, was just testing).
If I touch the bar on my ipad I get a little line at the beginning you can see below. I cant move it though, also the light is currently off.
When I click on the bar within chrome this little box pops up, if i change the color it just changes the color of the bar on the dashâŚ
light.basement_color is acrually a group with 2 hue strips inside. I tried using one light strip instead of a group with same result.
basement_strips:
widget_type: light_with_colorpicker
entity: light.basement_tv_strip
title: TV Light
I dont see anything bad in the logâŚ
2017-12-18 17:08:45.585027 INFO Loading custom widget âinput_select.yamlâ
2017-12-18 17:08:45.585240 INFO Loading custom widget âbase_light_with_colorpickerâ
2017-12-18 17:08:45.585648 INFO Loading custom widget â._new_input_slider.yamlâ
2017-12-18 17:08:45.585829 INFO Loading custom widget â._vertical_input_slider.yamlâ
2017-12-18 17:08:45.586064 INFO Loading custom widget âbaseselectâ
2017-12-18 17:08:45.586422 INFO Loading custom widget âbaseslider_verticalâ
2017-12-18 17:08:45.586786 INFO Loading custom widget âvertical_input_slider.yamlâ
2017-12-18 17:08:45.586994 INFO Loading custom widget âwunderground.yamlâ
2017-12-18 17:08:45.587196 INFO Loading custom widget âbasewundergroundâ
2017-12-18 17:08:45.587518 INFO Loading custom widget âbaseslider_newâ
2017-12-18 17:08:45.587826 INFO Loading custom widget ânew_input_slider.yamlâ
2017-12-18 17:08:45.587979 INFO Loading custom widget âlight_with_colorpicker.yamlâ
2017-12-18 17:08:45.733929 INFO function [get_dashboard] finished in 636 ms
what browser are you using?
this could be a browser problem (also because you have an ipad on which i cant test anything)
your colorpicker is completely different then on android or the PC.
sorry i didnt read correct. see my next answer
and if it doesnt work with chrome, please look at the javaconsole in chrome what errors you get
Hmmm, this is odd. So I realized with that color picker box that popped up. If I select a dif color it does actually change the color of the strip. Theres still no way to adjust it on the dashboard or make it brighter.
Same thing in Chrome on a windows box. I get the thick bar that doesnt do anything and a color picker pop up.
I see this error in the chrome console
i think you misunderstood the widget.
the light with colorpicker widget does 2 things:
brightness cant be set with that widget.
and because of the little space insade a widget i didnt create a widget that can set brightness AND color.
thats why there are 2 widgets for brightness OR colorchange.
so the bar is to show which color you have set and to activate the colorpicker.
and it seems to do just that.
allthough you shouldnt have that error.
when i get the time tommorow i will check that out.
