Customizing your theme

How to bring your company brand to the forefront

  • Using Google fonts in your theme

    The following steps allow you to take advantage of the large range of custom fonts offered by Google.

    1. Navigate to fonts.google.com in your browser to access the font library.

      Font directory

      The Google Fonts directory

      If you know the type of font that you’re interested in, use the Categories filter to reduce the number of options presented.

    2. Select the desired font family.

      Font family

    3. Select the font style(s) required for your Help Center.

      Font styles

    4. Repeat the steps above for other font families, if required. Once the required font families and styles have been selected, click on Embed in the right-hand sidebar.

      Embed fonts

    5. Copy the embed <link> into your document_head.hbs template.
    6. Use the provided CSS rules to use your new font in CSS declarations:

      .my-element {
        font-family: 'Inter', sans-serif;
      }  
      
  • Branding your Help Center

    You can change the look-and-feel of the Help Center using theme setting controls including color pickers and font choosers. For example, you can change the logo, colors and fonts to bring your Help Center into line with your company’s branding guidelines.

    In addition to updating branding with options in the Settings panel, you can control search behavior and whether or not certain page elements like comments appear.

    Updating colors

    By default, there are seven colors you can change in your Help Center, including:

    • Primary color
    • Primary text color
    • Heading color
    • Text color
    • Link color
    • Outline color
    • Background color

    To update your Help Center colors

    1. In Guide, click the Customize design icon (Customize icon) in the sidebar.
    2. Click the theme you want to update. The theme page opens.
    3. In the Settings panel, click Colors.

      Theme settings panel

    4. Click the color box beside any of the options, then use the color selector to chose a color or manually enter the number for your color.

      The color updates in the preview window.

      Click away from the color box and the color choice is saved.

    5. Repeat for other colors you want to change.
    6. When you’ve finished updating your colors, click Publish.

      The changes are applied to the theme.

    7. Click Back to return to the Themes page.

    Updating fonts

    You can change the font for headings and text by default. A list of several built-in font options are available to you.

    To update your Help Center fonts

    1. In Guide, click the Customize design icon (Customize icon) in the sidebar.
    2. Click the theme you want to update. The theme page opens.
    3. In the Settings panel, click Fonts.
    4. To change the heading font, click the drop-down menu under Heading, then select a font for your heading.

      The font updates in the preview window.

    5. To change the text font, click the drop-down menu under Text, then select a font for the text.

      The font updates in the preview window.

    6. When you’ve finished updating your fonts, click Publish.

      The changes are applied to the theme.

    7. Click Back to return to the Themes page.

    See Using Google fonts in your theme tp learn about how to use Google Fonts with your theme instead of websafe system fonts.

    Updating the logo and favicon

    You can change the logo and favicon for your Help Center. The logo appears in the header for your Help Center. The favicon is the small image displayed in the browser tab and next to the URL in the browser’s address bar.

    For information on uploading your own images and other branding assets to use here, see Uploading and using your own assets.

    To update the logo and favicon your Help Center theme

    1. In Guide, click the Customize design icon (Customize icon) in the sidebar.
    2. Click the theme you want to update. The theme page opens.
    3. In the Settings panel, click Brand.
    4. If you want to change the logo, under Logo, click Replace to browse to and select an image.

      The recommended image size is 200px by 50px. For the Copenhagen theme, the recommended maximum height is 37px.

      If the width or height of the image exceeds the recommended size, the image is scaled down to keep the aspect ratio constant. The image background should be transparent or match the background color of the header.

    5. If you want to change the favicon, under Favicon, click Replace to browse to and select an image.

      For best results, make sure the favicon is a square image. The image is scaled to fit the display dimensions.

    6. To change back to the default image for the logo or favicon, click Revert.
    7. When you’ve finished updating your logo or favicon, click Publish.

      The changes are applied to the theme.

    8. Click Back to return to the Themes page.

    Updating the images for your theme

    The standard Copenhagen theme comes with three images that you can replace:

    • Hero image, appears at the top of the home page (in the default Copenhagen Plus theme)

      Home banner

    • Community hero image, appears at the top of the Community topics page (in the default Copenhagen Plus theme)

      Community banner

    To update the images in your theme

    1. In Guide, click the Customize design (Customize icon) icon in the sidebar.
    2. In the Settings panel, click Images.
    3. Under any of the images that appear in the Settings panel, click Replace to browse to and select an image.

      • For the Hero image the recommend size is 1600x300px.

        You can use an image that is less than 1600px wide if you are concerned about load time, but ensure that your image is at least 300px in height so that is does not appear stretched. If the image exceeds the recommended size, the image is scaled to keep the aspect ratio constant and a maximum height of 300px.

      • For the Community banner, the height should be less than 300px to avoid stretching.

        The image appears in the Settings panel. If you don’t want to use the image, you can click Revert to go back to the default image.

    4. Repeat for the other images, if you want to replace them.
    5. When you’ve finished updating your images, click Publish.

      The changes are applied to the theme.

    6. Click Back to return to the Themes page.
  • Editing CSS and JavaScript

    You can customize your Help Center’s stylesheet and add your own custom JavaScript code. For tips, tricks and other helpful resources, refer to the following articles:

    Custom themes are not supported by Zendesk and are not automatically updated when new features are released. See The difference between standard and custom themes.

    Customizing CSS or JavaScript

    The following steps describe how to edit your theme’s CSS and JavaScript within Zendesk Guide.

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

      Edit code

    4. Click script.js to modify the JavaScript or style.css to modify the CSS.

      The file opens in the code editor.

    5. Add or modify the JavaScript or CSS in the code view.
    6. Click Save in the top right to save your changes.

      The changes are applied to your theme.

    7. To preview your changes, click Preview (see Previewing your theme in Help Center).

      Edit code preview

    8. Make other code changes as needed, then click Save.

    When you’re finished, you can close the file.

  • Editing and compiling styles using Sass

    When editing theme styles you can update the style.css file directly, either through Zendesk Guide or locally using your favourite code editor. Alternatively, you can work with the Sass source files directly, which requires that you re-compile the styles once you have made your changes.

    Compiling Sass

    Our themes all include a simple Ruby script for handling the Sass compilation step, which can be found in the bin/ folder. The script requires both Ruby and the sassc gem to be installed. Once you have installed Ruby by following these instructions, you can install the sassc gem using the shell command gem install sassc.

    You can now compile your Sass files by running the command ./bin/compile.rb from your theme directory, which will take all the .scss files inside the scss/ folder and create the style.css file that is used by Zendesk Guide.

  • Using your own theme assets

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

    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.

    There are a number of allowable file types for themes (see Allowable file types for theme assets).

    To upload your own theme assets

    1. In Guide, click the Customize design icon (Customize icon) in the sidebar.

    2. Click Customize on the theme you want to edit.

    3. Click Edit code.

      Edit code

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

      Add asset

      Theme asset names must be unique and cannot be more than 50 characters. Asset names can contain any of the following: letters, numbers, dot, minus, plus, underscore, and dash. Asset names are not case sensitive, so you cannot have an asset named asset.jpg and Asset.jpg.

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

    Allowable file types for theme assets

    The following table shows the file types that are allowed as theme assets. The allowable files types for assets are limited to the file types used in the theming of a Help Center.

    Asset type File types allowed
    Images jpg, jpeg, png, gif, svg, webp, tiff, tif, bmp, ico, webm
    Fonts woff2, woff, eot, otf, ttf, svg
    Text files js, css, html, json, txt, xml
    Other mp4, swf, wav, ogg. mp3

    Rich content files types, such as Microsoft PowerPoint, Microsoft Word and PDFs, can be article attachments but cannot be theme assets.

    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.

    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 (Customize icon) in the sidebar.

    2. Click Customize on the theme you want to edit.

    3. Click Edit code.

    4. In the Assets section, click the asset file you want to use.

      Various expressions for the asset appear:

      Copy asset

    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 (Customize icon) in the sidebar.

    2. Click Customize on the theme you want to edit.

    3. Click 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.

      Replace asset

    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.

      The asset is not replaced if you used the full URL of the asset in the HTML source of published Help Center pages. The link to the asset will break because replacing an asset changes the asset’s published URL. As a result, avoid using the published asset URL in a theme, a page template, or an external web page.

    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 (Customize icon) in the sidebar.

    2. Click Customize on the theme you want to edit.

    3. Click Edit code.

      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.

      Delete asset

    6. Confirm that you want to delete the asset.

      The asset is removed from your assets list.

  • Empty Article