FHEM Forum

Hallo,

Ich habe mir mit dem Swiper Widget eine Wetter Visu gebastelt und jetzt fehlt mir nur noch der halb transparente Hintergrund.

Das Widget ist wie folgt angelegt:


<!-- ****************************************** -->
<!-- Wetter -->
<!-- ****************************************** -->
<li data-row="4" data-col="3" data-sizex="1" data-sizey="2" class="semitransparent">
<header><font size="+1">Wetter</font></header>
<div data-type="swiper" data-height="160px" data-width="210px" class="top-space" class="semitransparent">
<ul>
<li>
<div class="center" class="semitransparent">
<div data-type="label" data-device="AgroWeather" data-get="temperature" data-unit="°C&nbsp;" class="bottom bigger thin inline verticalLine" size="+1"></div>
<div class="inline">
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="bigplus thin"></div>
</div>
</div><div class="row"></div>
<div class="center">
<div data-type="label" data-device="AgroWeather" data-get="fc0_date" data-substitution="toDate().eeee()+','" class="left large cell"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_date" data-substitution="toDate().ddmm()" class="left large cell"></div>
</div>
<li>
<div class="center">
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="°C&nbsp;" class="bottom bigger thin inline verticalLine" size="+1"></div>
<div class="inline">
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="bigplus thin"></div>
</div>
</div><div class="row"></div>
<div class="center">
<div data-type="label" data-device="AgroWeather" data-get="fc1_date" data-substitution="toDate().eeee()+','" class="left large cell"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_date" data-substitution="toDate().ddmm()" class="left large cell"></div>
</div>
</li>
<li>
<div class="center">
<div data-type="label" data-device="AgroWeather" data-get="fc2_tempMax" data-unit="°C&nbsp;" class="bottom bigger thin inline verticalLine" size="+1"></div>
<div class="inline">
<div data-type="weather" data-device="AgroWeather" data-get="fc2_weatherDay" class="bigplus thin"></div>
</div>
</div><div class="row"></div>
<div class="center">
<div data-type="label" data-device="AgroWeather" data-get="fc2_date" data-substitution="toDate().eeee()+','" class="left large cell"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc2_date" data-substitution="toDate().ddmm()" class="left large cell"></div>
</div>
</li>
<li>
<div class="center">
<div data-type="label" data-device="AgroWeather" data-get="fc3_tempMax" data-unit="°C&nbsp;" class="bottom bigger thin inline verticalLine" size="+1"></div>
<div class="inline">
<div data-type="weather" data-device="AgroWeather" data-get="fc3_weatherDay" class="bigplus thin"></div>
</div>
</div><div class="row"></div>
<div class="center">
<div data-type="label" data-device="AgroWeather" data-get="fc3_date" data-substitution="toDate().eeee()+','" class="left large cell"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc3_date" data-substitution="toDate().ddmm()" class="left large cell"></div>
</div>
</li>
<li>
<div class="center">
<div data-type="label" data-device="AgroWeather" data-get="fc4_tempMax" data-unit="°C&nbsp;" class="bottom bigger thin inline verticalLine" size="+1"></div>
<div class="inline">
<div data-type="weather" data-device="AgroWeather" data-get="fc4_weatherDay" class="bigplus thin"></div>
</div>
</div><div class="row"></div>
<div class="center">
<div data-type="label" data-device="AgroWeather" data-get="fc4_date" data-substitution="toDate().eeee()+','" class="left large cell"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc4_date" data-substitution="toDate().ddmm()" class="left large cell"></div>
</div>
</li>
</li>
</ul>
</div>
</li>


Ich habe schon versucht ein  class="semitransparent" überall einzufügen allerdings bleibt der Bereich der zur Seite gezogen wird grau.

Hat jemand eine Idee was mir noch fehlt?

Moin.

<li> bearbeiten!

<li style="background: rgb(0, 0, 0) !important; background: rgba(0, 0, 0, 0.3) !important;">


Oder in der fhem-tablet-ui-user.css eine neue class anlegen:

.semitransparent {
     background: rgb(0, 0, 0) !important;
     background: rgba(0, 0, 0, 0.3) !important;
}


Diese natürlich einbinden:

     <link rel="stylesheet" href="/fhem/mobile/css/fhem-tablet-ui-user.css" />


Dann muss <li> natürlich so ausehen:

<li class="semitransparent">


Mein Tipp für den Swiper:
Komplett Transparent machen:

<li style="background:transparent !important;">


Oder in der fhem-tablet-ui-user.css:

.transparent {
     background:transparent !important;
}


Grüße^^

Super!

style="background: rgb(0, 0, 0) !important; background: rgba(0, 0, 0, 0.3) !important;" einzufügen reicht mir vollkommen - vielen Dank für den Tipp!!!  ;D