Recent searches
No recent searches
HC Tip: Add "Promoted Articles" to front page + modify text in multiple languages
Posted Oct 15, 2013
One thing that we really like about HC is adding pinned topics (now known as "Promoted articles") to our front page.
In some themes, the tag doesn't come inserted automatically. I worked with Zendesker Arnaud to figure this out!
Add the Handlebar to your HTML
Under Homepage, add the following
<section class="clearfix">
{{promoted_articles}}<br />
</section>
Modify the CSS
/*
* Promoted articles
*/
.promoted-articles{
background-color:#f4f4f4;
padding:20px;
-webkit-border-radius: 3px;
border-radius: 3px;
clear:both;
}
.promoted-articles h3{
margin:0 0 10px 0;
font-weight:bold;
font-size:20px;
}
.bottomspace{
min-height:500px;
}
.main-column .form footer{
margin-top:20px;
}
This will add a section just for the promoted articles below the search bar and whatever introductory images/text you may have.
Modify the text "Promoted articles" in several languages
If you wish to change the text for something else, like Pinned Topics, go to the JS tab and add the following
// Promoted topics
$('section.promoted-articles h3').text('Pinned Topics');
If like me you are handling several languages, you can do the following
// Promoted topics
if(currentLanguage === 'Français') {
$('section.promoted-articles h3').text('Sujets mis en avant');
}
For every additional language you simply add an IF condition and keep going!
0
8 comments
Lanna L.
@Andrea, This is very helpful. I also like the organization of your help site in 4 clickable tabs. Was this placeholder code or a theme that Zendesk provided or did you have someone do this inhouse. I have only been using the new Help Center for a short while so I am trying to figure out my customization options. Thanks for your help
0
Andrea Saez
Hi Lanna,
We did this in-house.
You can check the document I wrote here: https://support.zendesk.com/entries/25627507-Adding-Navigation-Images-to-Help-Center-with-use-of-dynamic-content-
Best of luck!
0
ModeratorWes
Great tip Andrea and thanks for sharing!
0
Varun Juneja
Hi Andrea
I followed your tip and modified the CSS as the handlebar was already there on the home page
But it doesnt show the articles bulleted. There are no bullet points showing up for me
0
sylvain.egger
Hi!
The post is quite old but I'm trying to get my promoted article always on top on the homepage by reproducing your tip and here is the error I get when modifying my homepage code:
Thanks for your help!
0
Trapta Singh
{{#if promoted_articles}}<section class="articles">
<h2>Popular Question</h2>
<ul class="article-list promoted-articles {{#isnt settings.custom_block_visibility 'show'}}update-width{{/isnt}}">
{{#each promoted_articles}}
<li class="promoted-articles-item">
<a href="{{url}}">
{{title}}
</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
Let me know if you face any issue.
Thanks
Team Diziana
0
Shay McElroy
This is what I'm getting.
1 error
Not possible to access `custom_block_visibility` in `settings.custom_block_visibility`
0
Trapta Singh
Hi @Shay,
Can you provide little more details on it? Where are you putting this component? Are you trying to put it in the promoted_articles component?
An screenshot of your template will be of great help.
Thanks
Team Diziana
0