Add ScreenSteps Styles and Foldable Sections to Zendesk HC

Updated Jul 23, 2019

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.

This is an example of a foldable section

You can include additional content under a foldable section.

If you are publishing ScreenSteps articles to Zendesk Help Center, and you want these styles to appear in your Zendesk articles, you will need to modify your Zendesk Help Center.

What would you like to add?

If you would like to add both options, start by selecting one option below and complete the steps. You will then be presented with the option of adding the other feature to your Zendesk Help Center.

Add 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 Help Center.

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.

Want to add foldable sections?

Add this Javascript for Foldable Sections

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.

Style your Foldable Sections (optional)

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

For example, if you would like to change the font size of a level 1 foldable heading you could add the following CSS to Zendesk:

.screensteps-foldable-title-depth-1 {
  font-size: 32px;
}

You're done!

Great! If you have any trouble, please contact support@screensteps.com

Add this Javascript for Foldable Sections

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.

Style your Foldable Sections (optional)

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

For example, if you would like to change the font size of a level 1 foldable heading you could add the following CSS to Zendesk:

.screensteps-foldable-title-depth-1 {
  font-size: 32px;
}

Want to add text styles?

Add 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 Help Center.

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.

You're done!

Great! If you have any trouble, please contact support@screensteps.com

Still Need Help?

Contact Us