Using your own theme assets for Help Center (Guide Professional and Enterprise)

Fastpath: Guide admin > Customize design > select theme > Edit > Assets

We've updated the theming experience and UI described in this article. Customers who enabled Guide before November 14th can upgrade to the new theming experience.

You can upload assets, such as images and files, to any of your Help Center themes.

This article contains the following sections:

• Uploading an asset for your theme
• Using uploaded assets in the theme's code
• Replacing an asset in your theme
• Deleting a theme asset

Uploading an asset for your theme

You can upload assets such as images and files to the Help Center. The assets are stored in a web cache in a cloud delivery network (CDN). Web caches reduce bandwidth requirements and server load, and improve response times.

To upload your own theme assets

1. In Guide, click the Customize design icon () in the sidebar.
2. Click the theme you want to edit to open it.
3. Click the options menu, then selet Edit Code.

   

4. In the Assets section, click the Add asset link, then browse to select your file.

   

   The asset file is added to your list of asset files.

Using uploaded assets in the theme's code

You can reference an uploaded asset in the theme's style.css file or in its templates. In style.css, you use asset path variables provided by Guide. In templates, you use the Curlybars asset helper.

Using asset variables and helpers in your code lets you easily replace the assets in the theme without editing the theme code. See Replacing an asset in your theme.

Note: You can't use the path variables or the helper in the theme's script.js file.

To use an uploaded asset in your theme code

1. In Guide, click the Customize design icon () in the sidebar.
2. Click the theme you want to edit to open it.
3. Click the options menu, then selet Edit Code.
4. In the Assets section, click the asset file you want to use.

   Various expressions for the asset appear:

   

5. Click Copy to copy the asset expression you need in the Clipboard.
6. Paste the asset expression in your theme code.

Examples

style.css

.class-name { 
  background: url($assets-backpack2-jpeg);
}

The value assets-backpack2-jpeg is a variable that contains the relative path to the asset.

.hbs files

In html markup:

<img src="{{asset 'backpack2.jpeg'}}">

In a style tag:

<style>
  .class-name { 
    background: url("{{asset 'backpack2.jpeg'}}");
  }
</style>

In a script tag:

<script>
  var assetsBackpack2 = "{{asset 'backpack2.jpeg'}}";
</script>

While you can insert the asset helper in a script tag in a template, you can't use it in the script.js file.

For more information on editing your theme code, see Customizing your Help Center theme.

Replacing an asset in your theme

Using asset variables and helpers as described in Using uploaded assets in the theme's code above lets you replace an asset in the theme dynamically without editing the theme code. You can update the theme just by selecting a new asset file on your system.

To replace an asset

1. In Guide, click the Customize design icon () in the sidebar.
2. Click the theme you want to edit to open it.
3. Click the options menu, then selet Edit Code.
4. In the Assets section, click the asset file you want to replace.
5. Click the options menu on the upper-right side, then select Replace.

   

6. Select a new asset on your system.

   Once uploaded, the theme is updated dynamically by any variable or helper that references the asset. The change is immediate.

Deleting a theme asset

You can easily delete any theme asset you're no longer using in your theme.

To delete a theme asset

1. In Guide, click the Customize design icon () in the sidebar.
2. Click the theme you want to edit to open it.
3. Click the options menu, then selet Edit Code.

   

4. In the Assets section, click the asset file you want to delete.
5. Click the options menu on the upper-right side, then select Delete asset.

   

6. Confirm that you want to delete the asset.

   The asset is removed from your assets list.