Autor Thema: Swiper - Transparenter Hintergrund  (Gelesen 1468 mal)

Offline gloob

  • Hero Member
  • *****
  • Beiträge: 2989
Swiper - Transparenter Hintergrund
« am: 08 Februar 2016, 13:06:20 »
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?
« Letzte Änderung: 08 Februar 2016, 13:11:48 von gloob »
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

Offline roman1528

  • Sr. Member
  • ****
  • Beiträge: 689
    • FTUI-User-Demo-roman1528
Antw:Swiper - Transparenter Hintergrund
« Antwort #1 am: 08 Februar 2016, 16:16:19 »
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^^
Intel D2700DC Atom 2x2,13GHz;4GB RAM;60GB SSD;8TB eSATA als NAS: FHEM 5.9,FTUI,AMAD,8" Tablet's+Fully;HUE;Trådfri;ESPRGBWW;HM;ESP8266;nanoCUL433;miniCUL868;Duofern;MQTT
RPi3+: FHEM 5.9;I2C;GPIO;Wigand-RFID;G-Tag
RPi3: FHEM 5.9;DIY Relais-I/O-Board;I2C;GPIO
FHEM & FTUI: www.ueberueck.com

Offline Moonlightkid

  • New Member
  • *
  • Beiträge: 12
Antw:Swiper - Transparenter Hintergrund
« Antwort #2 am: 12 September 2019, 05:05:46 »
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
1xRaspi3, 2xSonoff Basic, Sonoff-Lichtschalter, Hue-Beleuchtung inkl. Bewegungsmelder, Max! Raumthermostate, 3xecho-dot - und ganz am Anfang mit FHEM

 

decade-submarginal