Change the "Featured Article" star to a bullet or other character in Help Center
Thanks for Arthur Mori @ Zendesk support for hooking me up with this tip when I asked them how I could change it so I'm posting it here for other DIY'ers that may check the forums before reaching out for help.
If you go to edit the appearance of your Help Center, and edit the theme that you are on, you can paste the code below to change the star into a bullet:
<script language="javascript">
$('li.article-promoted span').html('•');
</script>
Specifically, you would write this code below the default codes of your home page HTML customization:
And applying the code will make the star look like this:
Note: I noticed that if you want to change it to something other than a bullet, just replace '•' with something else (i.e. '♦' for a diamond shape). Use this site for a reference of all the other characters you can use: http://www.w3schools.com/tags/ref_symbols.asp
-
Thanks for sharing this, Jonathan. Another great HC tip from Watchman Monitoring!
-
I used this in the 'Section page' and added a little colour with css.
Thanks for the tip!
-
Thanks for this. Is there any way to completely eliminate any image next to promoted articles? We want to have certain articles anchored at the top, but do not want anything indicating that they are promoted. I tried using the code above and just doing .html(''); but I get a small indentation.
-
Rob, try this code
You will need to add this to the page e.g. section page or category page.
<script language="javascript">
$('li.article-promoted span').html('');
</script> -
@Rob
I was having the same problem as you. On top of adding this piece of Javascript, I found that the indent is caused by a margin set in your stylesheet.
Find the class called ".article-promoted span". You'll find there is a "right-margin" property set in that class. Either remove that property, or change it to 0px.
-
Neato - thanks guys!
-
Great, tnx for sharing!
-
Thought I would also add if you add the following to your JS file in the template, it will remove it also (saves adding it to individual pages)
$(document).ready(function() {
$('li.article-promoted span').html('');
}); -
Hi
I am new to coding the help centre. I followed your instructions above but it doesn't work. My home page code looks like this
<section class="clearfix">
<div class="knowledge-base">
<!--<STYLE>H2 {FONT-SIZE: 15pt; COLOR: #990000 };</STYLE>
<CENTER>
<H2>Public Holiday Closure</H2>
</CENTER>--><h1>{{help_center_name}}</h1>
{{category_list}}
{{promoted_articles}}
</div><div class="community">
{{community_header}}
{{recent_community_activity}}
</div>
</section>
<script language="javascript">$('li.article-promoted span').html('•');
</script>
But on the home page I still have them as
Can you please help
-
Thanks for this. Now that we have Copenhagen, how do we change the star icon to something else?
-
Hi Heather,
You have to do in the CSS.
If you need help, one of the HC experts here can probably give you some code.
What would you like it to be?
-
Perhaps an arrow or an exclamation point, we're not sure - I tried accessing the link from the original post here Use this site for a reference of all the other characters you can use: http://www.w3schools.com/tags/ref_symbols.asp but that brings me to a 404.
eek!
-
Hello @Heather R
On Copenhagen, Now you can change your own promoted star icons.
See this site - http://fontawesome.io/icons/
You can also use your images icons.
Please let us know which way is best for you (Font Awesome or Images icon). We'll send you CSS code.
Thanks
Customer Support Team
http://customersupporttheme.com
(Experts in Zendesk Themes, Zendesk Help Center, Plugins, Help Center Branding and Customization.)
Iniciar sesión para dejar un comentario.
13 Comentarios