Copenhagen Theme - Home Page Accordions

62 Comentários

  • Justin
    Ações de comentário Permalink

    help.edmunds.com

    0
  • Wes Drury
    Ações de comentário Permalink

    Give this a shot:

    In the CSS tab.

    Find .header

    remove justify-content: space-around.

    Add.

    .logo {

    displayflex;

     justify-contentcenter;

     flex1 auto;

    }

     

    0
  • Justin
    Ações de comentário Permalink

    Thanks Wes. That works better but it seems to be centering the logo between the far left and the submit a request link, which isn't 100% centered on the screen if that makes sense. (I tested this in our sandbox account)

    0
  • Wes Drury
    Ações de comentário Permalink

    @Justin that's about close as I can get it without re-doing all the code.  Yes, it centered between the left and the submit a request.  You could put a margin-left: 60% or something like that to get it perfect but you would need to adjust that per each media query.

    0
  • Justin
    Ações de comentário Permalink

    Perfect - thank you!!

    0
  • Jessica Allen
    Ações de comentário Permalink

    Hi Wes - I used your code for the Category page but see it only creates an accordion out of the page header. Do you know how I would create accordions for the Section Tree Titles so that the Article Lists drop down? 

     

    https://frontstream.zendesk.com/hc/en-us/categories/200337295-Enterprise-Fundraising

    We are in the midst of moving over to Copenhagen. 

    0
  • Wes Drury
    Ações de comentário Permalink

    Hi Jessica - Sorry for the delayed response.  The code would be similar but would require a couple of modifications.  To be clear are you trying to do accordions on your sections page or category page.

    0
  • Jessica Allen
    Ações de comentário Permalink

    @wes no worries! I am wanting to do accordions on the Category Page. So for example, https://frontstream.zendesk.com/hc/en-us/categories/200337295-Artez  all of the articles would be hidden in the accordion until you click on the title, either Artez Full Training Videos, Getting Started & Account Configuration etc. Does that make sense? 

    0
  • Heather Rommel
    Ações de comentário Permalink

    Ah! I'm looking to do the exact same thing! On the Category page, have all the sections showing but expandable. Then expand again for the articles.

    0
  • Trapta
    Ações de comentário Permalink

    @Jessica Allen and @Heather R ,

    You can use {{section_tree_with_article}} instead or {{#each}} component.

    If you are using Copenhagen Theme then, go to your category template and remove the code from line no.17 to line no. 53 and add {{section_tree_with_article}} component on its place. Now go to your CSS and paste the below code with your current CSS -

    .section-tree-with-article ul.article-list,
    .section-tree-with-article article.article-body {display: none;}

    .section-tree-with-article .section {margin-bottom: 10px;}

    .section-tree-with-article .section h2 {
    cursor: pointer;
    text-align: left; }

    Now go to your JS and paste the below code at the bottom of your code -

    $(document).ready(function(){

    $('.section-tree-with-article .section h2').click(function(e){
    e.preventDefault();
    $(this).next('.article-list').slideToggle(250);
    });

    $('.section-tree-with-article .article-list a').click(function(e){
    $(this).next('.article-body').slideToggle(250);
    });

    });

    Let me know how it goes for you.

    Thanks

    1
  • Wes Drury
    Ações de comentário Permalink

    @Trapta - Thanks for jumping in while I'm on vacation.  You are my superhero :-)

    2
  • Trapta
    Ações de comentário Permalink

    @Wes - Not to mention but this is what I was supposed to do to achieve our goal ;-)

    0
  • Joshua Allen
    Ações de comentário Permalink

    Thanks @Wes and @Trapta,

    The accordions and {{section_tree_with_article}} are both very useful and just what I was looking for.

    0
  • Andrew Chong
    Ações de comentário Permalink

    Is there an easy way to make the FIrst category be open by default?

    0
  • Sylvain
    Ações de comentário Permalink

    Hi all, 

    Does someone has tips to customize Copenhagen home page like a table?

    We want to provide support for lot of different products (18 products split in 4 or 5 product ranges).

    The idea would be to have 4 or 5 columns (one for each product range) and products in places in their corresponding columns (the newest on the top).

    I searched in the community and knowledge base but without success :-(.

    @ Wes who seems to be an expert here, do you have any suggestion?

     

    An exemple of design I would like:

    0
  • Tim Shannon
    Ações de comentário Permalink

    Hello Wes!

    Quick question...I hope,

    We are using Professional Environment with Guide, and productivity pack 

    I am using the Copenhagen theme for our institution.  The main landing page, is the activity page behind SSO, but anyone can submit a ticket.  I have been creating new ticket forms, and now have the " Submit a request" screen and "Please choose your issue below" on it https://fgcu.zendesk.com/hc/en-us/requests/new

    So my first question is this, all references for "request" has been modified to say "ticket"in the guide environment, and now since adding forms, I can not find how to change this particular reference from request to ticket.

    Second, can I force an end-user to a specific form instead of letting them choose? Possibly via link directly to the form I want them to go to? 

     

    Thank you in advance!

    0
  • Cboogaart
    Ações de comentário Permalink

    Is there a way to display ALL articles in the accordion? Verses showing 6 and then a link for See More?  We have 7 to 8 articles in each section, and it would be nice to just display them all when a user expands a section.

    0
  • Trapta
    Ações de comentário Permalink

    @Cboogaart,

    I think you have already got an answer for this in the other post of yours.

    Thanks

    0
  • Andrew Checkley
    Ações de comentário Permalink

    @Wes,

    Thanks for the above just been testing this along with the changes that @Jessica Allen  requested. however when dropping down a section to reveal the articles clicking the article then drops the article down also within the same page along with a link to "View page"

    how would I change this so that it just drops the list of articles and then links directly through rather than the preview (although showing the whole article) with the view page link?

     

    Hope that makes sense?

     

    Cheers

    0
  • Trapta
    Ações de comentário Permalink

    Hey @Andrew Checkley,

    Try putting the below code in your script.js file:

    var link = $('.section-tree-with-article ul > li > a, .category-tree-with-article ul > li > a');
    link.click(function(e){
    e.stopPropagation();
    window.location.href = $(this).attr('href');
    });

    Let me know if this solves your issue.

    Thanks

    Team Diziana

    0
  • Andrew Checkley
    Ações de comentário Permalink

    @Trapta, Works a treat thank you :)

    0
  • Trapta
    Ações de comentário Permalink

    @Andrew, glad you got it working. Enjoy :)

    0
  • Peter Lemmens
    Ações de comentário Permalink

    Hi!


    1. I was styling our help center so the sections can be displayed in boxes on the homepage, but was wondering if possible to limit the number of displayed sections to 3? 

    I have used this code to display the sections 

    {{#each sections}}
    <a href="{{url}}" class="blocks-item-description added-link">
    <h4 class="blocks-item-title">{{ name }}</h4>
    {{/each}}

    2. Is it possible to display an article instead of a section in a particular case? 

    Thanks a lot! 

    0
  • Trapta
    Ações de comentário Permalink

    Hi @Peter,

    In order to answer your first question, you can use the below code to hide sections using CSS:

    .blocks-item-description added-link:nth-child(n+4) {display: none;}

    In order to answer your second question, you can use the {{#is}} helper to make an exception.

    Let me know if this solves your issue.

    Thanks

    Team Diziana

    0
  • Nikolay Petrov
    Ações de comentário Permalink

    Hey there folks, this is my first comment ever here and before diving in to it, I just want to say big thanks to everyone here that has provided amazing tutorials and help guides! You guys rock!

     

    A bit of background prior my question. 

    - I am using an old custom theme (it was the one with the octopus).

    - I am trying to build something like a status page (which is a category page) that has several sections and an article in those sections would be a status post/incident. 

    - I am using {{is}} and {{else}} in category_page.hbs to display particular html just for that one category (status page)

    - I am trying to implement the accordion element in this page to have each section in its own accordion and to auto expand if section has articles inside.

    Either way I somehow managed to almost accomplish what I need with {{section_tree_with_article}}, but still I was wondering if you guys can help with the following:

     

    1. Is it possible to have the section in the accordion to auto expand if there are present articles in there? 

    2. If 1. is possible, is it possible to set a label (a word from the article title) to expand the sections containing that tag/label 

    For example if you have 2 articles in several sections with the word ONGOING in the title, these sections to auto expand? 

     

    Currently I have this:

     <div class="container">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">


    {{#isnt category.name ''}}
    <div class="panel panel-red">
    <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#tab_{{category.id}}" id="headingOne" aria-expanded="true">
    <h4 class="panel-title accordion-toggle">
    <a role="">
    <h3> {{category.name}}</h3>
    </a>
    </h4>
    </div>

    <div id="tab_{{category.id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body accordion-list">
    {{section_tree_with_article}}
    </div>
    </div>
    </div>
    {{/isnt}}
    </div>

     

    Thank you for the time and let me know if you need more info from me like the css/js and etc

    Cheers, Nick

    0
  • Nicole - Community Manager
    Ações de comentário Permalink

    Hey Nikolay! Welcome to the Zendesk Community! Glad to hear you've found some helpful tips in our Help Center.

    We'll ping some of our Guide Customization experts and see if we can get some answers for you.

    0
  • Dan Ross
    Ações de comentário Permalink

    Hey Nick,

    Sorry to hear you're having issues. I'm not sure how much I'll be able to help you, as the legacy themes are different than the Copenhagen ones, and I can't select legacy ones to test against anymore so it's harder to replicate something close to your environment. I would recommend you consider migrating to Copenhagen, if resources permit. 

    It would help if you had visual examples of what you're trying to accomplish, a few screenshots or links to pages in question (if they're public) really do help.

    What is the current problem that you're facing now? I'm not clear what the challenge you're experiencing is.

     

     

    0
  • Nikolay Petrov
    Ações de comentário Permalink

    Thank you Nicole and Hello Dan, thank you for your time.

    Currently I got the accordion to auto expand and to list all sections in there on page load. 

    Sections: Announcement, Account Management.. etc

    My goal, ultimately it would be to have the sections that contain articles to auto expand on page load similar to the whole accordion and to look like this:

    note: the other sections (Domain, Email and VPS are currently empty)

    If possible, as addition if the section is empty, maybe instead of empty space, to show an alternative text something like: "All services operational", but that's another idea I will be dealing off. 

    JS currently in use:

    $(document).ready(function(){

    $('.section-tree-with-article .section h2').click(function(e){
    e.preventDefault();
    $(this).next('.article-list').slideToggle(250);
    });

    $('.section-tree-with-article .article-list a').click(function(e){
    $(this).next('.article-body').slideToggle(250);
    });

    var link = $('.section-tree-with-article ul > li > a, .category-tree-with-article ul > li > a');
    link.click(function(e){
    e.stopPropagation();
    window.location.href = $(this).attr('href');
    });

    });

    I understand, that this theme may be becoming a relic, but we have based 4-5 help centers on it and with each we have done some sort of customization that someday we will have to deal with if switching to Copenhagen.

    Thank you once again for the time and hopefully I was able to explain it a bit better :) Unfortunately, the whole Help Center is still not made public.

    0
  • Nikolay Petrov
    Ações de comentário Permalink

    Hey @Dan, 

    I was actually able to resolve this by updating the css display:none, to block in the following element >

    .section-tree-with-article article.article-body {display: none; padding-left: 25px; color: #337ab7;}
    .section-tree-with-article article.article-body {display: block; padding-left: 25px; color: #337ab7;}

    Now that this is done, does anyone know a way (maybe html or js) on:

    1. How to set a trigger for example: if there is an article that contains the word "ongoing" in the title the parent section to auto expand (meaning changing the display:none to block for that section ?

    2. How to implement if a section is empty, a text to be displayed under the parent empty Section? For example if Email Hosting section is empty (there are no articles) display - All services are operational.

    Cheers,

    0
  • Brett - Community Manager
    Ações de comentário Permalink

    Hi Nikolay,

    I noticed you haven't got a response so I wanted to follow-up with a couple Help Center articles which I believe you'll find useful:

    Hope this helps!

     

    0

Por favor, entrar para comentar.

Desenvolvido por Zendesk