Question
I want to edit the names of the languages displayed in the language dropdown menu in the footer of my pages in my Help Center. How can I edit this?
Answer
You can replace the default code in your footer.hbs file with some custom code that will allow you to edit the names of the languages displayed in the language dropdown menu.
To do this
- Open the page template of your Help Center.
- Open the Footer page (footer.hbs) to modify the footer code.
- Remove the below code.
<footer class="footer">
<div class="footer-inner">
{{#link 'help_center'}}{{help_center.name}}{{/link}}
<div class="footer-language-selector">
{{#if alternative_locales}}
<div class="dropdown language-selector">
<button class="dropdown-toggle" aria-haspopup="true">
{{current_locale.name}}
</button>
<span class="dropdown-menu dropdown-menu-end" role="menu">
{{#each alternative_locales}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{name}}
</a>
{{/each}}
</span>
</div>
{{/if}}
</div>
</div>
</footer> - Replace this code with the code below.
<footer class="footer">
<div class="footer-inner">
{{#link 'help_center'}}{{help_center.name}}{{/link}}
<div class="footer-language-selector">
{{#if alternative_locales}}
<div class="dropdown language-selector">
<button class="dropdown-toggle" aria-haspopup="true">
{{#is current_locale.name 'English (US)'}}
Test
{{else}}
{{current_locale.name}}
{{/is}}
</button>
<span class="dropdown-menu dropdown-menu-nd" role="menu">
{{#each alternative_locales}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{#is name 'English (US)'}}
Test
{{else}}
{{name}}
{{/is}}
</a>
{{/each}}
</span>
</div>
{{/if}}
</div>
</div>
</footer>
In the example above, replace English (US)
with the name of the language you want to change. Replace 'Test' with the name you want to display in the language dropdown menu.
Find below an example showing the English (US)
dropdown option replaced with 'Test'.
Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Zendesk also can't provide support for third-party technologies such as JavaScript, jQuery, or CSS. Post any issues you have in the comments section or try searching for a solution online.
6 Comments
When using the code above, the language dropdown in our footer is not collapsed. Any tips on where we're going wrong?
Code:
Link: https://help.crunchyroll.com/hc/en-us
Screenshot:
Just looking at your public stylesheet it looks like your 'dropdown-menu' class has been removed so there is nothing saying for those elements to be hidden. I'd suggest taking a look at it in the copenhagen theme's css and bringing it over to your custom theme.
Hi All,
Is there any possibility to display country name as label name instead of locale ?
Thanks
Unfortunately, there isn't a way to automatically convert the locale to the country name. However, you could use the above solution to manually edit them as such.
Hope this helps and apologize for any inconvenience!
Erica
Is there any possibility to add a flag icon next to the language name?
Yes, it seems this is possible to add a flag icon next to the language selector. I've taken a look and found that other users are discussing similar needs here:
Change text switching language
I hope that helps!
Please sign in to leave a comment.