Hallo,
ich habe gerade circlemenues gebaut, welche meine Rollläden ansteuert. Einmal in Vebindung mit einerm push-widget (links)
<div data-type="circlemenu" class="">
<ul>
<li><div data-type="push" data-icon="mi-reorder"></div></li>
<li>
<div data-type="push"
data-device="Button_Roll_Beschattung_du"
data-set-on="Roll.WohnzimmerFensterDoert"
data-icon="" >
<Div class="mini">Dörte</div>
</div>
</li>
Und zum Anderen mit einerm switch-widget:
<div data-type="circlemenu" class="">
<ul>
<li><div data-type="push" data-icon="fa-caret-up"></div></li>
<li>
<div data-type="switch"
data-device="Roll.WohnzimmerFensterDoert"
data-get=""
data-get-on="!stop.*"
data-get-off="stop.*"
data-set-on="up"
data-set-off="stop"
data-icon="">
<Div class="mini">Dörte</div>
</div>
</li>
Die Ergebnisse sind leider in der Darstellung etwas unterschiedlich.
Wie bekomme ich es hin, dass beide circlemenu so aussehen, wie das auf der rechten Seite?
Vielen Dank für euer Mithilfe
Gruß
Tom
Indem Du beide mit einem switch-widget baust?
Habe auf switch umgestellt. So sieht es gut aus.
Ich hänge meine Frage mit gleichem Inhalt mal hier drunter. Ich wollte unterschiedliche Icons mit transparentem Hintergrund als Buttons haben. Allerdings macht mir fhm immer diesen unnötigen dunklen Hintergrund unter jedes Icon.
Kennt vielleicht jemand eine Lösung ?
html Code?
Hier noch mein html code...
<div data-type="circlemenu" data-border="square"
data-item-width="145" data-item-height="65"
data-circle-radius="150"
data-direction="top-half"
class="circlemenu centered noshade">
<ul>
<li> <div data-type="button" data-icon="oa-it_radio"
data-on-background-color="green"
data-on-color="#ffffff"
class="big"></div></li>
<li><div data-type="image" data-url="https://images-na.ssl-images-amazon.com/images/I/71vY1xmaw+L.png" data-size="50%"
style="position:relative; top:0px; background-color:transparent;"
onclick="ftui.setFhemStatus('set AV.Receiver on; set AV.Receiver input server; set AV.Receiver volume 30; set AV.Receiver navigateListMenu AVM FRITZ!Mediaserver 6490/Internetradio/Techno Revival/Techno Revival Stream')"
>
</div></li>
<li><div data-type="image" data-url="https://www1.wdr.de/resources/img/wdr/logo/epgmodule/wdr4_logo_claim.svg" data-size="85%"
style="position: relative; top:0px; background-color:transparent"
onclick="ftui.setFhemStatus('set AV.Receiver on; set AV.Receiver input tuner;set AV.Receiver volume 45; set AV.Receiver preset 4')"
>
</div></li>
<li><div data-type="image" data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Hr3-Logo_2015.svg/125px-Hr3-Logo_2015.svg.png" data-size="75%"
style="position: relative; top:0px; background-color:transparent"
onclick="ftui.setFhemStatus('set AV.Receiver on; set AV.Receiver input tuner;set AV.Receiver volume 45; set AV.Receiver preset 8')"
>
</div></li>
</ul>
</div>
Mit div data-type image style background-color:transparent wird die Farbe von fhem-tablet-ui.css
div[data-type="circlemenu"] > .circlemenu-wrapper > .circlemenu > li
rgb(42, 42, 42)
geerbt.
Entweder in .css ändern, oder div style background-color:#ffffff (oder was auch immer deine background-color für die andere Elemente ist) statt transparent stetzen.
Transparent ist aber nicht gleich Farbe ;)
Es gibt doch img die haben transparenten hintergrund, damit nicht der Rahmen den Hintergund überschattet.
Zitat von: en-trust am 19 Juni 2020, 10:50:19
Transparent ist aber nicht gleich Farbe ;)
Es gibt doch img die haben transparenten hintergrund, damit nicht der Rahmen den Hintergund überschattet.
Da bringst Du mir nichts bei.
Ich bin nur ein bisschen weiter gegangen als Du. Anscheinend zu schnell für dich...
Das HTML-Code, was mit deiner Definition generiert wird sieht so aus:
<div data-type="circlemenu" data-border="square" data-item-width="145" data-item-height="65" data-circle-radius="150" data-direction="top-half" class="circlemenu centered noshade" data-ready="">
<div class="circlemenu-wrapper"><ul class="circlemenu circleMenu-closed" style="list-style: outside none none; margin: 0px; padding: 0px; width: 4em;">
<li style="display: block; width: 145px; height: 65px; text-align: center; line-height: 4em; position: absolute; z-index: 1000; background-color: transparent; transition: all 500ms ease 0s;">
<div data-type="button" data-icon="oa-it_radio" data-on-background-color="green" data-on-color="#ffffff" class="big" data-ready="">
<div class="famultibutton fa-stack fa-2x active">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(109, 224, 142);"></i>
<i id="fg" class="fa fa-stack-1x oa-it_radio" style="color: rgb(255, 255, 255);"></i>
<div id="fg" class="fa-stack-1x"></div>
</div>
</div>
</li>
<li style="display: block; width: 145px; height: 65px; text-align: center; line-height: 4em; position: absolute; z-index: 1; top: 0px; left: 0px; transform: scale(0); transition: all 500ms ease 0s;">
<div data-type="image" data-url="https://images-na.ssl-images-amazon.com/images/I/71vY1xmaw+L.png" data-size="50%" style="position:relative; top:0px; background-color:transparent;" onclick="ftui.setFhemStatus('set AV.Receiver on; set AV.Receiver input server; set AV.Receiver volume 30; set AV.Receiver navigateListMenu AVM FRITZ!Mediaserver 6490/Internetradio/Techno Revival/Techno Revival Stream')" class="" data-ready="">
<img alt="img" style="opacity: 0.8; height: auto; width: 100%; max-width: 50%;" src="https://images-na.ssl-images-amazon.com/images/I/71vY1xmaw+L.png">
</div>
</li>
<li style="display: block; width: 145px; height: 65px; text-align: center; line-height: 4em; position: absolute; z-index: 1; top: 0px; left: 0px; transform: scale(0); transition: all 500ms ease 0s;">
<div data-type="image" data-url="https://www1.wdr.de/resources/img/wdr/logo/epgmodule/wdr4_logo_claim.svg" data-size="85%" style="position: relative; top:0px; background-color:transparent" onclick="ftui.setFhemStatus('set AV.Receiver on; set AV.Receiver input tuner;set AV.Receiver volume 45; set AV.Receiver preset 4')" class="" data-ready="">
<img alt="img" style="opacity: 0.8; height: auto; width: 100%; max-width: 85%;" src="https://www1.wdr.de/resources/img/wdr/logo/epgmodule/wdr4_logo_claim.svg">
</div>
</li>
<li style="display: block; width: 145px; height: 65px; text-align: center; line-height: 4em; position: absolute; z-index: 1; top: 0px; left: 0px; transform: scale(0); transition: all 500ms ease 0s;">
<div data-type="image" data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Hr3-Logo_2015.svg/125px-Hr3-Logo_2015.svg.png" data-size="75%" style="position: relative; top:0px; background-color:transparent" onclick="ftui.setFhemStatus('set AV.Receiver on; set AV.Receiver input tuner;set AV.Receiver volume 45; set AV.Receiver preset 8')" class="" data-ready="">
<img alt="img" style="opacity: 0.8; height: auto; width: 100%; max-width: 75%;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Hr3-Logo_2015.svg/125px-Hr3-Logo_2015.svg.png">
</div>
</li>
</ul></div>
</div>Wie Du siehst, werden die div data-type="image" in einem li gepackt. Diese li ist so in der fhem-tablet-ui.css Datei definiert:
/* Circlemenu Widget */
div[data-type="circlemenu"] > .circlemenu-wrapper > .circlemenu > li {
background-color: #2A2A2A;
}
Heisst: deine img ist zwar auf transparentem Hintergrund, aber die steht auf einer li mit Hintergrundfarbe #2A2A2A
Daher, wie gesagt:
- entweder Du änderst die .css Datei: einfach die 3 Zeilen löschen. Das wirkt aber auf allen circlemenus, und das kann für einige Widgets oder für Text oder Links in circlemenus unangenehm werden
- oder du forcierst eine gewünschte Farbe in deinem Code, z.B. die Farbe deines schwarzen Hintergrunds (ja dann ist es nicht transparent! aber da die li selbst nicht transparent ist, macht es keinen Unterschied)