Left align dummy widget and button widget

Apps & Services HABPanel
1

As the title already says, can I add some own css text so that I can left-align the Name within a dummy or button widget?
I do not know where the built-in widgets are stored.

2

You can add some CSS rules in a file in the html folder of your configuration, and then reference it the panel settings, there’s an “additional stylesheet” text box, so if your file is called example.css you’ll use /static/example.css.

3

Thanks for your answer. Just to make sure that we are talking about the same. I want to achieve the following:

image
image825×970 19.1 KB

The first column in my HABpanel is either a button widget or dummy widget and want to left align icons and text.
In the Panel settings I can add an additional style sheet, but do not know what to put into the css file.

4

Something like

.dummy-content, .button-content {
  text-align: left;
}

but that would change it for all widgets, which is probably not what you want.
You should build a custom widget, maybe it can be a standard dummy or button enclosed it in div

<div class="left-aligned">
  <widget-dummy ... >
</div>

Then your CSS can target those specifically

.left-aligned .dummy-content {
  text-align: left;
}

The “inspect” feature in Chrome and other browsers are great when playing around with CSS.

5

good ideas. Thanks for pointing me in the right direction. Will make myself familiar with css now.
Thanks

6

Do you know where the built-in widgets are stored so that I can copy/paste/modify them?