anpassen – NadelUndHirn.de

Lightning anpassen: Auswahlbuttons in den Ansichten (Monat/Woche/Tag)

Am Design von Sunbird und Lightning wird ja noch massiv gearbeitet. Wer das weiß nimmt Vieles in Kauf, doch eine Standardinstallation von Lightning zeigt oberhalb des Kalenderblattes schon ein etwas trauriges Bild:

Graue Flecken.

Mit Einträgen in eine userChrome.css lässt sich auch hier alles an die eigenen Wünsche und Bedürfnisse anpassen.
Mein Favorit ist aber eine Lösung, die echte Buttons zur Verfügung stellt. Dank vorgefertigter CSS-Erweiterungen von Mozilla ist das schnell gemacht:

.title2 {
-moz-appearance: button !important;
}

.title1 {
-moz-appearance: button !important;
}

Dabei kommt heraus:

Getestet mit Lightning 0.5. Funktioniert auch mit Sunbird.

Sunbird anpassen: „Heute“ einfärben

Für: Sunbird 0.3

Einträge in eine userChrome.css:

/** Today: Weekview **/
calendar-event-column[today=“true“],
calendar-header-container[today=“true“] {
background: #ff6633 !important;
}

calendar-event-column[selected=“true“],
calendar-header-container[selected=“true“] {
background: #ffe79c !important;
}

/** Today: multiweek-view – month-view **/
.calendar-month-day-box-current-month[today=“true“],
.calendar-month-day-box-day-off[today=“true“],
.calendar-month-day-box-other-month[today=“true“] {
background: #ff6633 !important;
}

.calendar-month-day-box-current-month[selected=“true“],
.calendar-month-day-box-day-off[selected=“true“],
.calendar-month-day-box-other-month[selected=“true“] {
background: #ffe79c !important;
}

Über das Ändern von #ff6633 (z.B. mit Hilfe der Farbpaletten bei SelfHTML) lässt sich die Hintergrundfarbe dann nach Belieben anpassen.

Sunbird anpassen: Kategorien

Für: Sunbird 0.3.

Mit Kategorien Termine einfärben und bebildern.
Beispiele „Verabredung“ und „Wichtig“:

Wochenansicht: Monatsansicht:

Notwendige Einträge in eine userChrome.css:

/ ** Kategorie: Verabredung **/

[item-category=verabredung] .calendar-month-day-box-item-label {
padding-left:20px !important;
background-image:url(„pics/verabredung.jpg“) !important;
background-position:top left !important;
background-repeat:no-repeat !important;
}

calendar-multiday-view [item-category=verabredung] .calendar-event-box-container {
padding-left:20px !important;
background-image:url(„pics/verabredung.jpg“) !important;
background-position:top left !important;
background-repeat:no-repeat !important;
}

/** Kategorie: Wichtig **/
.calendar-item[item-category=“wichtig“] {
border: solid red 2px !important;
background: #FDD !important;
}

.calendar-month-view-grid-row [item-category=wichtig] .calendar-event-box-container label {
color:red !important;
}

[item-category=wichtig] .calendar-month-day-box-item-label {
padding-left:15px !important;
color:red !important;
background-image:url(„pics/sign07.png“) !important;
background-position:top left !important;
background-repeat:no-repeat !important;
}

calendar-multiday-view [item-category=wichtig] .calendar-event-box-container {
padding-left:15px !important;
color:red !important;
background-image:url(„pics/sign07.png“) !important;
background-position:top left !important;
background-repeat:no-repeat !important;
}

Voraussetzung ist natürlich, dass es (in diesem Beispiel) den Ordner „chrome/pics“ im Profilverzeichnis gibt, in dem die entsprechenden Bilder liegen. Eine Größe von etwa 14×14 Pixel hat sich bewährt.

Sunbird anpassen: userChrome.css

Das Erscheinungsbild von Sunbird lässt sich per CSS leicht und vielfältig an eigene Wünsche anpassen.

Dazu müssen Einträge in eine Textdatei mit dem Namen userChrome.css vorgenommen werden. Diese Datei muss manuell im Profilverzeichnis in einem Ordner „chrome“ erstellt werden. Anregungen folgen (gilt auch für Lightning unter Thunderbird).
Ein sehr nützliches Werkzeug in dieser Angelegenheit ist der DOM Inspector.

Individuelle Anpassungen mit solch einer Datei können nichts zerstören, aber theoretisch unerwartete Anzeigefehler verursachen. Bei entsprechenden Problemen sollte man also zunächst prüfen, ob diese auch ohne userChrome.css noch auftreten.

Sunbird-Erweiterung „DOM Inspector“

Mit dem DOM Inspector (DOMi) lässt sich relativ komfortabel die Benutzeroberfläche von Sunbird untersuchen. Das ist z.B. dann nützlich, wenn man an Sunbirds Erscheinungsbild etwas auszusetzen hat. Mit dem DOMi lassen sich schnell die verantwortlichen ids und classes der mit Hilfe von Cascading Style Sheets (CSS) gestalteten Oberfläche herausfinden, sodass man dann z.B. über eine userChrome.css gezielt die gewünschten Ã„nderungen vornehmen kann (Beispiele dafür später einmal…).

Nach Sunbird 0.2 musste sich seinen DOMi lange aus alten Versionen und schwer auffindbaren Quellen selbst zurechtfrickeln, wer das eigene Kompilieren scheute.

Kürzlich hat Thorsten Fritz, einer der Betreiber des deutschen Sunbird-Übersetzungsprojekts www.sunbird-kalender.de, dankenswerterweise neue Versionen des DOMi kompiliert und bereitgestellt.

Download für Sunbird 0.3:

http://www.sunbird-kalender.de/pub/inspector/inspector-0.3.xpi

Download für die Sunbird-Nightlies 0.4a1:

http://www.sunbird-kalender.de/pub/inspector/inspector-0.4a1.xpi