Hallo,
bei mir sind immer noch die background Icons nach oben verschoben. Ist das noch offen oder habe ich irgendwas verpasst?
Gruß
Eisix
glaube wir haben nichts verpaßt, dass ist bei mir ebenfalls noch verschoben
Bei mir auch - habe bisher noch keinen Workaround gefunden
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
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
<!-- 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>
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 ...
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.
<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>
<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
Zitat von: Eisix am 02 Oktober 2018, 07:44:56
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.
Da muss in einer eurer CSS Dateien ein Offset drin sein.
Bei mir ist alles schick
hier mal meine css, ich habe da nichts gefunden
@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;
}
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
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 ;)
Zitat von: setstate am 02 Oktober 2018, 06:40:59
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
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
Antworte mir mal selbst ::)
Habe gerade mit HTTPSRV versucht. Das gleiche Problem. Das wars also auch nicht.
Gruß
Eisix
Server haben keinen Einfluss auf das Aussehen, wenn sie die angeforderten Files ausliefern, und nichts weglassen oder etwas anderes stattdessen verschicken.
Wie sieht es in einem anderen Browser aus?
@setstate
wenn ich mir Links "rechts Fa4" so anschaue sehe ich die Icons so wie sie einmal waren, ich mache das fest an den runden Ecken, denn die hatte ich vorher auch.
War für mich aber nicht das Killerkreterium ist, welches mich stört.
Wie ist es denn jetzt eingebaut und wie komme ich zu der Anzeige von "rechts Fa4".?
Im Chrome Browser sieht es bei mir genauso aus wie im FF, also verschoben..!
Anstatt fa-square-o muss man ftui-square-o schreiben.
oh je da ist aber irgend etwas total daneben gegangen :-\ siehe Screenshot
Aber HALT.... ich sehe grad da ich wieder fa- nutze das jetzt alles mittig ist, gab es dazu auch eine Änderung..? sind eben nur etwas sehr dick im Gegensatz zu meinen anderen Icons..!
Screenshot 2
Hallo,
Safari zeigt das neue update korrekt an.
Firefox hat nur einen minimalen Versatz.
Chrome hat den Versatz wie auf den screenshots weiter oben.
Gruß
Eisix