Customizing Category page

18 댓글

  • Pulkit Pandey
    Community Moderator

    Hi Victoria Campagna

    Here are the answers to your question 

    1. To remove the category description add the below CSS at the bottom of your style.css

    .page-header-description {
      display:none;
    }

    2. You have to create the subsections under the target category, or can you please let me know which theme you are using because for support subsection you have to update the code if your theme does not have a subsection code

    3. To add a bullet list on the articles list and modify the gap between the articles add the following CSS at the bottom of your style.css file

    .section-tree .article-list {
    list-style: disc;
    }

    .section-tree .article-list .article-list-item {
    padding-bottom:0px;
    padding-top:10px;
    }

    Let me know if it solves your issue

    Thanks 

    Pulkit

    Team Diziana

    0
  • Victoria Campagna

    Hi Pulkit,

    Thank you for your help!  I implemented 1 and 3 above and the category page looks so much better :) 

    For #2, I do have subsections under the target category.  I am using the Copenhagen theme.  Do you know what I would have to update to show the subsections?

    Thanks again,
    Victoria

    0
  • Pulkit Pandey
    Community Moderator

    Hi Victoria Campagna

    Happy to hear that it works for you :)

    For #2 Can you please share the category template Code so that I can look at that your template has Code that helps the Subsection to display

    Thanks 

    Pulkit

    0
  • Victoria Campagna

    Hi Pulkit,

    Sure, please see below:

    <div class="container-divider"></div>
    <div class="container">
    <nav class="sub-nav">
    {{breadcrumbs}}
    <div class="search-container">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
    <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
    <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
    </svg>
    {{search scoped=settings.scoped_kb_search submit=false}}
    </div>
    </nav>

    <div class="category-container">
    <div class="category-content">
    <header class="page-header">
    <h1>{{category.name}}</h1>
    {{#if category.description}}
    <p class="page-header-description">{{category.description}}</p>
    {{/if}}
    </header>

    <div id="main-content" class="section-tree">
    {{#each sections}}
    <section class="section">
    <h2 class="section-tree-title">
    <a href="{{url}}">{{name}}</a>
    </h2>
    {{#if articles}}
    <ul class="article-list">
    {{#each articles}}
    <li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
    {{#if promoted}}
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">
    <path fill="currentColor" d="M2.88 11.73c-.19 0-.39-.06-.55-.18a.938.938 0 01-.37-1.01l.8-3L.35 5.57a.938.938 0 01-.3-1.03c.12-.37.45-.63.85-.65L4 3.73 5.12.83c.14-.37.49-.61.88-.61s.74.24.88.6L8 3.73l3.11.17a.946.946 0 01.55 1.68L9.24 7.53l.8 3a.95.95 0 01-1.43 1.04L6 9.88l-2.61 1.69c-.16.1-.34.16-.51.16z"/>
    </svg>
    {{/if}}
    <a href="{{url}}" class="article-list-link">{{title}}</a>
    {{#if internal}}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
    <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
    <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
    </svg>
    {{/if}}
    </li>
    {{/each}}
    </ul>
    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{/if}}
    </section>
    {{else}}
    <i class="category-empty">
    <a href="{{category.url}}">{{t 'empty'}}</a>
    </i>
    {{/each}}
    </div>
    </div>
    </div>
    </div>

    0
  • Pulkit Pandey
    Community Moderator

    Thanks I will look at that 

    0
  • Pulkit Pandey
    Community Moderator

    Hi Victoria Campagna

    Please update the below code with your existing one

    <div class="container-divider"></div>
    <div class="container">
    <nav class="sub-nav">
    {{breadcrumbs}}
    <div class="search-container">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
    <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
    <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
    </svg>
    {{search scoped=settings.scoped_kb_search submit=false}}
    </div>
    </nav>

    <div class="category-container">
    <div class="category-content">
    <header class="page-header">
    <h1>{{category.name}}</h1>
    {{#if category.description}}
    <p class="page-header-description">{{category.description}}</p>
    {{/if}}
    </header>

    <div id="main-content" class="section-tree">
    {{#each sections}}
    <section class="section">
    <h2 class="section-tree-title">
    <a href="{{url}}">{{name}}</a>
    </h2>
    {{#if sections}}
    <ul class="section-list">
    {{#each sections}}
    <li class="section-list-item"><a href="{{url}}">{{name}}</a></li>
    {{/each}}
    </ul>
    {{/if}}
    {{#if articles}}
    <ul class="article-list">
    {{#each articles}}
    <li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
    {{#if promoted}}
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">
    <path fill="currentColor" d="M2.88 11.73c-.19 0-.39-.06-.55-.18a.938.938 0 01-.37-1.01l.8-3L.35 5.57a.938.938 0 01-.3-1.03c.12-.37.45-.63.85-.65L4 3.73 5.12.83c.14-.37.49-.61.88-.61s.74.24.88.6L8 3.73l3.11.17a.946.946 0 01.55 1.68L9.24 7.53l.8 3a.95.95 0 01-1.43 1.04L6 9.88l-2.61 1.69c-.16.1-.34.16-.51.16z"/>
    </svg>
    {{/if}}
    <a href="{{url}}" class="article-list-link">{{title}}</a>
    {{#if internal}}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
    <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
    <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
    </svg>
    {{/if}}
    </li>
    {{/each}}
    </ul>

    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{/if}}
    </section>
    {{else}}
    <i class="category-empty">
    <a href="{{category.url}}">{{t 'empty'}}</a>
    </i>
    {{/each}}
    </div>
    </div>
    </div>
    </div>

    Let me know if it solves your issue

    Thanks 

    Pulkit

    0
  • Victoria Campagna

    Hi Pulkit,

    Thanks!  That worked : )

    Is there a way to get it to look similar to the other sections?  They don't necessarily need bullets, but maybe no lines and some sort of right arrow or this symbol ">"?

    Thanks again,
    Victoria

    0
  • Pulkit Pandey
    Community Moderator

    Hi Victoria Campagna

    Please add the following given CSS at the bottom of your style.css file 

    .section-tree .section-list {
    margin:0px
    }
    .section-tree .section-list .section-list-item {
    border:none;
    margin:0;
    padding: 10px 0;
    }

    .section-tree .section-list .section-list-item a:after {
    content: '>';
    font-size: 20px;
    }

    Let me know if it solves your issue

    Thanks

    Pulkit

    0
  • Victoria Campagna

    Hi Pulkit,

    Thank you, you have been such a huge help!  One last question, I promise :)  Is there a way to move the arrows to the left?  See image:

    Thanks,
    Victoria

    0
  • Pulkit Pandey
    Community Moderator

    Hi Victoria Campagna

    It's my pleasure to help you ;) don't worry you can come up with your question where ever you need my help

    Do you need something like that to see the attached image?

     

    Thanks 

    Pulkit

    0
  • Victoria Campagna

    Hi Pulkit,

    I appreciate it : )
    For the arrows, something like one of the following:

     

    Or, if that is not possible, then like this:

    Thanks,
    Victoria

    0
  • Pulkit Pandey
    Community Moderator

    Okay, I will come up with the solution :)

    0
  • Pulkit Pandey
    Community Moderator

    Hi Victoria Campagna

    Please add the below code at the bottom of your style.css file

    .section-tree .section-list .section-list-item a {
    justify-content: unset;
    }

    .section-tree .section-list .section-list-item a:after {
    content: '>';
    font-size: 20px;
    margin-left: 5px;
    }

    Let me know if it solves your issue

    Thanks

    Pulkit

    0
  • Victoria Campagna

    Hi Pulkit,

    That's exactly what I wanted, thank you!  I might have lied when I said I only had one more question :*(

    If it's possible, can you help me with 2 more changes? 

    The first one is to make the space below the header slightly bigger. 

    The second one is to move the bullets over so that they line up with the headers.  In the image below, see the bullets below "Frequently Asked Questions" as an example.  Under "Recommended Reading" and "How-to Videos" is how they appear now.

    Thank you again,
    Victoria

    0
  • Pulkit Pandey
    Community Moderator

    Hi Victoria,
    Happy to hear that it solves your issue :)
    I will provide you the solution for your questions 😊

    Thanks
    Pulkit

    0
  • Pulkit Pandey
    Community Moderator

    Hi Victoria Campagna

    Please, add the following CSS at the bottom of your style.css

    Solution for your 1st question

    .category-content .page-header h1 {
    margin-bottom: 25px;
    }

    Solution for your 2nd question

    .section-tree .article-list {
    list-style: disc;
    list-style-position: inside;
    }

    Let me know it solves your issue 

    Thanks 

    Pulkit

    0
  • Victoria Campagna

    Hi Pulkit,

    Woohoo!  My Category page now looks perfect :)  You have been so incredibly helpful.  Thank you, thank you, thank you!

    -Victoria

    0
  • Pulkit Pandey
    Community Moderator

    Hi Victoria Campagna

    It's my pleasure to help you :)

    Ping me anytime if you need any futher help

    Thanks 

    Pulkit

    0

댓글을 남기려면 로그인하세요.

Zendesk 제공