Copenhagen Theme - Home Page Accordions

62 Kommentare

  • Jennifer Rowe
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare Permalink

    Awesome, thank you so much!

    0
  • Wes Drury
    Aktionen für Kommentare 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
    Aktionen für Kommentare Permalink

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

    0
  • Wes Drury
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare Permalink

    Thanks for including the live demo, Wes!

    0
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Mike - Your welcome and enjoy :-)

    0
  • Justin
    Aktionen für Kommentare Permalink

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

    0
  • Justin
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare Permalink

    Thanks Wes, I'd really appreciate that!

    0
  • Wes Drury
    Aktionen für Kommentare 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
    Aktionen für Kommentare Permalink

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

    0
  • Wes Drury
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare Permalink

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

    0
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Justin - Your welcome and best of luck.

    0
  • Justin
    Aktionen für Kommentare 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
    Aktionen für Kommentare Permalink

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

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk