Copenhagen Theme - Home Page Accordions

65 Comments

  • Jennifer Rowe
    Zendesk Documentation Team

    A new tip from Wes "the-one-and-only-help-center-community-badass" Drury!

    Woo hoo. Looks like he wants to have one of the top tips of the year for the third straight year....could it be this one!?

    Looks like a great tip. Thanks, Wes.

     

    0
  • Jacob the Moderator
    Community Moderator
    Zendesk Luminary

    Nice Wes!

    Did you deliberately chose different colors for the accordion and section/article links in your demo?

    I guess that makes sense to highlight the accordion, but would love to see them using the same color scheme.

    Great job!

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Jacob - Yes I changed the color to match my theme.  You can easily change the colors to any color that you want by using the CSS that you copied in.  When you see #388800 that is the green color I used, you can change it to $color_1 through $color_4 to match the default theme.

    0
  • Larisa Moore

    @Wes - where I'd really like to do this is our category pages. We're currently using Humble Squid and have customized our home page already with image/text boxes for our four categories--but two of our categories have 8 sections and even cutting the article list to show 3 instead of the standard 6, makes for a long page (see https://customer.real.com/hc/en-us/categories/200569228). Can this code be adapted to the category page? If so then I might consider switching to Copenhagen if that's a requirement for this to work.

    Thanks!

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Larisa - Yes I don't see why you couldn't use the same code on the category page.  Not sure if its an exact copy and paste but I will try real quick for you.

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Larisa - I have to make two changes for the category page as I had to use the full path but it does work.  Here is an example.

    https://zenultra.zendesk.com/hc/en-us/categories/201158796-General

    I just included the code inside of Gist that's above.  You will now see the full code for the category page.

    Code Here.

     

    0
  • Larisa Moore

    Awesome, thank you so much!

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Larisa - I just looked at your current HC and it wouldn't take a lot to get your entire look and feel over to the Copenhagen theme.  I'm currently in the process of moving all of Zendesk's Help Centers over to the Copenhagen theme.  If you need help moving your theme just let me know.

    0
  • Brian Adkins

    Accordions do not seem functional on mobile ... at least not on iPhone's current mobile safari or Google Chrome

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Brian - I was able to confirm this as well.  Let me track down the issue and I'll get it fixed.

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Brian - the issue has been resolved and I updated my CSS file on the GIST.  I added line 20 on my Gist which was  cursor: pointer;

    I verified that it was now working on the iPhone.

    0
  • Thibault Mortier

    Nice one!

    I tried to hide more than one category with the {{#isnt name 'Getting Started' 'Product Updates'}}  but I couldn't find the right syntax. 

    Only way I manage was like that:

    {{#isnt name 'Getting Started'}}
      {{#isnt name 'Product Updates'}}
      {{/isnt}}
    {{/isnt}}

    Any tip?

     

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Thibault - When you have more than one then the condition evaluates as True or False so the way you did it was the best way to implement at this time.

    0
  • Mike Cartwright

    Thanks for including the live demo, Wes!

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Mike - Your welcome and enjoy :-)

    0
  • Justin

    @Wes - how can we adjust this code to combine accordions with category icons?

    0
  • Justin

    Also, can the accordions' width be adjusted? On desktop it looks a little strange being full width. On mobile, that seems fine.

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Justin - Yes everything you are asking is possible with a few changes to the code.  What kind of icons were you thinking about using, FontAwesome or are you uploading your own images to the asset area.  Were you wanting an icon before the category title.  The more details you can give me, the better code I can give you.

    0
  • Justin

    Thanks for the help, Wes. Basically I want to add our icon small icon images that we upload to the assets area. Honestly, I like the accordions but our most ideal situation would be more of a grid style than list style - is that possible? The behavior we really want is to click one of three categories and populate FAQ articles below based on whichever category is selected. For example, on Zendesk's main support page....if you click the 'knowledge base' box....the accordions populate down below. This is the behavior we really want (preferably with the boxes being categories, then the accordions show the sections within that category). These accordions seem to be the closest code I can find. Any thoughts/advice would be very helpful!

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Justin - Anything is possible it's just a matter of rearranging your code to make it appear how you want.  Adding icons is pretty simple but you would have to touch the CSS a little to get it just how you want it.  If I have some time I will put some icons next to the accordions so you can see how it looks and the code behind it.

    0
  • Justin

    Thanks Wes, I'd really appreciate that!

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Justin - I updated my demo with some images.  The code I used was.

    HTML (right below the <a role> and right above the <h3>{{name}}</h3>

    {{#is name 'FAQ'}}<img class="catimgs" src="{{asset '77_Essential_Icons_Book.png'}}" />{{/is}}
    {{#is name 'General'}}<img class="catimgs" src="{{asset '77_Essential_Icons_Comment_Lines.png'}}" />{{/is}}

    CSS ( you will need to play around with the magin depending on your image size

    .catimgs {
    float: left;
    margin: -10px 10px 0 0;
    }

    0
  • Justin

    That's awesome - thank you Wes! Is it possible to resize the width of these accordions?

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Justin - sure just add the following CSS.

    .panel-heading {
    padding: 5px 10px !important;
    }
     
    Adjust the padding to whatever size you would like.
    0
  • Justin

    Thanks. One last question - when I add the padding, the accordions still stack from top to bottom. Is it possible to get say three category boxes side-by-side and when the user clicks one, the accordion for that category opens down below?

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Justin - Yes that is possible as well with some code changes.  I just don't have the time to go through and make that happen right now but you the Guide Knowledgebase can be customized any way you would like.

    0
  • Justin

    Cool - thanks for all your help! You've got me way ahead of where I was. :)

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Justin - Your welcome and best of luck.

    0
  • Justin

    Hey Wes - any ideas as to how we could center the logo in our Help Center at the top? When I put the center brackets around the logo url, the logo gets resized.

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @justin - that would be controlled in the CSS, the logo size and position.  Do you have a link to your Help Center

    0

Please sign in to leave a comment.

Powered by Zendesk