Customizing the openATTIC WebUI

The openATTIC user interface is a web application based on the AngularJS 1 JavaScript MVW framework the Bootstrap framework. Using Cascading Style Sheets (CSS), it is possible to customize the look to some degree, e.g. by replacing the logo or adapting the color scheme.

These modifications can be performed by adding your changes to the vendor.css CSS file. It is located in the directory webui/app/styles/vendor.css in the Mercurial source code repository and the source tar archive, or in /usr/share/openattic-gui/styles/vendor.css in the RPM and DEB packages.

Take a look at the file webui/app/styles/openattic-theme.css to get an overview about the existing class names and their attributes.

Alternatively, you can use Mozilla Firebug or similar web development tools to obtain this information.

Changing the favicon

An alternative favicon image (PNG format, 32x32 pixels) must be copied to the images/ directory (webui/app/images in the source, /usr/share/openattic-gui/images for the installation packages).

If you choose a different name for the image file, the file name in index.html must be adapted. As of the time of writing, this information is located in lines 27-29:

<!-- favicons -->
<link rel="shortcut icon" href="images/openattic_favicon_32x32.png" type="image/x-icon">
<link rel="icon" href="images/openattic_favicon_32x32.png" type="image/x-icon">