ScreenStepsPublishing Manuals to Zendesk Set up in Zendesk Help CenterAdd ScreenSteps Styles and Foldable Sections to Zendesk HC

Add ScreenSteps Styles and Foldable Sections to Zendesk HC

ScreenSteps has a feature that allows you to add styles to text fields.

This is an example of a text style. It makes certain text stand out from the rest--helpful for warnings, tips, alerts, information, or introductions.

If you are publishing ScreenSteps articles to Zendesk Help Center, and you want these styles to appear in your Zendesk articles, follow these 3 steps.

Step 1: Add This CSS to Your Zendesk Help Center

See these Zendesk instructions to see how to add custom CSS and Javascript to your Help Center.

Add the following CSS to your Zendesk HelpCenter.

Step 2: Include Font Awesome to Use Icons

If you want the icons to appear in the styled text fields (e.g. light bulb), you must include FontAwesome in your Help Center theme. Follow >> these instructions for including FontAwesome in Zendesk.

Step 3: Add Javascript for Foldable Sections

ScreenSteps has a feature that allows you to create foldable sections. You can enable Zendesk so that foldable sections appear in your Help Center articles.

What is a foldable section?

This is an example of a foldable section

When you click on the link, more information folds down. It's a great way to gradually reveal documentation to your customers, and walk them through a process.

Enabling foldable section in Zendesk

In order for foldable sections to work inside of Zendesk you will need to add some javascript to your Help Center theme. Add the javascript below to Zendesk to make foldable sections work inside of Zendesk.

See these Zendesk instructions to see how to add custom CSS and Javascript to your Help Center.

Optional: Style foldable section titles

By default foldable section titles will appear as they do in this article, at standard font sizes. If you would like to style them as headings then you can use the selector:

.screensteps-foldable-title-depth-1 

.screensteps-foldable-title-depth-2 

.screensteps-foldable-title-depth-3 

.screensteps-foldable-title-depth-4

The depth value corresponds to the nesting level of the foldable title.

If you want to apply a style to all titles you can use the selector:

.screensteps-foldable-title

2 Comments

Reagan Helms

Can I add or edit the javascript so that we can link customers directly to a foldable section, and have it open for them?

Greg DeVore

@Reagan - You don't need to add javascript. If you create an anchor for the section in ScreenSteps and then add that anchor to the end of the URL you share the foldable section will automatically open up.

Add your comment

E-Mail me when someone replies to this comment