Look & Feel

You can change the look of OnApp Control Panel in several ways:

  • Using Look & Feel UI options
  • Adding your custom CSS rules
  • Adding your custom Java Scripts

Please be aware that OnApp supports the following:

  • Two latest versions of most popular browsers are supported (Google Chrome and Firefox)
  • Opera is not supported
  • JavaScript must be enabled in the browser



Theme



You can manage various aspects of the Control Panel's look & feel, including the logo displayed, background colors and other graphics and thus receive a unique theme.

To create a custom theme:

  1. Go to your Control Panel > AdminSettings menu and click the Look & Feel icon.
  2. Press the "+" button.
  3. Use the fields provided to manage the UI, as explained below:

    Theme options

    • Label - give a name to your theme.
    • Active – use this checkbox to specify whether the theme is displayed or not. If this box is not checked, the default colors and graphics are used, irrespective of other settings.

    User group

    • User Groups - check the groups of users for whom you wish to apply the theme.

    General

    • Title - enter the desired title which will be displayed at the top left corner of the browser window.
    • Logo- click the Browse button to choose a custom logo.
      • Check the Disable Logo box to prevent a logo from displaying.
      • Check the Remove logo box to delete a custom logo.
    • Favicon- click the Browse button to choose a custom logo.
      • Check the Disable favicon box to prevent the favicon from displaying.
      • Check the Remove favicon box to delete a favicon.

    Powered by

    • Hide – check the box to remove the Powered by OnApp message at the top of the navigation pane.
    • Url – enter an URL you wish to link to instead of http://www.onapp.com/.
    • Color- this is the color displayed in the main body of the page (e.g. behind the fields you're currently editing).
      • To change the color, click the field to pop up a palette chooser, or enter a CSS color code.
      • To revert to the default color, leave this field blank.
      • The color will not be displayed unless any full-screen Background Image you're using is disabled.
    • Text – specify the text which will be added after Powered by instead of OnApp.

    Wrapper

    • Color- this is the color displayed around the rest of the UI.
      • To change the color, click the field to pop up a palette chooser, or simply enter a CSS color code To revert to the default color, leave this field blank.
      • The color will not be displayed unless any full-screen Background Image you're using is disabled.
    • Body image- click the Browse button to choose a custom image.
      • Check the Disable body image box to prevent the top background image displaying.
      • Check the Remove body image box to delete a custom image.

    Header&Footer HTML

    • Header - enter the HTML codes to display instead of default header.
    • Footer - enter the HTML codes to display instead of default footer.
  4. Click Save Theme button to create and apply a theme.


Custom CSS Rules



You can add your own CSS rules to customize OnApp Control Panel. 

To add CSS rule:

  1. Go to /onapp/interface/public/themes folder.
  2. Create custom.css file with CSS rule code you want to add. For example:

    body *{background-color: lightblue;}
  3. Save the file.
  4. Go to OnApp Control Panel and refresh it. The background color will be changed:


Custom Java Scripts



You can add your own Java scripts to customize OnApp Control Panel. 

To add a Java script:

  1. Go to /onapp/interface/public/themes folder.
  2. Create a custom.js file with a code you want to add. 
  3. Save the file.
  4. Go to OnApp Control Panel and refresh it.