Custom Widgets for Lively Theme for Confluence part 2

Ghost -

Lively Theme is a theme for the Atlassian Confluence Dashboard. As described in the first fraction, with Lively Theme for Confluence, numerous own widgets can be added to the dashboard.

In the 2nd part we will redesign the widgets via CSS. Each widget has a unique CSS class (e.g. page-include-4f58b4a1-3c8d-45ef-9079-a0dc5e08bbff). Since we completely want to redesign the widget, we first have to reset all Lively Theme CSS settings.

The widget then looks as follows:

So now let’s start…

Space navigation example 1:

A frequent customer request is to create a space navigation similar to the one on a website. With Lively Widgets and CSS adjustments, this is just a piece of a cake.

The big advantage is that you can edit the following content via the content page of the widget:

  • Icon
  • Link
  • Domain
  • New spaces (remove or add)

This is the content page with the substance of the space navigation widget. It comes with an icon on the left side and a link with a text on the right side:

Space navigation example 2:

This area navigation is a bit more striking, but uses only elements like tables, icons, links, texts, and also background colors for the cell in the content.

Here is the content of the widget:

Reminder widget:

With resetting the Lively Theme widget styles and modifying CSS, we can also create lovely reminder/attention widgets. It is supposed to make the staff particularly aware of sth. important, like doing the time recording at the end of the month.

With the Lively Theme Widget settings, you can always show or hide the reminder at the end of the month. Furthermore through settings like “Weighting” and the specification “2000”, it can also be displayed on the top of the respective column.

Collection of own widgets:

Conclusion

Through the unique CSS class, which each widget provides, the presentation and order on the dashboard is completely customizable- there are hardly any limits. The Wiki content can be configurated with its own CSS or completely changed via a CSS reset. We hope you enjoy creating and designing your own Lively Theme Widgets.

For further information please reach out to the Atlassian Marketplace.