Zendesk Theme Failed to Upload Asset Png

Customizing your aid center theme

Fastpath: Guide admin > Customize pattern > Customize > Edit code

Web-savvy Guide admins tin work directly with the folio code to build a customized theme for your help center. Customized themes tin include:

• Editable templates that define the layout of each page (for example, article folio, category page, or community topic page)
• Custom pages that you create from scratch and place anywhere in your help center
• Global header and footer for the help heart

You tin also use a full-featured templating language called Curlybars to access help middle information and manipulate the content in page templates and custom pages. You can besides employ the JavaScript and CSS files included with your theme to brand site-wide changes to the appearance and behavior of the theme. If y'all are thinking most using your own HTML code to edit your help center theme, read Assuasive unsafe HTML in help centre manufactures.

Tip: If y'all need aid with your help eye branding and customization, see Diziana. They offer hundreds of ready-to-use themes and templates for purchase and can help go y'all up and running.

Annotation: Trial users are given the Professional program, which includes code editing options, but they will no longer be able to access that characteristic if they purchase Suite Team.

This commodity covers the following topics:

• Customizing the folio templates with HTML and Curlybars
• Customizing the CSS or JavaScript
• Using variables in CSS and HTML

Related articles:

• Branding your assistance centre
• Guide theming limits
• Help center templating cookbook
• Creating custom pages in your assist center
• Adding multiple article, department, and category templates to your theme

Customizing page templates and custom pages with HTML and Curlybars

The HTML for the help centre is contained in editable templates that define the layout of page types, custom pages, and a global header and footer. Yous can also use a full-featured templating language called Curlybars to create or manipulate content for these elements.

Note: On Enterprise plans, you lot tin can create custom pages, likewise as additional folio templates for articles, sections, and categories if you lot need multiple versions of those templates.

You tin can customize the template of any of the following page types or elements, or create your ain custom pages.

• Custom pages (custom_page.hbs): custom pages that you lot create from scratch and link from anywhere in your assist heart
• Commodity folio (article_page.hbs): the individual article pages in the knowledge base
• Category page (category_page.hbs): landing pages
• Community post listing folio (community_post_list_page.hbs)
• Customs mail service page (community_post_page.hbs)
• Community topic list page (community_topic_list_page.hbs)
• Community topic page (community_topic_page.hbs)
• Contributions page (contributions_page.hbs): the lists of posts, community comments, and commodity comments past an end-user
• Document caput (document_head.hbs): the document's head tag
• Mistake page (error_page.hbs): the message displayed when a user lands on a non-existent folio
• Footer (footer.hbs): the confined appearing at the bottom of all help eye pages
• Header (header.hbs): the bars appearing at the tiptop of all help center pages
• Home page (home_page.hbs): the top-level landing page for your aid center
• New community mail service page (new_community_post_page.hbs)
• New request page (new_request_page.hbs): the request or ticket submission grade
• Request folio (request_page.hbs): the private request or ticket pages
• Requests folio (requests_page.hbs): the lists of requests or tickets assigned to a user or that a user is CC'd on
• Search results (search_results.hbs): the search results display format
• Section folio (section_page.hbs): landing pages
• Post-obit page (subscriptions_page.hbs): the listing of categories, sections, and manufactures a user is following
• User profile page (user_profile_page.hbs)

Annotation: When you lot utilize the Theme Editor to edit the page templates, CSS, or JavaScript for a standard theme, or when yous develop your own theme, it is saved as a custom theme. Custom themes are not supported by Zendesk and are not automatically updated when new features are released (meet Nearly standard themes and custom themes in help middle).

To edit the page templates

1. In Guide, on the sidebar, click the Customize design icon ().
2. Click Customize on the theme you want to edit.
3. Click Edit lawmaking.

   

4. In the Templates section, click the template or custom page y'all want to alter.

   The page opens in the lawmaking editor.

5. Use the lawmaking view to edit the template or page.

   Y'all tin add, remove, or reorder any the following:

   • Template expressions to display and manipulate content in your pages

     For example, the breadcrumbs template helper {{breadcrumbs}} displays a breadcrumb navigation element on a folio. For a detailed guide on template expressions, come across Assist middle templates.

   • Dynamic content placeholders, (see Adding translated text)
   • Embeddable widgets created by third parties, (such as the Twitter search widget)
   • HTML markup
6. Click Salve in the top right corner to save your changes.

   If you edited a template, the changes are practical to every page in your theme that is based on the template you modified.

7. To preview your changes, click Preview, see Previewing your theme in the help eye.

   

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

   When you're finished editing the folio template or custom page, you tin close it.

Customizing the CSS or JavaScript

You can add JavaScript lawmaking or customize the site's CSS. For a gustatory modality of the things you can do in the help center with a piffling flake of coding, bank check out the following resource:

• Help center community tips
• Aid center CSS cookbook
• Assistance center JavaScript cookbook

Note: When you utilize the Theme Editor to edit the folio templates, CSS, or JavaScript for a standard theme, or when you develop your own theme, information technology is saved as a custom theme. Custom themes are not supported by Zendesk and are not automatically updated when new features are released. See About standard themes and custom themes in the assist center.

To customize the CSS or JavaScript

1. In Guide, click the Customize design icon () in the sidebar.
2. Click Customize on the theme you desire to edit.
3. Click Edit code.

   

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

   The file opens in the code editor.

5. Add or change the JavaScript or CSS in the code view.
6. Click Relieve in the top correct to relieve your changes.

   The changes are practical to your theme.

7. To preview your changes, click Preview, see Previewing your theme in the help center.

   

8. Make other lawmaking changes as needed, then click Relieve.

   When you're finished, yous can close the file.

Using variables in CSS and HTML

The properties y'all choose in the Settings panel or set in your manifest file for colors, fonts, and theme images are stored in variables. You lot can use these variables in the theme's style.css file. You can as well reference the variables using Curlybars expressions in HTML page templates.

The variables are useful if y'all want to specify the same value in several places and update it quickly. Updating the property updates it everywhere the variable is used. The default Copenhagen theme includes some variables for colors and fonts. You can change the names and labels, delete variables, or add your own (see the Settings manifest reference).

In the standard Copenhagen theme, you lot have the following variables past default:

• brand_color is the make color for major navigational elements
• brand_text_color is the brand colour for hover and active states
• text_color is the text colour for torso and heading elements
• link_color is the text color for link elements
• background_color is the background color of your help centre
• heading_font is the font for headings
• text_font is the font for torso text
• logo is the company logo
• favicon is the icon displayed in the address bar of your browser
• homepage_background_image is the hero epitome on the home page
• community_background_image is the hero image on the customs topics page
• community_image is the image for the community section on the home page

To utilise variables in CSS and HTML, run across:

• Examples using variables in CSS
• Examples using variables in Curlybars in HTML

Examples using variables in CSS

The properties you set for colors, fonts, and theme images are stored in variables that yous can use in your theme's fashion.css file.

For example, you can employ some of the default variables in CSS with the following syntax:

• $brand_color
• $brand_tex_color
• $heading_font
• $text_font

In the CSS file, you lot assign a variable to a CSS property the same way you lot would assign a normal value. For example:

                    .button {   label-color:                      $text_font; }                  

Yous can also apply unmarried curly brackets to embed the helper in a CSS expression, equally follows::

                      max-width: #{$search_width}px                    

Examples using variables in Curlybars in HTML

The properties yous set for colors, fonts, and theme images are stored in variables that you can reference with Curlybars expressions in HTML folio templates.

The variables get properties of the settings object in Curlybars. Equally with whatever Curlybars object, you can use double curly brackets and dot notation to insert a property in a page template.

For case:

• {{settings.color_1}} is the HEX value of a colour. For example: #FF00FF
• {{{settings.font_1}} is the font stack. For case, organization is defined every bit: '-apple-organization, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
• {{settings.homepage_background_image}} is the path to the file stored in this field. For case: p8.zdassets.com/theme_assets/...
• {{settings.range_input}} is the value of the range input.

The settings object tin be used as input to any helper. For example:

                      {{is settings.enabled}} ... {{/is}}                    

stringeroung1953.blogspot.com

Source: https://support.zendesk.com/hc/en-us/articles/4408839332250-Customizing-your-help-center-theme

Share this post