Übergroße SVG-Icons im Floorplan beim "darktouchpad" und "ios7touchpad" Style

[mcbo]

Hallo,

ich wollte heute mal meinen Floorplan optimieren,
da auf den IOS Geräten die Icons nicht richtig angezeigt werden. (longpoll - Problem)

Da gab es hier im Forum den Hinweis, SVG-Icons zu verwenden.

Leider werden die Icons übergroß dargestellt.
Das Problem tritt bei allen "Touch-Styles" auf.

Habe schon in den "touchpadstyle.css", "darkfloorplanstyle.css", "darkstyle.css", "darktouchpadstyle.css"
versucht mit

Code Auswählen Erweitern

svg { height:32px; width:32px; }
das Problem zu lösen.

Leider ohne Erfolg.


Gruß

Marcel

[fiedel]

Hi Marcel,

der Ansatz sollte richtig sein. Versuche mal per F12 bzw. Firebug herauszufinden (ggf. auf einem nicht- IOS- Gerät) wo man die Größe einstellen kann /muß. Sollte das bei einem PC/Android gehen, kann es auch sein, dass der Safari kein CSS kann. 

Gruß

Frank

[mcbo]

Versuche mal per F12 bzw. Firebug herauszufinden

Cool, kannte ich noch nicht. 

Bekomme hier folgende Fehlermeldung:

Code Auswählen Erweitern

Stylesheet http://xxx.xxx.xxx.xxx:8084/fhem/css/darktouchpadfloorplanstyle.css wurde nicht geladen, weil sein MIME-Typ, "text/html", nicht "text/css" ist.

Die Datei "darktouchpadfloorplanstyle.css" existiert bei mir nicht. 

Habe jetzt mal ein anderes css-File als "darktouchpadfloorplanstyle.css" gespeichert,
damit geht es.

Kannst Du mir den Original-Inhalt der "darktouchpadfloorplanstyle.css" mal posten?


Gruß

Marcel

[fiedel]

Mach ich heut abend, wenn es kein anderer vor mir schafft. Findest du aber, wenn du Updates ziehst, meine ich.

[fiedel]

Versuchs mal damit:

Code Auswählen Erweitern


body     { background-color: #444444; font-family:Verdana; font-size:9px; background-image:url(../images/default/fhemicon_dark.png); background-repeat:no-repeat; }
body[id~=Media]     { background-color: #A5A5A5; font-family:Verdana; font-size:9px; background-image:url(../icons/Media.bak); background-repeat:no-repeat; }

#backimg {position:absolute; top:15px; left:190px;}
#logo    { position:absolute; top: 10px; left: 10px; width:180px;  height:600px; background-image:url(../icons/darklogo); visibility:hidden;}
#fpmenu.fp_arrange   { position:absolute; bottom:20px; left:30px; min-width:310px; font-size:9px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px;
box-shadow:5px 5px 5px #000; }

#menu    { position:absolute; top:180px; left:30px; width:140px; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding-bottom: 6px; padding-top: 6px;}
#menu.floorplan   { position:absolute; top:180px; left:30px; width:128px; font-size:12px; border:1px solid #CCCCCC; background: #111111; box-shadow:5px 5px 5px #000; padding: 6px;}

#hdr     { position:absolute; top:15px; left:190px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px;
box-shadow:5px 5px 5px #000; margin-bottom: 10px;}
#content { position:absolute; top:50px; left:180px; bottom:10px; right:10px; text-align:center}
#startcontent {position:absolute; top:20px; left:200px; text-align:left; font-size: 16px; color:gray; }
#connect_err { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:40px; z-index: 10; }

a { color:#CCCCCC; }

img { -moz-border-radius:1px; border-radius:1px;} /* geändert fmf beides 8px */

table { -moz-border-radius:8px; border-radius:8px; }
table tr.sel { backround: #333333;}
table a:hover {color: #ffffff;}

  .fp_Peter       { border:1px solid gray; }
  .devicename     { font-size: 17px; font-weight: normal; text-align:center; color: #cccccc; } /* orig.:-> 14px; kein fontweight ; col: #111111*/
  .devicestate    { font-size: 16px; font-weight: normal; text-align:center; color: gray; } /* orig.:-> kein fontsize / fontweight ; col: #111111*/
  .devicecommands { font-size:14px; text-align:center; color: #111111; }
  .devicetimestamp{ font-size:10px; text-align:center; color: #111111; }

#sz_Rollo.devicename     {font-size:14px;}
#sz_Rollo.devicecommands {font-size:12px; text-align:center; }
#ez_Aussentemperatur_dummy.devicestate  {color:green; font-size:30px; }
#HomeStatus.devicestate  {color:green; font-size:30px; }
table.dummy              {min-width:100px;}
table.FHT                {min-width:100px; }
#wakeup.devicestate      {color:green; font-size:11px; }
#ez_FHT.devicestate      {color:green; font-size:30px; }
#Home.fp_Grundriss       {font-size:14px; width:100px; }
#Home.fp_Media           {font-size:14px; text-align:left; }
#Media                   {font-size:14px; }
#Grundriss               {font-size:14px; text-align:left; }
#w_WertListe1            {font-size:20px; color:gray}
.fp_tempvalue            {color:red; font-size:20px; }
.fp_humvalue             {color:blue; font-size:20px; }


h2,h3,h4 { color:#52865D; line-height:1.3; margin-top:1.5em; font-family:Verdana; }

/* detail-selector & slider */
select {  margin-left:5px; margin-right:5px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { margin-left:10px; float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#101010; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px; height:20px;
          line-height:20px; border:2px solid; color:white; text-align:center; }
.downText { margin-top:2px; }

svg      { height:32px; width:32px; fill:#278727; }

svg.on,svg.FS20_on { fill:orange; }


[mcbo]

Danke, sieht schon ganz gut aus.

Jetzt würde ich den Grundriss gerne, ganz nach links schieben.
(Den Block mit dem Fhem Haus entfernen)

Welche Parameter in der css-Datei sind das?

[fiedel]

Hi Marcel,

das kriegst du wieder einfach mit F12 raus.  Aber ich würde das sogar so lassen und in dem grauen Bereich Statusicons untereinander anordnen oder Linkbuttons zu andern FPs.

Gruß

Frank