Getting Started

Customizing Zendesk Layout

Paligo publishes a very clean HTML to Zendesk, and you should let Zendesk and any theme you may have there take care of most of the styling.

However, even though the topics themselves are directly published in Zendesk, a couple of CSS and javascript files are however included in the zip file that is also downloaded when you publish. You can use them as a starting point for customizing the output. You need to add them to Zendesk as follows:

  1. Open the zip file that is downloaded when you publish.

    In the out folder, you'll find one css folder and one js folder. Each of these has a folder called zendesk, with a css file and a javascript file.

  2. Go to your Zendesk help center, and click the Guide Admin icon at the top right.

  3. Select Customize Design, and then Edit theme.

  4. Click on the Assets tab.

  5. Add or drag and drop your css and javascript files here. You can of course customize them further first if you want.

  6. If you also want to use the bootstrap js referenced below, you also need to get the minified bootstrap javascript. You can get it from here: Download Bootstrap. Just click the Download Bootstrap button, and then get the file bootstrap.min.js from the folder, and upload it as an asset in the Admin Guide section of your Zendesk account.

  7. Next, on the Select template tab, choose Document head.

  8. Add a reference to each file, and also to the "Font Awesome" stylesheet (hosted so no need to upload) to get icons. Unless you've renamed them, it will look like this (using the Zendesk curly brackets syntax to refer to uploaded assets):

    <script src="{{asset 'bootstrap.min.js'}}"></script>
    <script src="{{asset 'paligo-zd.js'}}"></script>
    <script src="{{asset 'paligo-stickymenu.js'}}"></script>
    <link href="{{asset 'paligo-zd.css'}}" rel="stylesheet" type="text/css" />
    <link href="{{asset 'paligo-stickymenu.css'}}" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

    Note

    The basic styling doesn't really require the files paligo-stickymenu.css and paligo-stickymenu.js files, but they add some additional features to the navigation in your published Zendesk content, such as

    • Making the menu stick when you scroll so it doesn't disappear at the top

    • Adding a sub menu for the currently viewed article, which is very useful if you have long sections that become articles, as it provides internal navigation.

    • Making the menu scrollable when it's too long to fit on the page.

    For the sticky menu option to work, you also need to have added the bootstrap.min.js file as an asset and referenced it as above.

  9. You can also make minor changes in the css and js tabs if you want. But in the long run when you're happy with changes it's better to move them to the separate asset files.

  10. Click Save and then Publish.

Search results