Editing Widget borders

So far I have been running Openhab2 on my Raspberry Pi3 for 5 months now and everything is working awesome. I am looking into doing some customizing to the ui and was wondering if there is a way to edit lets say a button widget to remove the squareness of the widget. I understand that the widgets are arranged in a grid type fashion but even with a light background and using the Orange Tree theme since it shows everything clear but I still see a black border around it. Don/t mind the red as I am still playing around with the color scheme.

  1. Create your own css.
  2. Use that css from the settings page
  3. add this to your css
    .no-bkg {
        box-shadow: none;
  4. File an Issue
    a. Mention (this page url) to the issue

Can I just create a css file and add,
.no-bkg {
box-shadow: none;

Or do I need to create the whole page?

That’s exactly what I said

  1. Put the file in your conf/html folder
  2. Goto http://YOUROPENHAB/index.html#/settings
  3. Find the setting (screen shot above)
  4. Enter /static/yourcssfilename.css
  5. Refresh

I am stuck. I have never had any luck with css stye sheets but this is what I entered in the css file.


.no-bkg {
box-shadow: none;

Nothing happens

Copy what I pasted. That’s all u need to do

Appreciate all of your help. Here is what I have.
I move the file to openHAB-conf/html and add it to settings.

it still shows the border around the widget buttons.

Edit the widget. Disable no background option. Also try the don’t wrap option

I go into the button widget and there is no option to disable no background or don’t wrap option

if that’s the case, use template widget instead, and use <widget-button> instead. Template widgets have the option to disable background/wrap.

It finally works. For anyone that wants to know, here is the code below.

/* Used to override widget shadow */

/* Override some variables */
:root {
–widget-box-shadow: none;
–box-bg: none;

Thanks for your help lucky