Upgrading to the new Help Center Community Follow

We released a new version of Community on November 30, 2015. Upgrading your custom theme to the use all the new Community features is a partially manual process that requires you to add a few snippets of code to your Help Center and make sure that your new community looks great.

This article guides you through the upgrade process. We recommend that you have some knowledge in HTML and CSS to best upgrade your Community.

The upgrade process described in this article is not required if you are using a standard legacy theme (The Swiftest Elk, The Noble Feast, The Humble Squid, The Curious Wind, or The Wiry Merchant). Follow the steps in this article if you have a customized theme.

Note about upgrading to the new community from a draft theme: We recommend that you publish any customizations in your draft theme, before you begin to upgrade to the new Community. If you decide to upgrade to the new Community from a draft theme but then end up discarding your new Community from the draft, you will not only be discarding the new Community upgrade but also any customizations in your draft.

This article includes the following topics:

Upgrading your theme 

When your Help Center is ready to be upgraded to the new Community, you will see a message at the top of your Help Center letting you know that new Community features are available.

To upgrade your theme

  1. Click learn more to get more information about the upgrade.
  2. When you’re ready to upgrade, click Start upgrade.
    Your theme is upgraded so to support the new Community features. Note that the theme is not yet published, so your end-users don’t see any change yet.

  3. You are directed to Customize design to preview your new Community.
    While you are working on your theme that supports the new Community you will see a message at the top of the editor page letting you know that you are previewing your theme.

  4. It’s now time to add a few code snippets and style any new functionality in the new Community. Continue to the next section, Adding new features.

If you want to return to your last published theme without upgrading to the new Community click Cancel and then Discard changes. We will continue to inform you of the pending Community upgrade until you have upgraded.

Adding new features

When you upgrade to the new Community, most new features are added automatically. There are some features, however, that you need to add to the theme manually. 

Each of these new features is optional, and your Community will continue to work without them.

Adding filtering of posts by status

In the new Community, end-users can filter posts by their status. To enable that you need to show the filtering options.

 

If you don’t add this feature, you can still add statuses to posts and they will continue to appear on the post, but users won’t be able to filter by the statuses.

To show the status filter feature in your theme

  1. In Help Center, click General in the top menu bar, then select Customize design.
  2. In the Theme panel, click Edit theme.
  3. Select the Community topic page in the template drop-down in the upper-left.
  4. Locate and remove these lines:
    
    {{!- 
    ** NEW COMMUNITY SNIPPET **
    Please uncomment these lines if you want to allow your users to filter posts by status
    
    And also locate and remove this line:
    
    --}}
    

  5. Click Preview at the top.
    The filter drop-down will now show up.
  6. Make sure it looks great in your theme by styling it with CSS or moving it around on the page.
    If you want to hide it again, you should add in the lines again.
  7. Repeat these steps in the Community post list page.
  8. Click Save (but don’t publish yet). 

Showing sorting by date or votes in your theme

By default comments are sorted by date. You can give end-users the ability to sort comments by votes as well. To do so, you need to enable end-users to switch between the two sorting methods.

If you don’t add this feature, comments will always be sorted by date, and it won’t be possible to sort by votes.

To show the sorting by date or votes feature in your theme
  1. In Help Center, click General in the top menu bar, then select Customize design.
  2. In the Theme panel, click Edit theme.
  3. Select the Community post page in the template drop-down in the upper-left.
  4. Locate and remove these lines:
    
    {{!- 
    ** NEW COMMUNITY SNIPPET **
    Please uncomment these lines if you want to allow your users to filter posts by status
    
    And also locate and remove this line:
    
    --}}
    
  5. Click Preview at the top.
    The sorting method will now show up.
  6. Make sure it looks great in your theme by styling it with CSS or moving it around on the page.
    If you want to hide it again, you should add in the lines again.
  7. Click Save (but don’t publish yet).
    After you publish, your end-users will be able to sort posts by date or votes (see Sorting content in community).

Adding featured posts to your theme

You can draw attention to a specific post by featuring it so that it appears in a special area in your Help Center. This area can be anywhere you’d like.

To add the featured posts feature to your theme

  1. In Help Center, click General in the top menu bar, then select Customize design.
  2. In the Theme panel, click Edit theme.
  3. Select a template from the template drop-down in the upper-left, then paste the following snippet of code where you want featured posts to appear (on your Home page, for example).
    
    <div class="featured-posts">
        <h2>{{t 'featured_posts'}}</h2>
        {{#if featured_posts}}
        <ul class="featured-post-list">
            {{#each featured_posts}}
                 <li> <a href="{{url}}">{{title}}</a></li>
            {{/each}}
        </ul>
        {{else}}
        <p>{{t 'no_featured_posts'}}</p>
        {{/if}}
    </div>
  4. Click Preview at the top to ensure it looks as intended.
    To preview a featured post, use the preview window to the right of the theme editor, locate a post, click
    Post actions and click Feature post.
  5. Click Save (but don’t publish yet). 
    After you publish, you'll be able to feature a post (see Promoting a post by pinning or featuring). 

Adding styling for posts pinned to top

In the new Community you can pin a post to the top of a community discussion topic.

To make it clear that the post is pinned to the top, it should look different from other posts in the topic. To do so, you need to add a bit of styling. If you don’t add the styling you can still mark a post as pinned to top and it will show up at the top, but it won’t look different from the other posts.

To add styling for pinned posts to your theme

  1. In Help Center, click General in the top menu bar, then select Customize design.
  2. In the Theme panel, click Edit theme.
  3. Select the Community post page in the template drop-down in the upper-left.
  4. Click the CSS tab, then add the following CSS to style pinned posts or modify it to fit your design:
    
    .post-pinned .question-title:before {
        content: "\2605";
        margin-right: 5px;
        color: $color_5;
    }
  5. Click Save (but don’t publish yet). 
    After you publish, you'll be able to pin a post to the top of the topic (see Promoting a post by pinning or featuring). 

Making sure your community looks great

The upgrade to the new Community changes the HTML structure of your Community, but does not alter your global CSS. It’s therefore important for you to review your Community to make sure it looks and behaves as expected in your theme.

We recommend that you start out by going to Customize design > Edit theme and check each of the following templates for any general problems:

  • Community topic list page
  • Community topic page
  • Community post list page
  • Community post page
  • New community post page

After you check each of the pages, you should check each of the features in the new Community to ensure they look good. Then you should check your URLs.

Checking your features

This section describes the parts that have changed in the new Community, so you can check them.

You can move HTML around, add CSS and add Javascript to style your Community. Each theme is unique, so we can’t provide specific instructions as to how to troubleshoot if anything doesn’t look as intended. Please use the screenshots below to understand how the features could potentially look.

Check any of the following features that you added to your theme: 

  • Statuses. 
    On the Community post page in the Theme editor, click Post actions and then click one of the statuses (Planned, Not planned, Completed, Answered) in the drop-down.



    Make sure that the selected status shows up next to the share link.



    On the
    Community topic page and the Community post list page make sure that the status appears next to the number of comments.



  • Filtering and sorting posts. 
    On the Community topic page in the Theme editor, check that you can sort posts by newest post, recent activity, votes and comments.



  • Following drop-down. 
    On the Community topic page in the Theme editor, click the Follow button and check that the drop-down opens and fits your theme.



  • Posts that are closed for comments.
     On the Community post page in the Theme editor, click the Post Actions link, then select Close post for comments. Make sure the message that the post is closed for comments appears and fits your theme.



  • WYSIWYG editor in comments. 
    On the Community post page in the Theme editor, click in the new comment box and notice the new WYSIWYG editor. Make sure the options in the editor works.



  • Suggested posts. 
    On the New community post page in the Theme editor, type a word in the title field for a subject that you know has existing posts in your community. Other posts with the word you typed in the title should appear in the list.



  • Actions menu for posts and comments. 
    On the Community post page in the Theme editor, click the Post Actions link and make sure that the drop-down opens correctly and otherwise fits with your design.



    Do the same to the menu next to a comment.



Checking your URLS

The URLs for Community have changed from /communities/public/ to /community/. Anything that links to a URL containing /communities/public/ will be automatically redirected to the new URLs, but if you’ve made custom Javascript manipulations that use the old URLs you need to update those.

To look for custom JavaScript manipulations that use the old URLs

  1. In the Help Center Theme editor, click the JS tab at the top.
  2. Search for /communities/.
  3. Update any Javascript to the new URLs.
  4. Click Save (but don’t publish yet).

Publishing your community

When you have specified where to show the new features and checked that everything looks as expected, you are ready to publish your new Community.

To publish your upgraded theme with the new community

  1. In the Help Center Theme editor, ensure that you have manually added the features you want, as described above, and checked everything.
  2. Click Save, if you haven’t already.
  3. Click Publish changes.
    After publishing, your end-users will be able to use your new community.

Note about switching customized themes: If you have upgraded to the new Community, but then decide to switch to a non-upgraded customized theme, you will need to go through the upgrade steps again for that customized theme. For example, if you want to switch to a custom winter holiday themed Help Center you customized last year, you’ll need to upgrade that theme to take advantage of new Community features. 

Next steps -- new ways to build your community

With the new Community you now have even more ways to style and build a great community. You can use templates that are powered by the enhanced theming framework, which also powers the rest of Help Center. The theming framework includes its own templating language.

With the templates and our extensive documentation you can make your community truly unique. For example you can make sure the new statuses stand out or insert breadcrumbs to ease navigation.

You are also welcome to visit support.zendesk.com to see how we at Zendesk use community. 

Have more questions? Submit a request

Comments

  • 0

    I tried to click on the "enhanced theming framework" but it said 
    "oops
    You're not authorized to access this page"

  • 0

    Hey Becca!

    It looks like that article has been archived, but we haven't updated this one accordingly.

    You can find all of the information on our Curlybars framework here: Help Center Templates. I'll let our Docs team know that we need to update the link!

  • 1

    Just to be clear...  this only affects the community and will not alter our support pages custom theme correct? The article mentions your theme quite a bit bust isn't overly specific about what theme.

    We do not use communities yet, but will probably for some products in the future.

Please sign in to leave a comment.

Powered by Zendesk