Home → Admin Manual → Customizing HelpSpot → Admin Themes

5.2. Admin Themes

AS OF HELPSPOT 5.0 ADMIN THEMES ARE NO LONGER USED

Admin themes have been replaced with custom javascript and css settings.

Admin themes allow you to customize the look and feel of your staff pages in HelpSpot. A few simple uses include:

• Changing the header to your company colors
• Adjusting text sizes more to your liking
• Adding or removing UI elements

Theme Structure

HelpSpot ships with several built in themes. The code for these /themes/ with a subfolder for each specific theme. So the blue theme is in /themes/blue/. Inside the folder is the css for that theme and optionally an image folder and custom javascript file. So a theme folder with everything would look like this:

Creating a Custom Theme

It's often useful to start with one of the built in themes as those contain the most common elements you want to modify. To do so simply copy one of the folders like /themes/blue to your own folder such as /themes/pink. In this case you'd then change blue.css to pink.css and you're all set. From there you can modify pink.css to match your design.

You can find all the built in CSS elements in /static_#HelpSpot_Version#/css/base.css and any of those styles can be overridden by your custom CSS.

Using Custom Javascript

If you'd like to add your own javascript logic to HelpSpot you can do so by adding a theme_name.js file to your theme folder, such as /themes/pink/pink.js. HelpSpot will automatically include that file in the head of every page. jQuery is currently also available, however, it uses a custom shorthand of $jq instead of the more familiar $. Of course jQuery() can be used as well. For most things you'll also probably want to wait for the page to load using:

$jq(document).ready(function(){
     //Your jQuery here
});