Eigenes Design

[milymat]

Hallo zusammen,

es gibt schon ein paar vorgefertigte Designs, aber ich würde gerne ein igenes Design erstellen.

Leider hab ich keine Anleitung gefunden dafür, gibt es hierfür ein Tutorial ?

[MicHau]

Nein, ein Tutorial gibt es nicht. Du kannst dich aber sicherlich am Metal-Design orientieren.

Viel Spaß bei der CSS-Schlacht.

[MicHau]

Nein, ein Tutorial gibt es nicht. Du kannst dich aber sicherlich am Metal-Design orientieren.

Viel Spaß bei der CSS-Schlacht.

Achso, vielleicht noch als Input...

Eigenen Ordner mit Design-Namen erstellen im designs-Ordner. Struktur aus dem Metal-Ordner übernehmen und anpassen oder alles leeren und neu anfangen. Wenn du es im SVN-Repository einfügst, können dir auch weitere Entwickler helfen.

[milymat]

Danke für deine Antwort:

Jetzt bin ich etwas verwirrt.

Ich dachte da ist eine einfach HTML drin. Jetzt sind da ja nur CSS und JavaScript Dateien.

[MicHau]

Ich dachte da ist eine einfach HTML drin. Jetzt sind da ja nur CSS und JavaScript Dateien.

Ja, das HTML-Gerüst wird immer vom Visu-Kern zusammengebaut.
Die Gestaltung wird dann im Design mit CSS gemacht. In den meisten Fällen reicht das auch, manche Dinge lassen sich aber nur in JavaScript effektiv umsetzen, deswegen hat peuter beim Metal-Design ein bisschen zusätzliches JavaScript erstellt, um die notwendigen CSS-Tags zu setzen.

Kannst du denn mal umreißen, was du gerne machen möchtest?

[milymat]

ich würde gerne die Ecken wegbekommen, damit es nach dem hier aussieht:
https://knx-user-forum.de/smartvisu/...omeserver.html

[swiss]

Dazu musst du die CSS bearbeiten. Die Rundungen werden durch Border-radius festgelegt. Wenn du da 0 einstellst, hast du Ecken.

[MicHau]

ich würde gerne die Ecken wegbekommen, damit es nach dem hier aussieht:
https://knx-user-forum.de/smartvisu/...omeserver.html

Ich nehme an, du meinst die runden Ecken.
Kopiere dir den folgenden Code in die Datei custom.css im ./designs/metal-Verzeichnis:

.navbar .group > div > h2 {
  border-radius: 0
}
.group > div > h2 {
  border-radius: 0
}
.navbar .group {
  border-radius: 0
}
.group.widget {
  border-radius: 0
}

Und lasse uns wissen, ob du mit dem Ergebnis zufrieden bist.

Sende doch auch bitte einen Screenshot vom Ergebnis, damit man sieht, was du meinst.

[swiss]

Ich habe:

.group > div > h2 {
    font-size: 0.8em;
    padding: 0 1em;
    margin: 0;
    border: none;

    border-radius: 0em;
    -moz-border-radius: 0em;
    -webkit-border-radius: 0em;

    border-bottom-left-radius: 0;
    -moz-border-bottom-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;
    -moz-border-bottom-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    
    color: #FFF;
    font-weight: bold;
}
.navbar .group > div > h2 {
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-top-right-radius: 0em;
    -moz-border-top-right-radius: 0em;
    -webkit-border-top-right-radius: 0em;
    text-shadow: none;
}

.navbar .group {
  border-radius: 0
}

.group.widget {
    overflow: hidden;
    margin: 0.3em;
    padding: 0;
    border-radius: 0em;
    moz-border-radius: 0em;
      -webkit-border-radius: 0em;
      -o-border-radius: 0em;
}

Wobei das letzte Navbar element immer noch abgerundet wird...

[milymat]

Cool vielen Dank!

Leider passt das letzte Element nicht:

Bildschirmfoto 2013-12-22 um 22.52.50.png

Kann ich nem Widget eine ID mitgeben um es später direkt im CSS anzusprechen ?

[swiss]

Ja das geht. Wenn du den Editor auf complex umschaltest, kannst du einigen Widgets eine CSS class zuweisen. Über diese kannst du dann in der CSS das Widget beeinflussen.

class unterstützen derzeit:

group
strftime
info

Leider unterstützen noch längst nicht alle Widgets über diese Option.

[swiss]

Die runde Ecke im letzten Navbarelement kriegst du weg mit:

.navbar > .widget_container:first-child .group .widget_container:last-child, .navbar > .widget_container:first-child .group div.widget_container:last-child .widget {
    border-width: 1px 0 0 0;
    border-bottom-right-radius: 0em;
}
.navbar .group .widget_container:last-child,.navbar .group .widget_container:last-child .widget {
    border-bottom-right-radius: 0em;
}

[milymat]

Ja das geht. Wenn du den Editor auf complex umschaltest, kannst du einigen Widgets eine CSS class zuweisen. Über diese kannst du dann in der CSS das Widget beeinflussen.

Da ich CV mit OpenHab verwende, kann ich den Editor nicht nutzen, kann ich die Klasse direkt in der XML Datei einfügen ?

[swiss]

Klar

Aber leider momentan nur bei den oben genannten Widgets.

An Hand des strftime Widget sieht das wie folgt aus...

<strftime lang="de" format="%H:%M" class="timebig">

class kann dabei ein beliebiger zusammenhängender Name sein. Und in der custom.css kann danach wie folgt darauf zugegriffen werden:

.custom_timebig {
    padding: 0;
    margin: 0;
    color: #75d5ff;
    min-height: 0mm;
    line-height: 8mm;
    font: bold 12mm "Lucida Grande", Lucida, Verdana, sans-serif;
}
 
.custom_timebig > div.strftime_value {
    text-align: center;
    line-height: 14mm;
}

geht also auch ohne Editor Für das Info oder groupe Widget ist das vorgehen gleich

[milymat]

Nochmal vielen Dank für eure Hilfe.


Ich hab nochmal eine Frage:

Kann ich ein scrollbares Menü bauen ?

z.B. Punkt 1 | Punkt 2 | Punkt 3 | Punkt 4 | Punkt 5

und wenn das Display zu klein ist:

< Punkt 1 | Punkt 2 >