Eigenes Design

[Chris M.]

Klar, würde aber ein neues Widget oder ein Plugin brauchen.

Nur per CSS dürfte das wohl schwer werden.

[milymat]

Danke für deine Antwort.

Wäre es auch möglich, ähnlich dem Gira Homeserver, ein "Fenster" im "Fenster" zu bauen ? Wo ich zum Beispiel die IP-Cams durchblättern kann.

[Chris M.]

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

Die Class-Lösung von der swiss gesprochen hat ist sicher die nachhaltigere und logische Lösung.
Eine ID gibt es jedoch schon. Die wird je nach Position des Widgets in der Config festgelegt und hängt am Widget-Container (einfach mal den DOM der fertigen Seite ansehen ).
Für spezielle Effekte sicher ein ganz passable Lösung - aber bei manchen Änderungen in der Config muss Du die CSS dann aber nachziehen

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 >

Das kommt darauf an, wie gut Du mit CSS bist

Als ich das planet-Design gemacht hatte wollte ich herausfinden wie viel mit CSS geht. Es geht sehr viel! Und manches nur unerwartet schwer (oder gar nicht).
Dann könnte eine JS evtl. noch mithelfen.

[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 >

[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]

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]

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;
}

[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.

[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]

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...

[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]

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

[milymat]

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

[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]

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.