Lively Theme ist ein Theme für das Atlassian Confluence Dashboard. Wie schon im ersten Teil beschrieben, können dem Dashboard mit Lively Theme for Confluence auf einfache Art und Weise eigene Widgets hinzugefügt werden.

Im zweiten Teil werden wir die Widgets auch noch mit CSS umgestalten. Dabei erhält jedes Widget eine eindeutige CSS Klasse (z.B. page-include-4f58b4a1-3c8d-45ef-9079-a0dc5e08bbff). Für die komplette Umgestaltung des Widgets setzen wir zunächst alle Lively Theme CSS Settings zurück.

Das Widget sieht dann wie folgt aus:

datasources

Nun können wir loslegen…

Bereichsnavigations Widget Beispiel 1:

Ein häufiges Kundenanliegen ist die Erstellung einer Bereichsnavigation ähnlich der auf einer Website. Mit den Lively Widgets und einigen CSS Anpassungen ist das quasi ein Kinderspiel.

datasources

Das Schöne daran ist, dass folgende Dinge über die Content Page des Widgets selbst bearbeitet werden können:

  • Austausch des Icons.

  • Anpassung der Verlinkung.

  • Änderung des Bereichsnames.

  • Hinzufügen/Entfernen eines weiteren Bereichs/Links.

Dies ist die Content Seite mit dem Inhalt des Bereichsnavigations Widgets. Sie beinhaltet eine Tabelle mit einem Icon auf der linken und einem Link mit Text auf der rechten Seite:

datasources

Bereichsnavigations Widget Beispiel 2:

Diese Bereichsnavigation ist ein bisschen auffälliger, verwendet im Content aber wieder nur Elemente wie Tabellen, Icons, Links und Texte sowie zusätzlich eine Hintergrundfarbe für die Tabellenzelle.

datasources

Das ist der Content des Widgets:

datasources

Reminder Widget:

Mit dem Zurücksetzen des Lively Theme Widget Styles und dem Hinzufügen eigener CSS Anpassungen, können auch schöne Reminder - oder “Störer” Widgets erstellt werden. Diese sollen die Mitarbeiter besonders auf etwas aufmerksam machen, z.B. der Abschluss der Zeiterfassung zum Ende des Monats.

datasources

Über die Einstellungen der Lively Theme Widgets kann diese Erinnerung immer zum Ende des Monats ein - und wieder ausgeblendet werden. Des Weiteren kann über die Einstellung „Gewichtung“ und der Angabe von “2000” der Reminder auch ganz oben in der jeweiligen Spalte angezeigt werden.

Sammlung eigener Widgets:

datasources

Fazit

Über die eindeutige CSS Klasse, die jedes Widget erhält, ist die Darstellung auf dem Dashboard vollkommen frei gestaltbar - den Möglichkeiten sind fast keine Grenzen gesetzt. So kann der Wiki Content mit eigenen CSS angepasst oder mithilfe eines CSS Resets die Lively Theme Widget Darstellung sogar komplett geändert werden. Wir wünschen Ihnen viel Spaß bei der Erstellung und Gestaltung eigener Lively Theme Widgets.

Für weitere Informationen zu Lively Theme, besuchen Sie bitte den Atlassian Marketplace.