Using Icons/Images for Section Titles in the Help Center

Answered

29 Comments

  • Wes Drury
    Comment actions Permalink

    @Mike - I'm trying to understand what you are asking for.  Your section page is where it list your articles so are you wanting to put images above all the articles for each section.  In your example you have Section A in both Category 1 and Category 2.  Are those the same sections or different sections.  I'm trying to picture it but can't.  Can you explain a little more.

    0
  • Mike Dixon
    Comment actions Permalink

    @Wes -- Sorry, I meant the category page and not the section page, but it would be helpful to apply the same concept to both.  I've attached images of what I'd like it to look like.  I want to use the icons because they coordinate with the sections of our website...it should make navigating the knowledge base easier.

    0
  • Wes Drury
    Comment actions Permalink

    @Mike - I'm thinking we may be able to do this with some Font Awesome icons and some CSS.  I would like to do some testing and to make sure I have you exact setup I need to know what theme you are using.

     

    0
  • Mike Dixon
    Comment actions Permalink

    Thanks for the quick response.  I'm using a heavily modified version of The Curious Wind.  I'm open to all suggestions, but am constrained by the fonts -- I really have to use the ones that are currently in our website....if these can't be converted to Font Awesome, then they won't work for me.

    If that limitation is too restrictive, I understand and appreciate your efforts.  If not, I still appreciate your efforts!

    0
  • Wes Drury
    Comment actions Permalink

    @Mike - Font Awesome has nothing to do with the fonts as they are all about the icons.  I will do some testing when I get some free time.

    0
  • Wes Drury
    Comment actions Permalink

    @Mike - Just a quick update.  I haven't had a chance to play around with the code as of yet as I've been busy working on my own theme that I plan on releasing to the community.  You can see my theme here which will resize to any device  https://moderatorwes.zendesk.com/hc/en-us

    I'm almost done and I will pick back up on this thread when its done.  If you are able to get your theme like you requested just give me an update.

    0
  • Wes Drury
    Comment actions Permalink

    @Mike - Do you still need help with this as if you do I will post some code for you.

    1
  • Hanz Thumas
    Comment actions Permalink

    @Wes,

    I would like to do a similar thing: instead of text titles in the category page, i'd like to use the image logo. Feel free to post the code you have/had.

    THX!.

    0
  • Mike Dixon
    Comment actions Permalink

    Sorry for letting this thread die.  Yes, I am still interested in seeing what you've come up with @Wes, and thanks again for the interest.

    0
  • Wes Drury
    Comment actions Permalink

    @Hanz & Mike - You can add images in front of the categories and sections by using some CSS and JQuery.  I'm working on an example so that I can post a screenshot for you.  

    0
  • Wes Drury
    Comment actions Permalink

    @Hanz and Mike - If you would like to place an image in front of your titles then you would need to add some JQuery and CSS to do this.  What we are going to do is add a class to the current titles via JQuery.  That class is actually pointing back to the URL of your image.  You may have to tweak some of the code depending on your Zendesk theme but the code will look something like this:

    CSS

    h1.imageheading a, h2.imageheading a, h3.imageheading a,h1.imageheading, h2.imageheading,h3.imageheading, .section > h2,.section h3
    {
    font-size: 32px;
    line-height: 64px;
    padding-left: 80px;
    }

    .imageheading.general-icon {
    background: #fff url(//p2.zdassets.com/hc/theme_assets/path to your image.png) top left no-repeat;
    }

    .imageheading.News-icon {
    background: #fff url(//p2.zdassets.com/hc/theme_assets/path to your image.png) top left no-repeat;
    }

    .imageheading.FAQ-icon {
    background: #fff url(//p2.zdassets.com/hc/theme_assets/path to your image.png) top left no-repeat;
    }

     

    JS

    //Category Home Page
    $('h2:contains("General")').addClass('imageheading general-icon');

    //Section Home Page
    $('.section h3:contains("News")').addClass('imageheading News-icon');
    $('.section h3:contains("FAQ")').addClass('imageheading FAQ-icon');

    //Section-Section
    $('h1:contains("News")').addClass('imageheading News-icon');
    $('h1:contains("FAQ")').addClass('imageheading FAQ-icon');

    I hope this helps and you get the point on everything that you need to do.  It actually turned out pretty good.  Attached is a screenshot where I did this on a default Zendesk theme.  Just keep adding to your CSS and JS till you have all of your Categories and Sections.  Also make sure you copy and paste the link to your Zendesk image in the CSS.  The images should be in your Assets folder.  If you have any further questions just let me know and make sure you post your Help Center link if its not private so that I can see what you have done.

    1
  • Mike Dixon
    Comment actions Permalink

    Your screens look great.  Thanks so much for your time on this.  I'll do some testing over the next few days and post my results.

    0
  • Wes Drury
    Comment actions Permalink

    @Mike - Let me know how your testing goes and if you want me to actually implement some code on your site I'll be glad to help you out if needed.

    0
  • Hanz Thumas
    Comment actions Permalink

    @Wes,

    Thanx for the update and example code. I've been testing it but I can't get it to work how I want it to:

    • We're using a customized Multisegment theme
    • In the Home page, I'm using a category list of images with text hover to link to the category page
    • Our category page consists of a <section><h1>{{title}}</h1>{{section_tree}}</section> 
    • When fitting your code to our needs, every <h1>  is padding left, not just the category page <h1>, and no images appear although I'm pointing correctly to them.

    You can have a look at it via http://helpdesk.plantyn.com/hc/nl

    Thx.

    0
  • Wes Drury
    Comment actions Permalink

    @Hanz - From a quick glance at your site it does not appear that your Jquery is getting called.  Try moving your Jquery up to the top under $(document).ready(function() {     I'm wondering if some of the code above it is interfering.  I'll take a more detailed look as soon as I get time to see why its padding every <h1> 

    0
  • Hanz Thumas
    Comment actions Permalink

    @Wes - So the Jquery is moved to the top.. still no images. 

    Thanx for diggin' deeper :-)

    0
  • Hanz Thumas
    Comment actions Permalink

    @Wes,

     

    I figured it out! - in the code I didn't use the line-height.. - my mistake, by adding that line, the logo's show up. And as for the padding of all H1's.. i added a class to that particular h1 so all other h1's don't pad.

    Thanx for the help on this one!

    0
  • Wes Drury
    Comment actions Permalink

    @Hanz - good to hear.  Sorry, I haven't had much time to take a look as I've been traveling.  Thanks for the update.

    0
  • Tom Hardiman
    Comment actions Permalink

    HI Wes, i want to put my own logos onto the category tiles am i right in using the code above? each tile has a different logo. i have never used jquery before so am struggling to follow,

     

    thanks tom 

    0
  • Wes Drury
    Comment actions Permalink

    @Tom - The code above won't exactly work with the Humble Squid theme however we could make it work.  Have you looked at some of my themes.  You can simply copy and past my code and then edit from there.  Take a look here:

    https://support.zendesk.com/entries/41702416

    https://support.zendesk.com/entries/77769066

     

    0
  • Anita Erven
    Comment actions Permalink

    I'm able to get the first icon to appear in my category tree displayed on the homepage, but the other icons aren't appearing. There seems to be an issue with the JS only replacing the first category h2, but not the others.

    0
  • Precious Borthwell
    Comment actions Permalink

    We added the CSS and JS, as well as the appropriate assets. However, we are lost in the translation of tags associated with our sections and categories, and what you provided. We tried a few different variations to no success.
    Can you reference our current sections and categories, and provide us with a snippet like you did before that correlates?
    Thank you!

    0
  • Wes Drury
    Comment actions Permalink

    @Precious - With the new theming platform, you should be able to add images using just HTML and placeholders.  Your code would look something like this.  No need to use JS anymore.

     

    {{#each categories}}
    <div class="col-md-3 text-center boxes">

    <div class="home-box">
    <a href="{{url}}">
    {{#is name 'Announcements'}}<div class="icon icon-rocket"></div>{{/is}}
    {{#is name 'Get Started'}}<div class="icon icon-note"></div>{{/is}}
    {{#is name 'Online Features'}}<div class="icon icon-screen-desktop"></div>{{/is}}
    {{#is name 'Ask A Question'}}<div class="icon icon-bubbles"></div>{{/is}}
    <h3><strong>{{name}}</strong></h3>
    <p class="text-muted">{{description}}</p>
    </a>
    </div>

    </div>
    {{/each}}

     

    In the code above I'm adding icons for the categories on the Home Page.  This same logic applies to the Category, and Section pages as well.  Hope this helps.

     

    0
  • Mischa
    Comment actions Permalink

    Hi, Wes! Could you help us out with replacing category buttons with images (with text on them, see attached as an example)? Also, how do I make sure the images change to inverted colors upon hover over?

    0
  • Andrea Saez
    Comment actions Permalink

    Mischa,

    You need to have an img a:hover to switch the image. The image also needs to exist in inverted colors in order for that to work.

    1
  • Mischa
    Comment actions Permalink

    I do have all images, including inverted. I am just not sure what to do next :)

    0
  • Jen
    Comment actions Permalink

    I’m trying to add an icon before the category and section page H1 tags. I added the CSS & JS from this article but still no luck. I'm using the Copenhagen theme. Can you help?

    Here’s the page code:

    Category page:
    <h1 class="imageheading">{{category.name}}</h1>

    Section page:
    <h1 class="imageheading">
         {{section.name}}
         {{#if section.internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </h1>

    Here’s the JS:
    $('h1:contains("General Questions")').addClass('imageheading general-icon');
    $('h1:contains("Artwork & Design")').addClass('imageheading artwork-icon');
    $('h1:contains("On-Disc Printing")').addClass('imageheading ondisc-icon');

    CSS:
    h1.imageheading a, h2.imageheading a, h3.imageheading a, h1.imageheading, h2.imageheading,h3.imageheading, .section > h1, .section > h2, .section h3{
    font-size: 32px;
    line-height: 64px;
    padding-left: 80px;}

    h1.imageheading{
    font-size: 32px;
    line-height: 64px;
    padding-left: 160px;
    padding-top:40px;
    height: 160px;
    margin-top: 10px;
    width:940px; }

    .imageheading.general-icon {
    background: #fff url(//p6.zdassets.com/hc/theme_assets/813285/200161887/cdb-menu-icon1.png) top left no-repeat; }

    h1.imageheading.artwork-icon {
    background: #fff url(//p6.zdassets.com/hc/theme_assets/813285/200161887/cdb-menu-icon2.png) top left no-repeat; }

    h1.imageheading.ondisc-icon {
    background: #fff url(//p6.zdassets.com/hc/theme_assets/813285/200161887/cdb-menu-icon3.png) top left no-repeat; }

    0
  • Wes Drury
    Comment actions Permalink

    @Jen - There's no need to use any of the above code as that was written before the new theme framework. Look at my comment from April 28th.  This is how it should be done now.

    {{#is name 'Announcements'}}<div class="icon icon-rocket"></div>{{/is}}
    {{#is name 'Get Started'}}<div class="icon icon-note"></div>{{/is}}
    {{#is name 'Online Features'}}<div class="icon icon-screen-desktop"></div>{{/is}}
    {{#is name 'Ask A Question'}}<div class="icon icon-bubbles"></div>{{/is}}

    Something similar to this.  If you need further assistenance as each use case is different, join my slack channel from here.  

     

     

    0
  • Jennifer Rowe
    Comment actions Permalink

    Thanks, Wes! Can you make a tip with your code?

    Seems like there's a lot of interest in this and we don't have a tip with the new way, as far as I know.

    1

Post is closed for comments.

Powered by Zendesk