User portal customization (CSS, Header & Footer)

There are a number of customization features that allow you to change the look and feel of your user portal and feedback widget.

Change the style of the user interface; add a footer and header to match your website; adjust size and position of various UI elements; add links to your social media pages / resources and much more. This can be done by adding code for:

  • CSS stylesheets
  • Custom header
  • Custom footer
  • HTML in <head>

Customizing your Helprace user portal

The following applies to all pages in your user portal.

Start by going to the   Settings > Customization page and add the appropriate code.

CSS stylesheets can be added in three ways:

  • By referencing an external .css file via URL. Helprace will retrieve the file remotely from your website/cloud, so any changes to the file will be reflected immediately.
  • By uploading your .css file to the Helprace cloud.
  • By typing or pasting your stylesheets in the text area.

You can use a combination of the above methods to set styles. However, styles will be applied in the same order as they appear on the page. This means the subsequent property will override the previous property applied to the same item.

Specifying HTML for the Header and Footer will have your portal closely resemble your website.  

You don't need CSS to show or hide the questions, ideas, problems, praise tabs or certain components of your home page. You can also set default sorting settings for community discussions.

Custom CSS stylesheets and code for <head> also apply to the feedback widget. Custom header and footer are not used in the feedback widget.

Try Stylus plugin for Chrome or Firefox to draft your custom CSS before publishing them.

Applying certain styles solely to the feedback widget

You can apply custom styles to the feedback widget only, without affecting the user portal.

To do this simply add ".main-wrapper_widget" class to your CSS rules. For example, if you would like to hide icons on the tabs ("Search", "Ask a Question", etc) in your feedback widget you'd need to use this style:

.main-wrapper_widget nav.tabbar .btn__icon {
   display: none;
}

To apply this change to the widget and user area pages, remove the widget class selector:

nav.tabbar .btn__icon {
   display: none;
}

User portal customization is available in Helpdesk, Self-Service and Complete plans.

Follow
Was this article helpful?
0 out of 0 found this helpful
Reply