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">
Changing the logo¶
It is possible to customize the application logo displayed in the top left corner of the application window. The format should be PNG, the size should not exceed 250x25 pixel (to ensure it is displayed properly on mobile devices).
The logo file should be copied into the images/
directory. If you choose a
different name than the default, update the file name in file
components/navigation/templates/navigation.html
(currently located in line 5).
If you comment out line 5 and enable line 6, the graphical logo can be replaced with regular text:
<a class="navbar-brand" href="#"><img src="images/openattic_brand_bright.png" alt="openATTIC"></a>
<!--<a class="navbar-brand" href="#">openATTIC storage management framework</a>-->
In addition to that, the logo on the login screen should be replaced to match your
desired logo. It should be in PNG format and should not exceed 256x256 px. This
can be achieved by changing the image file name in file
components/auth/templates/login.html
, line 4:
<img src="images/openattic_favicon_256x256.png" alt="openATTIC" class="pull-right">