Your community can have the same look and style of your website, so the user will think he never left your website when entering the help center. Integrate custom header, footer, change CSS and js along with background, buttons, colors.
Cloud Account Customization Guide
To use custom interface, go to Administration » Interface » My Interface and add required changes.
In order to start working on customization, you would need to inspect elements in your browser or use Firebug and overload classes with your own by adding the same name of the class in CSS block and save changes.
Make sure to clean the browser cache in order to see the changes.
Self-Hosted Customization Guide
The system supports custom themes for both desktop and mobile UI. The custom theme should be placed as a folder in custom/themes on your server.
The main customization should be done in theme.css. We also recommend to not override templates other than header.phtml and footer.phtml in order to not get issues after upgrade to the next version of OnsiteSupport.
Here is the following structure of the folders you can have:
assets
- desktop
- css
-theme.css
- jssdk
-widgets.css
- js
- theme.js
- images
- mobile
- css
- js
templates
- layout
- header.phtml
- footer.phtml
We have created a sample theme attached to this article so you can get a better idea of how to customize CSS and override templates.
Once the theme is created, it should be activated in Administration » Interface and the community could be checked by clicking the monitor icon in the top right, or going directly to your home screen of the community portal.
Customization of Embeddable Widgets
With OnsiteSupport you can easily customize the look of any embeddable widgets - live chat widget, widgets with contact and feedback form, knowledge base widgets in case they don't match the design of your site.
- Cloud version - inspect the elements of the widget in your browser and override the default styles with your own CSS in Widgets CSS in Administration » Interface » My Interface.
- Self-hosted version - in order to customize widgets you need to create /jssdk folder inside /css folder of your custom theme. All widgets customization should be performed in widgets.css that should be placed in /jssdk folder.
Once you add your own widget styling, don't forget to clear the browser cache for the changes to be displayed.