Theming and DIY Info

Theming

Themes are a nice way to customize the look and feel of your own Icinga Web 2.
In this Thread we would like to Introduce some nice themes.


Installation

The Module can be found here

How to install the module can be found here


Themes

Here is a small selection of Themes for inspiration:

company example Theme

Installation

The Theme can be found here


Unicorn Theme

Installation

The Theme can be found here


always green Theme

This Theme changes just the Icinga Web 2 color scheme after the login screen.

Installation

The Theme can be found here


Icinga Web 2 dark Theme

Installation

The Theme can be found here


Icinga Web 2 Batman Light Theme

Installation

The Theme can be found here


Other Theming Resources

There is also the Icinga Exchange where you can find other Themes from other Developers

These can be found here

How to Customize a Theme

To Doā€™s

Please if you would like to add an tutorial beside the explanations inside of the shown Themes we encourage everyone and to write your own guides and tuts here for the community. The form in which you do that can be written :open_book: or :video_camera: it can be visual like a screencast as well.

Hello together!
I updated the broken links here, so all of the info is all fresh and working again!

Do you have any cool themes you want to share?
Feel free to do that here!

Feu

I had a try at creating a true dark theme for Icinga Web 2
Check it out:
https://github.com/lazaroblanc/icingaweb2-dark-theme
https://exchange.icinga.com/lazaroblanc/A%20true%20dark%20theme

3 Likes

Iā€™m using the solarized-dark theme that comes with icinga, but it has some ā€˜bugsā€™ Iā€™d like to fix. For example, the ā€œnotification-barā€ (the one that appears if you submit a form, e.g. ACK, Downtimeā€¦) on the bottom of the page is white text on bright yellow and not readable.

Iā€™ve already color-picked the background-color but couldnā€™t find it anywhere in the css-files.

How is the bg / fg color for this ā€œnotification-bar at the bottomā€ called?

I took a closer look at lazaroblanc theme, it uses green as bg-color for that, I canā€™t figure out where it is set.

Any hints?

1 Like

Hey hey,

you might want to start looking at the
public/css/themes/solarized-dard.less in

It would probably help to read up on less and itā€™s variable system before too :slight_smile:

Then feel free to open a pull request on the GitHub!
If you need any help, let me know :slight_smile: