[SOLVED] Background color on the standard template widget

All,
To begin with: please apologize the (possibly) stupid question.

I am using the template of Habpanel with the following code:

<div class="row">
<div class="col-xs-12"><span><widget-icon iconset="'smarthome-set'" icon="'thermostat'" /></span></div>
</div>

<div class="row">
<div class="col-xs-12"><span style="color: #ADA96E; font-size: 10pt; text-align:center">{{itemValue('Ind_Noise')| number:0}}<small style="font-size:8pt">dB</small></span></div>
</div>

How to change the background color of the entire tile?

Thanks in advance!

Look here (top:0;bottom:0;left:0;right:0;position:absolute on your top-level element):

Great!
Thanks a lot!
And dynamic widget coloring as well… :smile:
Awesome

It’ me again :blush:

I struggle with my personal template:
It looks like this:

But the icon and number should be centered.
I played around a lot but did not find the right clue:

<div 
     ng-style="{
      'background-color': itemValue('Ind_Temp')=='OPEN' ? '#223344' : '#223344'
     }"
     class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute">
<div class="row">
<div class="template-contents" style="text-align:center"><span><widget-icon iconset="'smarthome-set'" icon="'drop'" /></span>
</div>

<div class="row">
<div class="template-contents" style="text-align:center"><span style="color: #98AFC7; font-size: 10pt">{{itemValue('Ind_Humidity')| number:0}}%</span></div>
</div> 

Any hint?

Got it!

I don’t know if this is really “good coding” but it works so far…

<div 
     ng-style="{
      'background-color': itemValue('Ind_CO2')=='OFF' ? '#223344' : '#223344'
     }"
     class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute">
  <div class="template-contents">
    <div class="row">
		<div class="col-xs-12"><span><widget-icon iconset="'smarthome-set'" icon="'houseplant'" /></span></div>
	</div>
     <div class="row">
		<div class="col-xs-12"><span style="color: #4CC417; font-size: 10pt; text-align:center">{{itemValue('Ind_CO2')| number:0}}<small style="font-size:8pt"></small></span></div>
	</div>
  </div>
</div>

Does anyone have a hint for me how to increase the size of the icon in my example above?
I am struggling with something like

 <div class="row">
		<div class="col-xs-12"><span><widget-icon iconset="'smarthome-set'" icon="'houseplant'" style=font-size:50px" /></span></div>
	</div>

This only shifts the icon further down… :frowning:

<widget-icon> accepts a size attribute for the size in pixels.

Thanks, @ysc.

That works for me so far.
Unfortunately the image is centered and will move the text outside the widget:

Do you have a hint for me how to set it up like the one next to it (the eye)?

<div 
 ng-style="{
 'background-color': itemValue('Weather_Sunset_Time')=='OFF' ? '#313135' : '#313135'
 }"
 class="template-container"
 style="top:0;bottom:0;left:0;right:0;position:absolute">
 <div class="template-contents">
 <div class="row">
		<div class="col-xs-12"><span><widget-icon iconset="'knx-user-forum'" icon="'weather_sunset'" size="50"/></span></div>
	</div>
 <div class="row">
		<div class="col-xs-12"><span style="color: #4CC417; font-size: 10pt; text-align:center">{{itemValue('Weather_Sunset_Time')| date:"H:mm"}}<small style="font-size:8pt"></small></span></div>
	</div>
 </div>
</div>

That’s weird! I would inspect the element with the browser’s dev tools, there might be an unwanted margin in the SVG. You could try applying a margin-top: -__px style to the icon or its <div> container?

I gave it up and went on with other icons I have found. Now I ad just the few icons I miss in the standard collections.

However, I have another question. :wink:
I would like to use the template above an would like to change the icon color based on the state.

I tried the following in various places, but it didn’t work.
ng-style="{ color: itemValue(item.value)=='OFF'?'red':'green' }"

Where should I place it?
Thanks in advance.