Update 2.7.2 - 2.7.6 Background Icon

[Eisix]

Hallo,

bei mir sind immer noch die background Icons nach oben verschoben. Ist das noch offen oder habe ich irgendwas verpasst?

Gruß
Eisix

[moonsorrox]

glaube wir haben nichts verpaßt, dass ist bei mir ebenfalls noch verschoben

[SirMarco]

Bei mir auch - habe bisher noch keinen Workaround gefunden

[setstate]

ich habe es noch etwas korrigiert, aber das waren nur 1-2px.

Wenn es noch nicht passt, brauche ich bitte etwas mehr Input, sprich Beispiele

[moonsorrox]

hier mal ein Beispiel für einen meiner Rollläden, da ich den gesamten Code hier nicht rein bekomme
dazu noch der Screenshot hier sieht man das die Pfeile für die Rollläden "auf", "ab" und "Stop" nicht mittig sind und zudem sind die Icons sehr dick...! unter Steuerung --- Beschattung zu sehen

Ich nutze die FTUI Version 2.7.6

Code Auswählen Erweitern

<!-- ANFANG - Rollläden - ALLE -->
<div class="vbox" style="height:98%; background-color:#1f222e">
<div class="hbox grow-1">
<div class="hbox" style="height:75%; background-color:#3d445c">
<div class="card grow-2"><div class="left-align darkorange" style="margin-left:10px; font-size:150%">ROLLLADEN - ZIMMER</div></div>
<div class="card"><div class="" style="font-size:150%">POSITION</div></div>
<div class="card"><div class="" style="margin-left:-15px !important; font-size:150%">ZEITEN</div></div>
<div class="card"><div class="" style="margin-left:-20px !important; font-size:150%">MODUS</div></div>
<div class="card"><div class="darkorange" style="margin-left:-10px !important; font-size:150%">UMSCHALTUNG</div></div>
<div class="card grow-2"><div class="darkorange" style="margin-left:-5px !important; font-size:150%">STEUERUNG --- BESCHATTUNG</div></div>
</div>
</div>
<div class="hbox">
<div class="card grow-2"><div class="left-align" style="margin-left:10px !important; margin-top:0px !important; font-size:150%;">Wohnzimmer Garten - Osten</div></div>
<div class="card">
<div class="" data-type="circlemenu" data-item-width="55" data-item-hight="55" data-device="WZ_Rollladen_O" data-direction="right-half" data-circle-radius="90">
<ul>
<li class="circleborder MediumSpringGreen"><div data-type="label" data-device="WZ_Rollladen_O"></div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="35" data-icon="">35</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="60" data-icon="">60</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="80" data-icon="">80</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="70" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
</div>
<!--Box 09-->
<div class="card">
<div data-type="popup" data-height="400px" data-width="600px" data-return-time="20" data-draggable="false">
<div class="big" style="margin-top:-15px" data-type="symbol" data-device="du_RolloWZmodus" data-states='["FHEM","Beschattung","Weihnachten","Aus"]' data-colors='["lightgreen","#4169e1","crimson","yellow"]' data-icons='["oa-time_clock","oa-time_clock","oa-time_clock","oa-time_clock"]'></div>
<div style="margin-top:-15px !important; font-size:90%" data-type="label">Zeiten WZ alle</div>
<div class="dialog" style="overflow:hidden;">
<header style="background-color:#3d445c;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">Rollladen Zeiten - Wohnzimmer - Alle Rollläden</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="cell">
<!-- Öffnungszeiten Morgens -->
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="6" data-max="8" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Öffnen - Wochen - Tag</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_WoE" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="6" data-max="8" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_WoE" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Öffnen - Wochen - Ende</div>
</div>
<!-- Beschattungszeiten -->
<div class="cell">
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_B" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="14" data-max="19" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_B" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Zeit - Beschattung - 90%</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_offen_B" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="14" data-max="19" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_offen_B" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Beschattung - ENDE</div>
</div>
</div>
</div>
</div>
<div class="card">
<div data-type="popup" data-height="200px" data-width="400px" data-return-time="20" data-draggable="false">
<div class="big" style="margin-top:-15px" data-type="symbol" data-device="du_RolloWZmodus" data-states='["FHEM","Beschattung","Weihnachten","Aus"]' data-colors='["lightgreen","#4169e1","crimson","yellow"]' data-icons='["oa-fts_shutter_automatic","fs-fts_shutter_updown","oa-fts_shutter_automatic","oa-fts_shutter_manual"]'></div>
<div style="margin-top:-15px !important; font-size:90%" data-type="label">Wohnzimmer</div>
<div class="dialog">
<header style="background-color:#3d445c;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">Rollladen Modus - Wohnzimmer</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="cell">
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="FHEM" data-get-off="!on" data-on-color="lightgreen" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="FHEM"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">FHEM</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="Beschattung" data-get-off="!on" data-on-color="#4169e1" data-off-color="white" data-icon="fs-fts_shutter_updown" data-set-on="Beschattung"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Beschattung</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="Weihnachten" data-get-off="!on" data-on-color="crimson" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="Weihnachten"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Weihnachten</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="Aus" data-get-off="!on" data-on-color="yellow"  data-off-color="white" data-icon="oa-fts_shutter_manual" data-set-on="Aus"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Aus / Hand</div>
</div>
</div>
</div>
</div>
</div>
<div class="card left-space-2x">
<div data-type="popup" data-height="200px" data-width="400px" data-return-time="20" data-draggable="false">
<div class="big" style="margin-top:-15px" data-type="symbol" data-device="du_Rollladen_Automatik" data-states='["FHEM","Beschattung","Weihnachten","Aus"]' data-colors='["lightgreen","#4169e1","crimson","yellow"]' data-icons='["oa-fts_shutter_automatic","fs-fts_shutter_updown","oa-fts_shutter_automatic","oa-fts_shutter_manual"]'></div>
<div class="darkorange" style="margin-top:-15px !important; font-size:100%" data-type="label">Alle Rollläden</div>
<div class="dialog">
<header style="background-color:#3d445c;">
<div class="sheet">
<div class="left darkorange" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">Rollladen Umschaltung - Alle</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="cell">
<div class="inline"><div class="big" data-type="push" data-device="du_Rollladen_Automatik" data-get="state" data-background-icon="none" data-get-on="FHEM" data-get-off="!on" data-on-color="lightgreen" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="FHEM"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">FHEM</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_Rollladen_Automatik" data-get="state" data-background-icon="none" data-get-on="Beschattung" data-get-off="!on" data-on-color="#4169e1" data-off-color="white" data-icon="fs-fts_shutter_updown" data-set-on="Beschattung"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Beschattung</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_Rollladen_Automatik" data-get="state" data-background-icon="none" data-get-on="Weihnachten" data-get-off="!on" data-on-color="crimson" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="Weihnachten"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Weihnachten</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_Rollladen_Automatik" data-get="state" data-background-icon="none" data-get-on="Aus" data-get-off="!on" data-on-color="yellow"  data-off-color="white" data-icon="oa-fts_shutter_manual" data-set-on="Aus"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Aus / Hand</div>
</div>
</div>
</div>
</div>
</div><!--Box 11-->
<div class="card grow-2">
<div class="center">
<div data-size="100%" data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="" data-off-background-color="MediumSpringGreen" data-icon="fa-chevron-up" data-on-color="#DC143C" data-off-color="#DC143C" data-background-icon="fa-square-o" data-set-on="on"></div>
<div data-size="100%" data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="" data-off-background-color="MediumSpringGreen" data-icon="fa-minus" data-on-color="#DC143C" data-off-color="" data-background-icon="fa-square-o" data-set-on="stop"></div>
<div data-size="100%" data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="" data-off-background-color="MediumSpringGreen" data-icon="fa-chevron-down" data-on-color="#DC143C" data-off-color="#DC143C" data-background-icon="fa-square-o" data-set-on="off"></div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="35" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">35</div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="60" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">60</div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="80" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">80</div>
</div>
</div>
</div>

[setstate]

gestern Abend nochmal ein Update gemacht? Bei sieht es mittig aus.

Zur Dicke: das ist der aktuelle Style bei Fontawesome-Free, da habe ich keinen Einfluss. Es gibt dünnere, aber nur in der kostenpflichtigen Version

https://fontawesome.com/icons/square?style=regular

Ich könnte höchstens ein eigenes Icon im ftui-* Set bauen ...

[Eisix]

Hallo,

hier zwei Beispiele. Bei dem table sieht man es denke ich am besten (oben an der Linie unten ist frei) . Nach deiner letzten Korrektur sieht es für mich so aus als würdest du das eigentliche Icon und nicht das background Icon verschieben.

Code Auswählen Erweitern


<div class="inline right bottom">
        <div data-type="push" data-device="logdb"
                data-set-on="count"
                data-icon="fa-refresh"
                data-color="#aa6900"
                class="top-narrow">
        </div>
        <div>Refresh</div>
</div>



Code Auswählen Erweitern


<table align="center" style="border:1px solid grey; width:80%">
        <tr>
        <td style="border:2px solid grey;" class="A1"><center><div class="inline"><big>FHEM uptime<br></big></div>
                </br>
                <div data-type="label" data-device="sysmon" data-get="fhemuptime_text" class="small"></div>
        </td>
        <td style="border:2px solid grey;" class="B1"><center>
                <div data-type="popup" data-width="120px" data-height="105px">
                        <div data-type="button" data-icon="fs-system_fhem_reboot" data-on-background-color="orange" data-off-background-color="orange" class=""></div>
                        <div class="dialog">
                                <header>Neustart FHEM</header>
                                <div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fs-system_fhem"></div>
                                <div class="top">sicher?</div>
                        </div>
                </div>
        </td>
        </tr>
        <tr>



Gruß
Eisix

[moonsorrox]

Nach deiner letzten Korrektur sieht es für mich so aus als würdest du das eigentliche Icon und nicht das background Icon verschieben.

genau diesen Eindruck habe ich auch, als wenn das square Teil welches ich nutze bei mir nach unten gerutscht ist..! und somit der innere Teil oben an den Rand rutscht.

[setstate]

Da muss in einer eurer CSS Dateien ein Offset drin sein.
Bei mir ist alles schick

[moonsorrox]

hier mal meine css, ich habe da nichts gefunden

Code Auswählen Erweitern

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Comfortaa);
@import url(https://fonts.googleapis.com/css?family=Nunito);


##### meine Farben #####
  Crimson: #DC143C;
  DarkCyan: #008B8B;
  MediumSpringGreen: #00FA9A;
  DarkerGray: #33394d
  DarkGray: #3d445c*/

/* meine veränderten Farben */
.silver { color:#C0C0C0 !important; }
.crimson { color:#DC143C !important; }
.darkcyan { color:#008B8B !important; }
.LightGreen { color:#90EE90 !important; }
.MediumSpringGreen { color:#00FA9A !important; }
.SpringGreen { color:#00FF7F !important; }
.royalblue { color:#4169e1 !important; }
.navy { color:#000080 !important; }
.blackm { color:#1D1F20 !important; }
.darkviolet { color:#9400d3 !important; }
.darkergray { color:#33394d !important; }
.darkgray { color:#3d445c !important; }
.darkorange      { color:#ff6c00 !important; }

/* .indigo  { color:#4b0082 !important; } */
/* .transparent              { color:#dd881133 !important; } */
/* .transparent      { color: rgba(123,123,123,0.3) } */

/* mein Background transparent */
.transparent {
color: rgba(123,123,123,0.3);
}

.bg-darkgray {
background-color:#3d445c !important;
}


* {
    font-family: 'Nunito';
}

.gridster > ul > li, .card, section {
    background-color:#000000;
color:#ffffff;
}

.gridster li header, .card > header {
    background: #3a4f5c;
    color: #aaa;
    border-bottom: 1px solid #222;
}

.border-crimson {
    border: 1px solid #DC143C;
}

.border-bottom-blue2 {
    border-bottom: 2px solid #4b0082;
}

.border-bottom-blue1 {
border-bottom: 1px solid #4169e1;
}

.border-top-blue1 {
border-top: 1px solid #4169e1;
}


.bg-crimson,
.btn-crimson {
    background-color: #DC143C !important;
}

/* .dialog {
    background-color:#000000;
}
*/


body {
    /* background-color: #1D1F20 !important; */
background-color: #1D1F20 !important; /* DarkCyan: #008B8B */
    color: #eeeeee !important;
}

/*{
    background-image: url("/fhem/www/tablet/images/livingroom.jpg") no-repeat center center;
} */

.gridster li header,
.dialog > header,
.card > header {
    background: #3a4f5c;
    color: #aaa;
}

/*
.card div {
background:transparent;
}

.hbox div {
background:transparent;
}
*/
.vbox div {
background:transparent;
}

.card > header1 {
    background: #3d445c;
    color: #ffffff;
}

/* Slider colors */
.range-handle {
  background-color: #bcbcbc !important;
}
.range-bar {
  background-color: #404040;
}

polyline {
    stroke: #337ab7 !important;
}

.myRainIcon {
            background: url("/fhem/www/tablet/images/rain.png") no-repeat;
            width: 55px;
            height: 55px;
            background-size: contain;
        }

.myBackground {
            background: url("/fhem/www/tablet/images/back.png"); /* no-repeat; */
            /*width: 55px;
            height: 55px; */
            background-size: contain;
        }


/* Room Header */
#livingroom {
    background: url('../images/livingroom.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#wohnen {
    background: url('../images/wohnen.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#wohnen1 {
    background: url('../images/wohnen1.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#wohnen2 {
    background: url('../images/wohnen2.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#wohnen3 {
    background: url('../images/wohnen3.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#wohnen4 {
    background: url('../images/wohnen4.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#wohnen5 {
    background: url('../images/wohnen5.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#background {
    /* background: url('../images/back.png') no-repeat center center; */
background: url('../images/Steinhude_sunset.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#background1 {
    background: url('../images/Himmel_Sonnenuntergang.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#background2 {
    /* background: url(http://10.0.0.50:8083/fhem/www/tablet/images/Steinhuder_meer.png) no-repeat center center; */
background: url('../images/Steinhuder_meer.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#background3 {
    /* background: url(http://10.0.0.50:8083/fhem/www/tablet/images/Steinhuder_meer.png) no-repeat center center; */
background: url('../images/Steinhuder_meer1.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#music {
    /* background: url(http://10.0.0.50:8083/fhem/www/tablet/images/Steinhuder_meer.png) no-repeat center center; */
background: url('../images/music.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Background select Feld von mir geändert */
select,
input.textinput {   
    border: 2px solid royalblue;
    background: transparent;   
    appearance: none;
    font-size: small;
    color: #ffffff;
}



option {background-color: #ffffff;}
/*.pagetab.on{color:#5D6E80;background-color:#0088CC;}
.pagetab.off{color:#5D6E80;background-color:#aaa;} */
/*.pagebutton.on{color:#223343;background-color:#4C5D71;}
.pagebutton.off{color:#4C5D71;background-color:transparent;} */
.dimmer.on{color:#eee;background-color:#0088CC;}
.dimmer.off{color:#eee;background-color:#4C5D71;}
/*.symbol.on{color:#59BFFD;background-color:#59BFFD;}
.symbol.off{color:#4C5D71;background-color:#aaa;}
/*.switch.on{color:#eee;background-color:#0088CC;}
.switch.off{color:#eee;background-color:#4C5D71;} */
/*.push.on{color:#eee;background-color:#3DA5D8;}
.push.off{color:#eee;background-color:#4C5D71;} */
.thermostat.tkcolor{color:#4C5D71;}
.thermostat.fgcolor{color:#4C5D71;}
.thermostat.input{color:#aaa;}
.thermostat.mincolor{color:#0088CC;}
.thermostat.maxcolor{color:#f71525;}
.homestatus{color:#0088CC;background-color:#aaa;}
.homestatus.tkcolor{color:#4C5D71;}
.homestatus.mincolor{color:#eee;}
.homestatus.maxcolor{color:#4C5D71;}
.slider{color:#0088CC;background-color:#999;}
.volume.hdcolor{color:#0088CC;}
.volume.fgcolor{color:#555;}
/* .checkbox.on {color:#fff;background-color:#0088CC;}
.checkbox.off {color:#fff;background-color:#999;} */
.playstream.on {color:#fff;background-color:#0088CC;}
.playstream.off {color:#fff;background-color:#999;}


/* Definition für Legende im Chartfenster */
.legend {
stroke: transparent;
font-size: 11px;
stroke-width: 0;
fill: #aaa;
fill-opacity: 0.1; }

.myshadow2 {
  opacity: .99 !important;
}

.green-box {
            background: url(../images/button_gr.png) no-repeat center center;
            width: 50px;
            height: 50px;
            background-size: contain;
        }

.red-box {
            background: url(../images/button_rot.png) no-repeat center center;
            width: 50px;
            height: 50px;
            background-size: contain;
        }

.blue-box {
            background: url(../images/button_bl.png) no-repeat center center;
            width: 50px;
            height: 50px;
            background-size: contain;
        }

.yellow-box {
            background: url(../images/button_ge.png) no-repeat center center;
            width: 50px;
            height: 50px;
            background-size: contain;
        }


.green-box-big {
            background: url(../images/button_g.png) no-repeat center center;
            width: 70px;
            height: 70px;
            background-size: contain;
        }

.red-box-big {
            background: url(../images/button_r.png) no-repeat center center;
            width: 70px;
            height: 70px;
            background-size: contain;
        }

.blue-box-big {
            background: url(../images/button_bl.png) no-repeat center center;
            width: 70px;
            height: 70px;
            background-size: contain;
        }

.yellow-box-big {
            background: url(../images/button_ge.png) no-repeat center center;
            width: 70px;
            height: 70px;
            background-size: contain;
        }

.bild1 {
            background: url(../images/wohnen1.png) no-repeat center center;
            width: 100px;
            height: 70px;
            background-size: contain;
        }

.bild2 {
            background: url(../images/wohnen2.png) no-repeat center center;
            width: 100px;
            height: 70px;
            background-size: contain;
        }

[FabJoe]

Tatsächlich nehme ich das auch so war, keine manuell geänderte CSS-Datei...
siehe Anhang, welchen ich auch im Update-Thread schon hochgeladen habe.
Wenn ich weitere Infos beisteuern kann, dann gerne Bescheid sagen.

Viele Grüße
Fabian

[Vaddi]

Bei mir sind die Icons soweit auch in Ordnung.
Allerdings sind seit dem heutigen Update andere Sachen etwas
verschoben.
Zum einen das Menü, welches nicht mehr bündig ist und zu anderen meine Anzeige der
Außentemperatur und Luftfeuchtigkeit.
Es ist nichts, was ich nicht durch CSS Bearbeitung wieder hin bekomme, wollte es nur gesagt haben

[setstate]

Ich könnte höchstens ein eigenes Icon im ftui-* Set bauen ...

Ich habe mal die Icons fa-circle-thin und fa-square-o aus dem Fontawesome4 Set extrahiert und als ftui-circle-thin bzw. ftui-square-o abgespeichert. Der Unterschied ist aber nur marginal

Links Fa5 rechts Fa4

[Eisix]

Hallo,

css würde ich eigentlich bei mir ausschließen, habe nur ein paar Zeilen in meiner User.csss. Kann es am Webserver liegen. Nutze direkt fhemweb und nicht HTTPSRV oder FTUISRV?

Gruß
Eisix

[Eisix]

Antworte mir mal selbst 

Habe gerade mit HTTPSRV versucht. Das gleiche Problem. Das wars also auch nicht.

Gruß
Eisix