Custom Widget: How to change background color

Apps & Services HABPanel
1

Hi all
Custom Widgets are a great way to customize HABpanel.
Is there an easy way how to change the background of the custom widget?

Changing the style of .box background changes the background of all widgets - that’s not what I was looking for.

I’m seeking for a solution like in the button widget, where you easily can change the background (e.g. active / inactive).

Thank you in advance, BR Michael

2 
<button class="whatever" style="background: green;" ng-click="sendCmd('YourItem', 'ON')">
  Your button Text
  </button>

So this is the style command you need: style="background: green;"

3

Thanx for replying.
That’s not exactly what I’m looking for. I try to change the Widget background of a custom widget.

The widget is a Custom Widget from Kuba Wolanin.

I try to get the widget background black or transperrent.

<style>

  
.weather-content {
  display: flex;
	justify-content: center;
	align-items: center;
  --size: {{ (ngModel.sizeY > ngModel.sizeX) ? (ngModel.sizeX * 65) : (ngModel.sizeY * 65)  }}px
  
}

.weather-row {
	margin: 0 10px;
	width: 100%;
  overflow: hidden;
}

.weather-icon {
	padding: 0;
}

.weather-icon img {
	width: 100%;
}
  
.col-md-12.weather-icon img {
  margin-top: -11%;
}

.weather-condition {
	text-align: left;
}

.col-md-12.weather-condition {
  margin-top: -17%;
}

.weather-condition span {
	width: 100%;
	display: block;
}

.weather-condition span.weather-city {
	font-size: 2em;
	padding-top: .625em;
  white-space: nowrap;
}

.weather-condition.col-md-12 > .weather-city {
  font-size: 1.25em !important;
}

.weather-condition span.weather-condition-label {
	font-size: 1.5em;
	color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.weather-temperature {
	text-align: right;
	padding-left: 0;
}

.weather-temperature span {
	font-size: 4em;
	white-space: nowrap;
}
  
.floating.weather-temperature {
  position: absolute;
  top: 0;
}

.weather-details {
	border-top: 1px solid rgba(255, 255, 255, 0.4);
	text-align: center;
	font-size: 1.25em;
	padding: 1em;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	position: absolute;
	bottom: 0;
	width: 100%;
	white-space: nowrap;
}

.weather-details img {
	width: 24px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
</style>
<div class="weather-content">
  <div class="weather-row">
    <div class="weather-icon" ng-class="(ngModel.sizeX === ngModel.sizeY) ? 'col-md-12' : 'col-md-3'">
		<img 
		src="/static/weather-data/images/colorful/{{itemValue(config.weather_condition)}}.png" />
    </div>
    <div class="weather-condition" ng-class="(ngModel.sizeX === ngModel.sizeY) ? 'col-md-12' : 'col-md-6'">
        <span class="weather-city">{{ngModel.name}}</span>
        <span class="weather-condition-label">
            {{itemValue(config.formatted_weather_condition)}}
        </span>
    </div>
    <div class="col-md-3 weather-temperature" ng-class="(ngModel.sizeX === ngModel.sizeY) ? 'floating' : ''">
        <span>{{itemValue(config.temperature) | number:0}}°</span>
    </div>
  </div>
</div>
1 Like
4

Why don’t you just set the option “No background”?

5

OMG - I can’t believe I missed that check box :joy:.
That solved the issue.
Thx!

1 Like
6

Hi all,
great Forum … I´m new using habpanel … just a … maybe … simple Question.
Is there any chance to change the background color of the standard slider widget ? … to use the same colors providing me within the Buton widget ?
Thank´s a lot !
Klaus

7

I need to change the background color of the dummy widget.
I have 53 dummy widgets on the panel, I need to make a different background color for them. Is it possible?

8

There is no such option in the slider and dummy widgets, however if what you want is changing the background for all slider or dummy widgets (I suspect it’s not, but still) then it’s fairly easy: create a CSS file e.g. conf/html/bkg.css and override the .slider or .dummy classes like this:

.dummy {
  background-color: red;
}

.slider {
  background-color: blue;
}

then reference it in HABPanel’s “Additional stylesheet” setting as /static/bkg.css.

9

Yes! It is necessary for each dummy to have a background color.