• Hier möchte ich mal kurz an meinem VIS die Verwendung von CSS im VIS erläutern

    Da ich öfter mal nach meinem Design gefragt werde, möchte ich hier mal grundsätzlich erklären, wie man im VIS mit CSS die meisten Widgets einfach und einheitlich stylen kann.

    I - Einleitung

    II - Vorweg:

    Alle Widgets lassen sich direkt und einzeln über die CSS-Tabs in den Einstellungen anpassen



    diese Felder machen nichts anderes, als die entsprechende CSS-Option, nur etwas einfacher dargestellt.
    Auch hier sind komplexere Eingaben möglich. z.B.


    Grundsätzlich unterscheidet sich das Styling hier nicht von dem generellen CSS-Styling im "CSS"-Reiter. Es sieht einfach nur ein bischen übersichtlicher aus.

    III - Grundsätze

    CSS-Styles, die für das gesamte VIS gelten sollen, werden grundsätzlich im "CSS"-Reiter eingegeben,

    Wichtig ist, dass hier "Projekt" anstatt "Global" eingestellt wird, ansonsten hätten die Einstellungen auch Auswirkungen auf die Editor-Oberfläche.


    um einem Widget irgendeine CSS-Klasse zuzuweisen, muss diese direkt im Eigenschaften-Dialog des Widgets hinterlegt werden.

    IV - CSS

    V - Die Styles

    Im VIS können nahezu alle CSS-Eigenschaften, die es gibt, verwendet werden. Hier und da gibt es bei dem ein oder anderen Widget leider ein paar Einschränkungen oder irgendwelche Eigenschaften die nicht wie gewollt funktionieren. Da hilft dann leider nur probieren.


    VI - Beispiel: mein VIS

    Wer sich etwas mit CSS beschäftigt, wird schnell feststellen, das sich mehrere CSS-Klassen kombinieren lassen.

    Dies ist grundsätzlich sinnvoll. Es erhöht die Übersichtlichkeit und vereinfacht notwenige Überarbeitungen.


    Ich style meine Widgets mit 3 Klassen. Damit vermeide ich doppelte und redundante Einträge.

    Meine Widgets haben also grundsätzlich 3 Klassen (wie schon in der Einleitung in den Screenshots zu sehen)


    Damit fahre ich sehr gut und bin recht flexibel.

    VI.I - Hauptkasse

    meine "Grundklasse" heißt ".rod" (engl. Stäbchen)

    Ihr könnt eure Kasse natürlich auch ".Paul" oder wie auch immer nennen.


    Ich nutze diese "Grundklasse" um allen Widgets die Grundeinstellungen mitzugeben, die für alle Widgets gleich sein sollen, wie Textausrichtung und Ränder.

    mein CSS sieht dann so aus.

    Die ganzen Einträge mit "center" am Ende sind teilweise doppelt, aber da unterschiedliche Widgets teilweise auf andere Eigenschaften reagieren, ist dies leider nötig.

    VI.II - Größe

    In meinem VIS verwende ich Widgets unterschiedlicher Größen.

    Meine Standardhöhe für einzeilige Grafiken ist 35 Pixel. Für z.B. Buttons verwende ich die doppelte Höhe also 70 Pixel.

    Deswegen habe ich verschiede Styles für die verschiedenen Höhen. In diesen Styles selbst ist das "height"-Attribut gesetzt, das heißt, das Widget wird 'automatisch' in der richtigen Höhe angezeigt. Eine zusätzliche Höhenangabe in den Eigenschaften des Widgets ist damit nicht mehr notwenig.


    Derzeit habe ich für die Größe folgende Styles definiert.

    Anmerkung:

    Die 'Icons', die ich in meiner VIS als rechteckige Buttons nutze, haben nicht nur ein "height"-Attribut sondern auch ein "width"-Attribut, welches die Breite bestimmt.

    Die zusätzlichen Angaben im ".icon"-Style sind notwendig, damit die eingefügte Grafik auch vernünftig angezeigt wird. (Ohne diese Angaben wären die Grafiken leider an die obere Kante gequetscht)

    VI.III - Farbe

    als drittes definiere ich die Farbe der Widgets.

    Hier ist garnicht so viel zu zu sagen. Es werden jeweils nur der Hintergrund mit Fabverlauf sowie die Schriftfarbe definiert.

    Anmerkung: Die beiden letzten Klassen mit "glow" am Anfang, definieren nur einen leuchtenden Rand um die Widgets und sind keine 'eigentlichen' Farbklassen in meinem Sinn, sonder werden von mir nur zusätzlich zu den gewählten Farbklassen eingesetzt, um einem Widget zusätzlich zur Farbe, einen Leuchteffekt mitzugeben (siehe auch nächstes Kapitel)

    VI.IV - 4te Klasse

    Einige Widgets habe ich für spezielle Funktionen vorgesehen, deshalb haben diese eine 4te CSS-Klasse wie z.B .blink oder .marquee (oder auch die "glow"-Effelkte im vorherigen Kapitel).

    Diese dienen zusätzlich zu den normalen Stylings dazu, das Widget blinken zu lassen oder den Text im Widget als Laufschrift zu gestalten.

    Auf die Funktionen will ich nicht extra eingehen, da verweise ich die Weblinks unten.

    VII - Der Einsatz

    Grundsätzlich lässt sich nahezu jede CSS-Eigenschaft benutzen, wichtig zu wissen ist dabei, das nicht jedes Widget mit jeder CSS-Eigenschaft gestylt werden kann.

    Hier gilt leider einfach das Motto... Versuch macht kluch...


    Weiterhin zu beachten ist, dass die CSS-Klasse im "CSS"-Reiter grundsätzlich mit einem Punkt voran geschrieben werden muss. (Wie es auch die CSS-Definition sagt)

    Um dem Widget die entspechenden Klassen zuzuweisen, werden diese ohne Punkte in den Eigenschaften-Dialog geschrieben.

    VIII - Besonderheiten

    Es gibt Widgets, die sich anders Verhalten und spezielle Styling-Optionen benötigen.


    Als Beispiel hier kurz erwähnt:

    VIII.I - TV-Spielfilm-Widget

    Da es sich hier um tabellarische Ansichten handelt, lassen sie diese nur durch die Verwendung von CSS-Styles für Tabellen bearbeiten.


    Hier mal mein Code dazu:


    VIII.II - ical-Widget (Kalender)

    Das ical-Widget ist ebenfalls eine Besonderheit, hier liegt ebenfalls eine Tabelle vor, welche von Hause aus mit CSS-Tags versehen ist und über spezielle Tags gestylt werden muss.


    hier gibt es die Möglichkeit, heutige, morgige, übermorgige und sonstige Termine separat zu stylen.

    Im einzelnen verweise ich hier mal auf die Doku vom ical-Adapter.

    IX - Schlussbemerkung

    Das oben Gezeigte sind natürlich alles nur Beispiele und sollen eine Grundidee erklären.

    Jedes Layout, jeder CSS-Klasse und jeder Style können, mit den nötigen CSS-Kenntnissen, komplett individuell angepasst werden.

    Mein Layout ist nicht als starre Vorgehensweise zu sehen, sonder eher als meine persönliche "Best-Practice".

    Kommentare und Ergänzungen sind gern gesehen.

    IX.I - Weblinks

Teilen