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

On this page:

• Look&Feel
• Custom CSS Rules
• Custom Java Scripts

See also:

• Languages
• Currencies
• Localization and Customization Search
• Service Insertion Framework Configuration
• OnApp Configuration

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 not enabled, 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 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 – 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.

   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.