Abfallkalender - Schriftgröße und Höhe ändern

[Kusselin]

Hallo Zusammen,

ich wollte gerne z.B. den "BIOMÜLL das DATUM  und den TAG etwas höher setzen...siehe Bild...leider weiss ich nicht wie ich es in meinen Code einfügen kann. Ich liste hier mal meinen Code. Würde sich jemand bereiterklären und mir den Zusatz hier posten...

Vielen Dank
Gruss
Kussel

Code Auswählen Erweitern

<header>
<div data-type="label" class="medium">Abfall Kalender</div>
</header>

<div class="top-space small">

<div class="inline">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="BioTonne"
                                  data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
                                  data-on-colors='["SaddleBrown","SaddleBrown"]'
                                  data-get-on='["0","2"]'
                                  class="bigger inline" >
                           </div>
                                  <div data-type="label"
                                          class="">Biomüll</div>  
 
<div data-type="label"
data-device="Abfalltermine"
data-get="braun_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="braun_date"
class="small">
</div>

</div>

<div class="inline">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="BlaueTonne"
                                  data-icons='["fa-trash  warn fa-spin","fa-trash  warn"]'
                                  data-on-colors='["blue","blue"]'
                                  data-get-on='["0","2"]'
                                  class="bigger inline" >
                           </div>
                                  <div data-type="label"
                       class="">Glasbox</div>
                   
<div data-type="label"
data-device="Abfalltermine"
data-get="blau_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="blau_date"
class="small">
</div>
   
</div>

<div class="inline">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="GrueneTonne"
                                  data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
                                  data-on-colors='["green","green"]'
                                  data-get-on='["0","2"]'
                                  class="bigger inline" >
                           </div>
                                  <div data-type="label"
                                          class="">Grüne Tonne</div>
                   
   
<div data-type="label"
data-device="Abfalltermine"
data-get="gruen_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="gruen_date"
class="small">
</div>
   
</div>

<div class="inline">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="Restmuell"
                                  data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
                                  data-on-colors='["gray","grey"]'
                                  data-get-on='["0","2"]'
                                  class="bigger inline" >
                           </div>
                                  <div data-type="label"
                                          class="">Restmüll</div>
                   
   
<div data-type="label"
data-device="Abfalltermine"
data-get="grau_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="grau_date"
class="small">
</div>
</div>

habe jetzt mal bissl gegoogelt...unter dem Link hier:

Code Auswählen Erweitern

https://wiki.fhem.de/wiki/FHEM_Tablet_UI

habe ich das hier gefunden:

Code Auswählen Erweitern

top-space z.B.

aber wo müsste ich jetzt zum testen das in den Code einfügen??? deshalb frage ich hier..

wäre nett wenn man einen Beispielcode nennt von meinem Code zB.

[MKeY]

Code Auswählen Erweitern

class="top-space small"
ist so schon richtig!

Code Auswählen Erweitern

top-space schiebt aber das ganze nach unten!

Code Auswählen Erweitern

top-narrow schiebt es nach oben
ansonsten kannst du auch bei den bildern mal mit

Code Auswählen Erweitern

class="compressed-50" testen
in

Code Auswählen Erweitern

class="Eigenschaft1 Eigenschaft2" kannst du mit den Klassen hantieren, getrennt durch Leerzeichen

[TomLee]

Hi,

ein

Code Auswählen Erweitern

class="top-narrow"

statt

Code Auswählen Erweitern

class=""

sollte die Label: Biomüll, Glasbox, Grüne Tonne und Restmüll

15px höher setzen.

Versuch's mal damit, 100 Pro sicher bin ich mir auch nicht.

Grüße

Thomas

[Kusselin]

Hi Thomas,

danke für die Info..Du bist doch der aus der Pfalz gell

Aber wo setze ich das

Code Auswählen Erweitern

class="top-narrow" in meinem Code hin?? weisst was ich meine??In welche Zeile??

Gruss

Ach..und das datum und den tag muss natürlich auch etwas höher.....

[TomLee]

Es gibt genau 4 Stellen in deinem Code die so aussehen:

Code Auswählen Erweitern

class=""


Die ersetzt du durch

Code Auswählen Erweitern

class="top-narrow"

Grüße aus der Pfalz

[Kusselin]

O.K. super...danke Dir ich probiers heute abend aus...

ahh dann warst du das der beim vorletzten Rhein neckar Treffen etwas später kam udn dann über Sonoff philosophiert hat 

Gruss von der Bergstraße


Thomas: also das

Code Auswählen Erweitern

class="bigger inline" > ersetze ich durch

Code Auswählen Erweitern

class="top-narrow"...korrekt??

[Fixel2012]

O.K. super...danke Dir ich probiers heute abend aus...

ahh dann warst du das der beim vorletzten Rhein neckar Treffen etwas später kam udn dann über Sonoff philosophiert hat 

Gruss von der Bergstraße


Thomas: also das

Code Auswählen Erweitern

class="bigger inline" > ersetze ich durch

Code Auswählen Erweitern

class="top-narrow"...korrekt??

Je nach dem, wenn du die klassen "bigger inline" noch brauchst, kannst du die class "top-narrow" auch einfach noch dazu nehmen.

als so: class="bigger inline top-narrow"

[TomLee]

Wenn er  die Zeilen

Code Auswählen Erweitern

class="bigger inline"

mit 

Code Auswählen Erweitern

top-narrow

ergänzt, werden doch die Müll-Symbole um 15px nach oben versetzt.!?


Nochmal :

Code Auswählen Erweitern

class=""

im div der Label (Biomüll, Glasbox, Grüne Tonne und Restmüll) , ersetzen/ergänzen mit

Code Auswählen Erweitern

class="top-narrow"

[Kusselin]

Also..neuigkeiten:

Wenn ich den Code so ändere für die Biotonne:

Code Auswählen Erweitern

<div class="inline">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="BioTonne"
                                  data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
                                  data-on-colors='["SaddleBrown","SaddleBrown"]'
                                  data-get-on='["0","2"]'
                                  class="top-narrow" >
                           </div>
                                  <div data-type="label"
                                          class="">Biomüll</div>  
 
<div data-type="label"
data-device="Abfalltermine"
data-get="braun_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="braun_date"
class="small">
</div>

</div>

dann sieht es so aus wie auf dem Bild..also es wird nix nach oben versetzt... 

[TomLee]

Ich hoffe du verstehst mich jetzt:

<header>
            <div data-type="label" class="medium">Abfall Kalender</div>
         </header>
         
         <div class="top-space small">
         
         <div class="inline">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="BioTonne"
                                  data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
                                  data-on-colors='["SaddleBrown","SaddleBrown"]'
                                  data-get-on='["0","2"]'
                                  class="bigger inline" >
                           </div>
                                  <div data-type="label"
                                          class="">Biomüll</div>          
                               
                     <div data-type="label"
                        data-device="Abfalltermine"
                        data-get="braun_weekday"
                        class="small">
                     </div>
                     
                     <div data-type="label"
                        data-device="Abfalltermine"
                        data-get="braun_date"
                        class="small">
                     </div>      
                     
         </div>

         <div class="inline">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="BlaueTonne"
                                  data-icons='["fa-trash  warn fa-spin","fa-trash  warn"]'
                                  data-on-colors='["blue","blue"]'
                                  data-get-on='["0","2"]'
                                  class="bigger inline" >
                           </div>
                                  <div data-type="label"
                                  class="">Glasbox</div>
                   
                     <div data-type="label"
                        data-device="Abfalltermine"
                        data-get="blau_weekday"
                        class="small">
                     </div>
                     
                     <div data-type="label"
                        data-device="Abfalltermine"
                        data-get="blau_date"
                        class="small">
                     </div>      
               
         </div>
            
         <div class="inline">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="GrueneTonne"
                                  data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
                                  data-on-colors='["green","green"]'
                                  data-get-on='["0","2"]'
                                  class="bigger inline" >
                           </div>
                                  <div data-type="label"
                                          class="">Grüne Tonne</div>
                   
               
                     <div data-type="label"
                        data-device="Abfalltermine"
                        data-get="gruen_weekday"
                        class="small">
                     </div>
                     
                     <div data-type="label"
                        data-device="Abfalltermine"
                        data-get="gruen_date"
                        class="small">
                     </div>      
               
         </div>   
         
         <div class="inline">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="Restmuell"
                                  data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
                                  data-on-colors='["gray","grey"]'
                                  data-get-on='["0","2"]'
                                  class="bigger inline" >
                           </div>
                                  <div data-type="label"
                                          class="">Restmüll</div>
                   
               
                     <div data-type="label"
                        data-device="Abfalltermine"
                        data-get="grau_weekday"
                        class="small">
                     </div>

Code Auswählen Erweitern

class=""

ändern in

Code Auswählen Erweitern

class="top-narrow"

[Kusselin]

Hi TomLee,

nee des geht net 

mensch bin ich spakko......

Jetzt hab ichs so geändert:

Code Auswählen Erweitern

<div class="inline">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="BioTonne"
                                  data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
                                  data-on-colors='["SaddleBrown","SaddleBrown"]'
                                  data-get-on='["0","2"]'
                                  class="bigger inline" >
                           </div>
                                  <div data-type="label"
                                          class="top-narrow">Biomüll</div>  
 
<div data-type="label"
data-device="Abfalltermine"
data-get="braun_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="braun_date"
class="small">
</div>

</div>

und die Tonne wird auch nicht nach oben gesetzt mit Datum und Tag

[TomLee]

Ich habs rein interessehalber bei mir jetzt mal ausprobiert, also bei mir geht's. Siehe Anhang.

Code Auswählen Erweitern

<header>
<div data-type="label" class="medium">Abfall Kalender</div>
</header>

<div class="top-space small">

<div class="inline">
<div data-type="symbol"
data-device="myAbfall"
data-get="Bioabfall_text"
data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
data-on-colors='["SaddleBrown","SaddleBrown"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div class="top-narrow">Biomüll</div>

<div data-type="label"
data-device="myAbfall"
data-get="Bioabfall_weekday"
class="small">
</div>

<div data-type="label"
data-device="myAbfall"
data-get="Bioabfall_date"
class="small">
</div>

</div>

<div class="inline">
<div data-type="symbol"
data-device="MuellterminDummy"
data-get="BlaueTonne"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["blue","blue"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div data-type="label"
class="">Glasbox</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="blau_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="blau_date"
class="small">
</div>

</div>

<div class="inline">
<div data-type="symbol"
data-device="MuellterminDummy"
data-get="GrueneTonne"
data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
data-on-colors='["green","green"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div data-type="label"
class="">Grüne Tonne</div>


<div data-type="label"
data-device="Abfalltermine"
data-get="gruen_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="gruen_date"
class="small">
</div>

</div>

<div class="inline">
<div data-type="symbol"
data-device="MuellterminDummy"
data-get="Restmuell"
data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
data-on-colors='["gray","grey"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div data-type="label"
class="">Restmüll</div>


<div data-type="label"
data-device="Abfalltermine"
data-get="grau_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="grau_date"
class="small">
</div>
</div>

[Kusselin]

Poste bitte mal den Code..danke dir


Gesendet von iPhone mit Tapatalk

[setstate]

So vllt.

Code Auswählen Erweitern


<header class="medium">Abfall Kalender</header>

<div class="hbox">

<div class="vbox">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="BioTonne"
                                  data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
                                  data-on-colors='["SaddleBrown","SaddleBrown"]'
                                  data-get-on='["0","2"]'
                                  class="bigger bottom-narrow" >
                           </div>
                                  <div class="">Biomüll</div>  
 
<div data-type="label"
data-device="Abfalltermine"
data-get="braun_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="braun_date"
class="small">
</div>

</div>

<div class="vbox">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="BlaueTonne"
                                  data-icons='["fa-trash  warn fa-spin","fa-trash  warn"]'
                                  data-on-colors='["blue","blue"]'
                                  data-get-on='["0","2"]'
                                  class="bigger bottom-narrow" >
                           </div>
                                  <div class="">Glasbox</div>
                   
<div data-type="label"
data-device="Abfalltermine"
data-get="blau_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="blau_date"
class="small">
</div>
   
</div>

<div class="vbox">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="GrueneTonne"
                                  data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
                                  data-on-colors='["green","green"]'
                                  data-get-on='["0","2"]'
                                  class="bigger bottom-narrow" >
                           </div>
                                  <div class="">Grüne Tonne</div>
                   
   
<div data-type="label"
data-device="Abfalltermine"
data-get="gruen_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="gruen_date"
class="small">
</div>
   
</div>

<div class="vbox">
                           <div data-type="symbol"
                                  data-device="MuellterminDummy"
                                  data-get="Restmuell"
                                  data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]'
                                  data-on-colors='["gray","grey"]'
                                  data-get-on='["0","2"]'
                                  class="bigger bottom-narrow" >
                           </div>
                                  <div class="">Restmüll</div>
                   
   
<div data-type="label"
data-device="Abfalltermine"
data-get="grau_weekday"
class="small">
</div>

<div data-type="label"
data-device="Abfalltermine"
data-get="grau_date"
class="small">
</div>
</div>
                </div>


data-type="label" ist nicht für fixen Text nötig

[TomLee]

OK, danke. Hab mir doch gleich mal hbox und vbox angeschaut und versucht bei mir umzusetzen.

Meine bisherige Lösung:

Code Auswählen Erweitern

<header>Müllabfuhr</header>
<div data-device="myAbfall" data-type="symbol"
class="bigger"
data-get="next"
data-get-warn=".*(\d+).*"
data-get-on='["RestabfallWertstoffe_1","Bioabfall_1","Hecken-undBaumschnitt_1","Schadstoffmobil_1","RestabfallWertstoffe_.*","Bioabfall_.*","Hecken-undBaumschnitt_.*","Schadstoffmobil_.*"]'
data-on-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn blink","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'>
</div>
<div data-type="label"
data-device="myAbfall"
data-get="next_text"
class="top-narrow">
</div>


Und  jetzt mit vbox:

Code Auswählen Erweitern

<header>Müllabfuhr</header>
<div class="vbox">
<div data-device="myAbfall" data-type="symbol"
class="bigger"
data-get="next"
data-get-warn=".*(\d+).*"
data-get-on='["RestabfallWertstoffe_1","Bioabfall_1","Hecken-undBaumschnitt_1","Schadstoffmobil_1","RestabfallWertstoffe_.*","Bioabfall_.*","Hecken-undBaumschnitt_.*","Schadstoffmobil_.*"]'
data-on-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn blink","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'>
</div>
<div data-type="label"
data-device="myAbfall"
data-get="next_text"
class="">
</div>
</div>

Mit dem Ergebnis das der Abstand wieder größer wird, siehe Bild im Anhang. Was mach ich den nun falsch?