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 > Admin > Settings menu and click the Look & Feel icon.
  2. Click the + button.

  3. Use the fields provided to manage the UI, as explained below:

    Theme options

    • Label – give a name to your theme.
    • Active – move the slider to specify whether the theme is displayed or not. If this option is enabled, the default colors and graphics are used, irrespective of other settings.

    User Group

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

    General

    • Title - enter the title which will be displayed at the top left corner of the browser window.
    • Logo - click the Choose File button to choose a custom logo.
      • Move the Disable Logo slider to the right to prevent a logo from displaying (no logo will be displayed)
    • Logo mini - click the Choose File button to choose a custom logo mini.
      • Move the Disable logo mini slider to the right to prevent a logo mini from displaying (no logo mini will be displayed)
    • Favicon - click the Choose File button to choose a custom logo.
      • Move the Disable favicon slider to the right to prevent the favicon from displaying (no favicon will be displayed)

    Powered by

    • Hide – move the slider to the right 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.

    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 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;}
    CODE
  3. Save the file.
  4. Go to OnApp Control Panel and refresh it. The background color will be changed:

If you would like to make custom changes to the CSS of your OnApp Control Panel, the files to edit can be found through ssh on your control server here:

/onapp/interface/public/stylesheets/
/onapp/interface/public/assets/
CODE

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. 

See also:

Leave feedback