Changing settings of nodes in ui

Dashboard
1

Hello,

for my heating scenario I use the heater-controller. I want to customize the appearance of this node and want to do this via using a template node. But i don't how to use the correct css syntax for that. I think this the section i have to change:

            .temp {
                color: #0094ce;
                font-size: 4em;
                font-weight: bold;
            }

This is a part of the class="ng-scope".

Can someone help me how to adapt this i a template node? I want to change the font-size parameter for a smaller font.

I've tried in a template node:

  <style>
       #Übersicht_Oben_cards {
            ng-scope {
             temp {
                 font-size: 9px !important;   
            }
        }

</style>

But it doesn't work :pensive:

2

The complete section in the HTML code:

grafik
grafik1647×600 76.8 KB

3

Try this think your css isn't quite right & assume the
see css selectors https://www.w3schools.com/CSS/css_selectors.asp

<style>
#Übersicht_Oben_cards.temp {font-size: 9px !important; color: red;}
</style>
4

Unfortunately not! But many thanks for the link! It read much interesting things and now it works as follows:

<style>
*.temp {font-size: 20px !important;}
</style>

Don't know if this is the "correct way"??

5

Your using a wildcard in the selector which isn't wrong.
Can you share your template html.

I'm not sure of how html class and angular ng-class affect css specificity
https://www.w3schools.com/css/css_specificity.asp

6

The html section:

<div class="nr-dashboard-cardcontainer" id="Übersicht_Oben_cards" ng-transclude="" ng-style="{width:ctrl.width, height:ctrl.height}" style="width: 295px; height: 887px;"> <!-- ngRepeat: control in group.items --><!-- ngInclude: ::templateUrl --><md-card ui-card-size="8x1" layout="row" layout-align="start center" class="nr-dashboard-text ng-scope _md layout-row layout-align-start-center visible" ng-class="{'nr-dashboard-disabled':me.item.disabled}" style="left: 0px; top: 0px; width: 295px; height: 36px;"> <p class="label ng-binding" ng-bind-html="me.item.getLabel()"><font size="2">Heizkörper</font></p> <p class="value ng-binding" ng-bind-html="me.item.getText()"><font size="2">Küche</font></p> </md-card><!-- end ngRepeat: control in group.items --><!-- ngInclude: ::templateUrl --><md-card ui-template="me.item.format" ui-card-size="0x0" class="nr-dashboard-template ng-scope _md visible" ng-class="{'nr-dashboard-disabled':me.item.disabled}" ng-show="true" aria-hidden="false" style="left: 0px; top: 37px; width: 295px; height: 110px;"><style class="ng-scope"> 
            .iconFalse {
                color: gray;
            }
            .iconTrue {
                color: #ff4d4d;
            }
            .icon {
                margin: 0;
                margin-left: 10px;
                font-size:1em;
            }
            .userSettingsIcon {
                margin-right: 20px;
            }
            .targetTemp {
                color: #0094ce;
                font-size: 1em;
                font-weight: bold;
            }
            .heaterContr {
                margin-left: 10px;
            }
            .wrapper {
                margin-left: 14px;
                margin-right: 14px;
            }
            .temp {
                color: #0094ce;
                font-size: 4em;
                font-weight: bold;
            }
            .warning-icon i {
                margin-left: 5px;
                margin-right: 5px;
            }
            .no-select:focus {
                outline: none;
                cursor: pointer;
                -webkit-touch-callout: none; /* iOS Safari */
                -webkit-user-select: none; /* Safari */
                -khtml-user-select: none; /* Konqueror HTML */
                -moz-user-select: none; /* Firefox */
                -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none;
            }
            .user-mode {
                color: rgb(63,81,181);
            }
            .info {
                margin-right: 10px;
            }
            </style>
        <div class="wrapper ng-scope layout-align-center-stretch layout-column flex" layout="column" flex="" layout-align="center stretch" ng-init="init({&quot;calendar&quot;:{&quot;Monday&quot;:{&quot;00:00&quot;:16,&quot;05:45&quot;:23,&quot;07:30&quot;:16,&quot;11:30&quot;:21,&quot;14:00&quot;:16,&quot;23:59&quot;:16},&quot;Tuesday&quot;:{&quot;00:00&quot;:16,&quot;05:45&quot;:23,&quot;07:30&quot;:16,&quot;11:30&quot;:21,&quot;14:00&quot;:16,&quot;23:59&quot;:16},&quot;Wednesday&quot;:{&quot;00:00&quot;:16,&quot;05:45&quot;:23,&quot;07:30&quot;:16,&quot;11:30&quot;:21,&quot;14:00&quot;:16,&quot;23:59&quot;:16},&quot;Thursday&quot;:{&quot;00:00&quot;:16,&quot;05:45&quot;:23,&quot;07:30&quot;:16,&quot;11:30&quot;:21,&quot;14:00&quot;:16,&quot;23:59&quot;:16},&quot;Friday&quot;:{&quot;00:00&quot;:16,&quot;05:45&quot;:23,&quot;07:30&quot;:16,&quot;11:30&quot;:21,&quot;14:00&quot;:16,&quot;23:59&quot;:16},&quot;Saturday&quot;:{&quot;00:00&quot;:16,&quot;08:00&quot;:21,&quot;10:00&quot;:16,&quot;11:30&quot;:21,&quot;14:00&quot;:16,&quot;23:59&quot;:16},&quot;Sunday&quot;:{&quot;00:00&quot;:16,&quot;08:00&quot;:21,&quot;10:00&quot;:16,&quot;11:30&quot;:21,&quot;14:00&quot;:16,&quot;23:59&quot;:16}},&quot;unit&quot;:&quot;C&quot;,&quot;sliderStep&quot;:0.5,&quot;sliderMinValue&quot;:16,&quot;sliderMaxValue&quot;:25})">
            <div layout="row" layout-align="end center" class="warning-icon layout-align-end-center layout-row">
                <span class="info ng-binding" title="Current calendar temp" ng-show="msg.currentSchedule != undefined" aria-hidden="false"><i class="fa fa-calendar-o" aria-hidden="true"></i>21°C (11:30)</span>
                <span class="info ng-binding" title="Next calendar temp" ng-show="msg.nextSchedule != undefined" aria-hidden="false"><i class="fa fa-calendar-plus-o" aria-hidden="true"></i>16°C (14:00)</span>
                <div flex="" class="flex"></div>
                <!-- ngIf: !config.calendar -->
                <!-- ngIf: !msg.currentTemp -->
            </div>
            <div layout="row" layout-align="center center" class="container layout-align-center-center layout-row">
                <div layout-align="start center" flex="20" class="layout-align-start-center flex-20"><i ng-click="lockCustom()" ng-class="msg.isUserCustomLocked ? 'fa-lock' : 'fa-unlock-alt'" class="fa no-select fa-unlock-alt" style="font-size: 2em; color:#0094ce" role="button" tabindex="0"></i></div>
                <div layout="row" layout-align="center center" flex="" class="layout-align-center-center layout-row flex">
                    <div layout-align="end center" layout="column" class="layout-align-end-center layout-column">
                        <div title="Current target (user value or calendar). Double-click for reset." ng-class="{'user-mode': msg.isUserCustom}" class="temp no-select ng-binding" md-swipe-left="toSchedule()" md-swipe-right="toSchedule()" ng-dblclick="toSchedule()" tabindex="0">21.0°C</div>
                    </div>
                    <div class="heaterContr layout-align-center-center layout-column" layout-align="center center" layout="column">
                        <div class="targetTemp ng-binding flex-50" flex="50">21.5</div>
                        <div layout-align="space-between" layout="row" flex="50" class="layout-align-space-between-stretch layout-row flex-50">
                            <i title="Heater status" class="fa fa-fire icon iconFalse" ng-class="msg.currentHeaterStatus == 'on' ? 'iconTrue' : 'iconFalse'" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div layout-align="center stretch" layout="column" class="layout-align-center-stretch layout-column">
                <md-slider md-discrete="" ng-disabled="!msg.targetValue || !msg.currentTemp" ng-change="sendVal()" class="md-primary ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty md-min" ng-model="msg.userTargetValue" step="0.5" min="16" max="25" aria-disabled="false" aria-invalid="false"><div class="md-slider-wrapper" tabindex="-1" role="slider" style="touch-action: pan-y;" aria-valuemin="16" aria-valuemax="25"><div class="md-slider-content"><div class="md-track-container"><div class="md-track"></div><div class="md-track md-track-fill" style="width: 0%;"></div><div class="md-track-ticks"></div></div><div class="md-thumb-container" style="left: 0%;"><div class="md-thumb"></div><div class="md-focus-thumb"></div><div class="md-focus-ring"></div><div class="md-sign"><span class="md-thumb-text"></span></div><div class="md-disabled-thumb"></div></div></div></div></md-slider></div>
        </div></md-card>