Hmmm… it looks like standard Switch widget at ON and OFF states.
What you mean by “i can not get them to look and feel as the Switch Widget”?.
I can not find any code examples to change the icon.
/Mike
Ahh, no problem! 
Here it is (as for example):
<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
ng-click="sendCmd('Contactor', itemValue('Contactor') == 'ON' ? 'OFF' : 'ON')">
<span>
<widget-icon iconset="'smarthome-set'" icon="'power'" size="32" state="itemValue('Contactor')" />
</span>
<span style="color: {{itemValue('Contactor')=='ON' ? 'white' : '#7B879C'}}">
Power
</span>
</button>
Thanks
1 Like
I am now using this code, i had to change iconset to eclipse-smarthome-classic.
How do i implement backdrop icon into this?
/mike
<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
ng-click="sendCmd('Light_GF_Living_Read', itemValue('Light_GF_Living_Read') == 'ON' ? 'OFF' : 'ON')">
<span>
<widget-icon iconset="'eclipse-smarthome-classic'" icon="'switch'" size="32" state="itemValue('Light_GF_Living_Read')" />
</span>
<span style="color: {{itemValue('Light_GF_Living_Read')=='ON' ? 'white' : '#7B879C'}}">
Desk Lamp
</span>
</button>
1 Like
It is property of another object (of the overlying div)
Look here: https://community.openhab.org/t/template-widget-and-backdrop-icons/16319
I do not understand if I add that to my code the button does not work and the backdrop is not centered.
/Mike
<div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}">
<img height="100%" ng-class="{ colorize: colorize }" class="icon-tile-backdrop ng-scope colorize" ng-src="assets/icons/freepik-household/window-3.svg" src="assets/icons/freepik-household/window-3.svg">
</div>
<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
ng-click="sendCmd('Light_GF_Living_Read', itemValue('Light_GF_Living_Read') == 'ON' ? 'OFF' : 'ON')">
<span>
<widget-icon iconset="'eclipse-smarthome-classic'" icon="'switch'" size="32" state="itemValue('Light_GF_Living_Read')" />
</span>
<span style="color: {{itemValue('Light_GF_Living_Read')=='ON' ? 'white' : '#7B879C'}}">
Desk Lamp
</span>
</button>
<div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}">
<img height="100%" ng-class="{ colorize: colorize }" class="icon-tile-backdrop ng-scope colorize" ng-src="assets/icons/freepik-household/window-3.svg" src="assets/icons/freepik-household/window-3.svg">
</div>
Here the correct code:
<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
ng-click="sendCmd('Light_GF_Living_Read', itemValue('Light_GF_Living_Read') == 'ON' ? 'OFF' : 'ON')">
<div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}" style="width: 100%; height: 100%; margin: auto">
<img height="100%" ng-class="{ colorize: colorize }" class="icon-tile-backdrop ng-scope colorize" ng-src="assets/icons/freepik-household/window-3.svg" src="assets/icons/freepik-household/window-3.svg">
</div>
<span>
<widget-icon iconset="'eclipse-smarthome-classic'" icon="'switch'" size="32" state="itemValue('Light_GF_Living_Read')" />
</span>
<span style="color: {{itemValue('Light_GF_Living_Read')=='ON' ? 'white' : '#7B879C'}}">
Desk Lamp
</span>
</button>
And you need to check “Don’t wrap in container” in the Template Settings
2 Likes
Works like a charm 
Thanks
Is there a possibility to completely remove the background color from a widget to just have the content shown with out the box around?
I use the translucent theme, which pretty much looks like I like it… But I found nothing to get rid of the “box” around the widget.
As alternative, I would like to hide a complete widget conditionally (like if there is an important notification, there is a button which is completely hidden if there is nothing to show).
Do you guys have an idea how to archive one of this?
Here is how the start page of my dashboard looks like:
Thanks
Lars
2 Likes
Yes of course.
What kind of widget do you mean?
Well. A template for instance.
Here is a (draft version) of the source:
<style>
.content {
display: flex;
justify-content: center;
align-items: center;
--size: {{ (ngModel.sizeY > ngModel.sizeX) ? (ngModel.sizeX * 65) : (ngModel.sizeY * 65) }}px
}
.row {
margin: 0 0;
width: 100%;
overflow: hidden;
}
.day_label {
text-align: center;
color: white;
font-weight: bold;
top: -40px;
position: relative;
}
</style>
<div class="content">
<div class="row">
<div ng-class="(ngModel.sizeX === ngModel.sizeY) ? 'col-md-6' : 'col-md-4'">
<img class="weather-icon" style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);"
src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue(config.weather_condition)}}" />
<div class="day_label">13.10.2011</div>
</div>
<div ng-class="(ngModel.sizeX === ngModel.sizeY) ? 'col-md-6' : 'col-md-4'">
<img class="weather-icon" style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);"
src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue(config.weather_condition)}}" />
<div class="day_label">13.10.2011</div>
</div>
<div ng-class="(ngModel.sizeX === ngModel.sizeY) ? 'col-md-6' : 'col-md-4'">
<img class="weather-icon" style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);"
src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue(config.weather_condition)}}" />
<div class="day_label">13.10.2011</div>
</div>
</div>
</div>
But this leads to the same translucent box around the content as you see on my picture above.
Oh
I’m sorry, I not quite understand the question correctly.
Need to think.
Okay.
If you want to make transparent background for ALL widgets in the dashboard add the next to style block:
.box {
background: rgba(0, 0, 0, 0);
box-shadow: 0px 0px 0px;
}
Thanks a lot.
I will give it try. But removing it from all widgets is not exactly what was looking for.
The option no_background in the habpanel ui seems to be broken the way it is right now.
Bye
Lars
Add also this
.template-nobkg {
background: rgba(0, 0, 0, 0);
}
Managing each individual widget requires more sophisticated approaches.
I did it, but as long as it works for a particular user action, and the need to work immediately when the page loads.
Fixed this yesterday.
2 Likes
Perfect. Thanks for everything you do around habpanel.
Is there a easy way to install this updated version of habpanel on the stable release of OpenHab 2?
Two quick questions:
a) is there a css file I can add/change in order to modify the main template or create a new one?
b) is it possible to text-align:left a vertical slider? Not sure how to pass the setting to the slider container
Thanks!
Hello ysc, I’ve build a widget as a copy of your “reciever input” dropdown widget. But I have to send commands to my onkyo reciever in numeric values, so the button shows the numeric value instead the choosen input channel. Is there a way to use mappings inside an widget?
<h4>Soundmaster Eingang</h4>
<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
{{itemValue('onkyoSource')}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a ng-click="sendCmd('onkyoSource', '16')">BD/DVD (DVD-Player)</a></li>
<li role="menuitem"><a ng-click="sendCmd('onkyoSource', '0')">VCR/DVR</a></li>
<li role="menuitem"><a ng-click="sendCmd('onkyoSource', '1')">CBL/SAT (Dreambox)</a></li>
thanks for any hint