Overview
You can localize the banner image on the home page of your Help Center.
Tip: While this is written for use in the Copenhagen theme, the same concept can have a number of applications across Help Center themes.
Conditions
- Must be on Support Professional or Enterprise
- Must be on Guide Professional or Enterprise
- Must be at least an admin or have access to customize theme of help center
Procedure
- In the Help Center, select Guide admin > Customize design > View theme > Edit code.
- Click to Add asset.
- Select the localized images you need for your Help Center.
- Next, click on the CSS template (style.css):
- The banner should be located in a section.hero class, and then applied using CSS. You can locate the section by either scrolling down or searching for it.
- In order to localize this image you can create an if/then string of code to apply the appropriate CSS--essentially, if the language is “A” use the asset heroA, and if language is “B” use the asset heroB, and so on:
- Once you've gotten things set up in the CSS, you can preview it and when you're ready, publish the changes.
Below is the end result from my test account! To left in Chrome is the English version of the Help Center, and to the right in Firefox, is the Spanish version:
Additional Help Center resources:
2 Comments
Great tip, just became very relevant for me. Thanks Claire!
@Keith
Go back to the CSS and search (Ctrl. + F on Window) for the markup you inserted: .hero:lang( for instance.
Remove what you inserted previously - each part should begin with .hero:lang and end with }
If you want to use it at a later time you could simply comment it out instead of removing it - in that case put a /* before the markup and */ after.
Preview the change and Save when you're happy. Hope that helps you out.
Hi,
This really helped, but I want to return to what it was before, where the banner was the default. What do I do? Thanks
Please sign in to leave a comment.