Copenhagen Theme - Home Page Accordions

62 Comentarios

  • Jennifer Rowe
    Acciones de comentarios Permalink

    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.

     

    -1
  • Jacob J Christensen
    Acciones de comentarios Permalink

    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
  • Wes Drury
    Acciones de comentarios Permalink

    @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.

    1
  • Larisa Moore
    Acciones de comentarios Permalink

    @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
  • Wes Drury
    Acciones de comentarios Permalink

    @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
  • Wes Drury
    Acciones de comentarios Permalink

    @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
    Acciones de comentarios Permalink

    Awesome, thank you so much!

    0
  • Wes Drury
    Acciones de comentarios Permalink

    @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
    Acciones de comentarios Permalink

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

    0
  • Wes Drury
    Acciones de comentarios Permalink

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

    0
  • Wes Drury
    Acciones de comentarios Permalink

    @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
    Acciones de comentarios Permalink

    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
  • Wes Drury
    Acciones de comentarios Permalink

    @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
    Acciones de comentarios Permalink

    Thanks for including the live demo, Wes!

    0
  • Wes Drury
    Acciones de comentarios Permalink

    @Mike - Your welcome and enjoy :-)

    0
  • Justin
    Acciones de comentarios Permalink

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

    0
  • Justin
    Acciones de comentarios Permalink

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

    0
  • Wes Drury
    Acciones de comentarios Permalink

    @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
    Acciones de comentarios Permalink

    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
  • Wes Drury
    Acciones de comentarios Permalink

    @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
    Acciones de comentarios Permalink

    Thanks Wes, I'd really appreciate that!

    0
  • Wes Drury
    Acciones de comentarios Permalink

    @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
    Acciones de comentarios Permalink

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

    0
  • Wes Drury
    Acciones de comentarios Permalink

    @Justin - sure just add the following CSS.

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

    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
  • Wes Drury
    Acciones de comentarios Permalink

    @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
    Acciones de comentarios Permalink

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

    0
  • Wes Drury
    Acciones de comentarios Permalink

    @Justin - Your welcome and best of luck.

    0
  • Justin
    Acciones de comentarios Permalink

    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
  • Wes Drury
    Acciones de comentarios Permalink

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

    0

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk