[erledigt]circlemenu Unterschiedlicher Hintergrund bei push- und switch-widget

[derHeimwerker]

Hallo,

ich habe gerade circlemenues gebaut, welche meine Rollläden ansteuert. Einmal in Vebindung mit einerm push-widget (links)

Code Auswählen Erweitern


<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:

Code Auswählen Erweitern


<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

[amenomade]

Indem Du beide mit einem switch-widget baust?

[derHeimwerker]

Habe auf switch umgestellt. So sieht es gut aus.

[en-trust]

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 ?

[amenomade]

html Code?

[en-trust]

Hier noch mein html code...

Code Auswählen Erweitern

<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>


[amenomade]

Mit div data-type image style background-color:transparent wird die Farbe von fhem-tablet-ui.css

Code Auswählen Erweitern

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.

[en-trust]

Transparent ist aber nicht gleich Farbe 
Es gibt doch img die haben transparenten hintergrund, damit nicht der Rahmen den Hintergund überschattet.

[amenomade]

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:

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

/* 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)