Custom HTML, CSS, and Javascript

You can use custom HTML and CSS to customize your web portal, including knowledge base articles and forums.

[Note: Custom design is a self-service feature. While our support team will do what they can to help you with any issues, they are limited with troubleshooting custom design implementations.]

Customize the CSS and HTML

  • Click the icon in the bottom left corner
  • Click "Web Portal"
  • You'll see "Appearance and Features". Click "Edit"
  • Click the CSS/HTML/Javascript tab 
  • Click the option to enable custom design.

You can add custom CSS, and edit the HTML of the Header, Home Page, above and below the Sidebar, and the Footer. 

How do I Customize Certain Pages on my UserVoice site?

  • CSS <body> Classes: In order to make page specific and more granular customizations, you will need to make use of our CSS <body> classes. For details on our <body> classes for custom CSS, check out this link.
  • HTML Templates: For an additional layer of behavior and customization, we allow the editing of our HTML templates using Liquid. Further information about using this feature in UserVoice can be found here, while technical documentation for Liquid can be found here.

Using Custom Javascript

A couple of things to keep in mind about custom javascript:

  • Custom JS might break your app as we improve the site.  By doing this, you're taking this risk, and you will need to fix issues if they arise.
  • If you follow these guidelines, you'll be in good shape, but might still see issues as the site evolves.
Technical Guidelines:
  • You shouldn't modify the core behavior of the page.
  • You should only be enhancing your custom HTML, primarily in the header and footer.
  • You should use jQuery's document.ready (or similar) to execute your code and bind events to the DOM.

To add custom javascript:

  • Click the icon in the bottom left corner 
  • Click "Web Portal" 
  • You'll see "Appearance and Features". Click "Edit"
  • Click the CSS/HTML/Javascript tab 
  • Click the option to enable custom design
  • Scroll down and the bottom, you'll see the option to add custom javascript.

Common Questions 

Q. Can I customize the favicon? 

Q. Can I preview my custom design changes
A. Unfortunately, we don't have a preview feature at this time. We do have an idea for this feature, though, which you can find here.

You Might Find Helpful:

Feedback and Knowledge Base