Swiper - Transparenter Hintergrund

Begonnen von gloob, 08 Februar 2016, 13:06:20

Vorheriges Thema - Nächstes Thema

gloob

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?
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

roman1528

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^^
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

Moonlightkid

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
Synology 220+, Hue, MAX!, Sonoff und weiteres