Hauptmenü

Menübreite

Begonnen von sylvester, 18 Dezember 2015, 14:20:53

Vorheriges Thema - Nächstes Thema

sylvester

Hallo zusammen,

ich möchte dem Aussehen von Fhem bei mir den letzten Feinschliff verpassen. Dazu müsste ich ein paar Dinge tun, ich weiß allerdings nicht genau wo.

1. Menübreite im normalen Bildschirm:
Das Menü ist nicht breit genug für meine Menü-Einträge. Ich würde es daher gerne verbreitern. Kann ich das irgendwo komfortabel einstellen? Ein global-Attribut vielleicht?
Ich habe es über eine css-Datei versucht, das klappt allerdings nur bedingt, da dann die Floorplans nicht mehr richtig angezeigt werden:

@import url("defaultCommon.css");

#body    { font-size:16px;}
#logo    { margin-top:10px; margin-left:20px; width:120px; height:132px;
           background-image:url(../images/default/fhemicon.png); }
#menu    { margin-top:10px; margin-left:20px; width:240px; }
#hdr     { position:absolute; top:10px; left:250px; }
#content { position:absolute; top:50px; left:250px; bottom:20px; right:10px; }
#menuScrollArea { width: 240px; left:0px; top:0px; height:100%;
                  position:fixed; overflow-x:hidden; overflow-y:auto; }


2. Anzeige der Floorplans
In den Floorplan sollen die Hintergrundbilder auch direkt oben links ohne Menü dargestellt werden. Dafür habe ich in den floorplan

attr Erdgeschoss fp_noMenu 1

gesetzt. Damit ist das Menü zwar verschwunden, aber der Platz wird weiter vorgehalten. Was muss ich ändern damit der ursprüngliche Menüplatz verschwindet?

3. Ändern der Textausrichtung im Floorplan
Ich würde in einem Floorplan "Wetteranzeige" gerne den Text formatieren. Dazu habe ich für den floorplan

attr Wetteranzeige stylesheet Wetteranzeige.css

gesetzt.
Dann habe ich ein entsprechendes Stylesheet mit folgendem Inhalt angelegt:

@import url("defaultCommon.css");

#WA_Temp_Innen.devicestate             {font-size: 30px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Humi_Innen.devicestate             {font-size: 20px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Pres_Innen.devicestate             {font-size: 30px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Temp_Aussen.devicestate            {font-size: 30px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Humi_Aussen.devicestate            {font-size: 20px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Wind_Speed_Aussen.devicestate      {font-size: 20px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Wind_Speed_Sym_Aussen.devicestate  {font-size: 20px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Wind_Dir_Aussen.devicestate        {font-size: 20px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Sunrise.devicestate                {font-size: 20px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Sunset.devicestate                 {font-size: 20px; text-align:center; Color:#278727; font-weight:bold;}
#WA_RegenmengeTag.devicestate          {font-size: 30px; text-align:right; Color:#278727; font-weight:bold;}
#WA_RegenmengeLast1Hours.devicestate   {font-size: 20px; text-align:right; Color:#278727; font-weight:bold;}
#WA_RegenmengeLast3Hours.devicestate   {font-size: 20px; text-align:right; Color:#278727; font-weight:bold;}
#WA_RegenmengeLast24Hours.devicestate  {font-size: 20px; text-align:right; Color:#278727; font-weight:bold;}
#WA_SonnenmengeTag.devicestate         {font-size: 30px; text-align:right; Color:#278727; font-weight:bold;}
#WA_Zeit.devicestate                   {font-size: 30px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Datum.devicestate                  {font-size: 20px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Wochentag.devicestate              {font-size: 20px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Vorhersage  .devicestate           {font-size: 20px; text-align:center; Color:#278727; font-weight:bold;}
#WA_Raumklima.devicestate              {font-size: 20px; text-align:center; Color:#278727; font-weight:bold;}

Leider ändert sich die Textausrichtung nicht in rechtsbündig bei den entsprechenden Feldern. Was mache ich da falsch?

4. Anzeige Temperaturverlauf
Und als letztes habe ich einen Temperaturverlauf in die Wetteranzeige eingebunden. Diese wird mir mit Safari auch angezeigt. Der Internetexplorer streikt aber. Hat jemand eine Idee, woran das liegt?

Ich wäre für Tipps sehr dankbar ...

Viele Grüße

Stephan

sylvester

Ok, 2. habe ich jetzt gelöst.
Ich nutze für die Floorplans folgendes css:

@import url("floorplanstyle.css");

body     { background-color: white;}
#logo    { position:absolute; top: 0px; left: 0px;
           width:64px;  height:67px; background-image:url(../icons/fhem_smallscreen); }
#backimg {position:absolute; top:0px; left:0px;}
#menu.floorplan   { position:absolute; top:0px; left:0px; min-width:80px; font-size:14px; line-height:22px; }
#fpmenu.fp_arrange   { position:absolute; bottom:0px; left:0px; min-width:0px; font-size:9px; border:1px solid white;}
#startcontent {position:absolute; top:0px; left:0px; text-align:left; font-size: 16px; }