Recent searches
No recent searches
Customizing Category page
Answered
Posted Jul 12, 2021
Hello,
I apologize if these questions have been asked already, I was unable to find answers. I had the following questions about customizing the Category page (see attached image for reference).
- Is there a way to remove the Category description? In the attached image this is "Administration and managment"
- How can I display the subsections? In the attached image, you will see the "Using Nastel Navigator" section is empty.
- How can I display the articles as a bulleted list with less space between articles? So for example, under "Frequently Asked Questions," how can I have bullet displayed next to each article and how can I make the spacing between each article less?
Thank you in advance for any help offered : )
-Victoria
-1
58
58 comments
Pulkit Pandey
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
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
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
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
Thanks I will look at that
0
Pulkit Pandey
Hi Victoria Campagna
Please update the below code with your existing one
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
Hi Victoria Campagna
Please add the following given CSS at the bottom of your style.css file
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
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
Okay, I will come up with the solution :)
0
Pulkit Pandey
Hi Victoria Campagna
Please add the below code at the bottom of your style.css file
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
Hi Victoria,
Happy to hear that it solves your issue :)
I will provide you the solution for your questions 😊
Thanks
Pulkit
0
Pulkit Pandey
Hi Victoria Campagna
Please, add the following CSS at the bottom of your style.css
Solution for your 1st question
Solution for your 2nd question
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
Hi Victoria Campagna
It's my pleasure to help you :)
Ping me anytime if you need any futher help
Thanks
Pulkit
0
Oliver Mottram
Pulkit Pandey Hi, how can I use bullet points for articles in my section page please?
0
Pulkit Pandey
Hi Oliver Mottram
Please, add the below CSS at the bottom of your style.css file
Let me know if it solves your issue
Thanks
Pulkit
Team Diziana
0
Oliver Mottram
thanks Pulkit Pandey that's amazing! Thanks so much for your help. I was wondering if you could help with a couple of other things if possible please.
1. We'd like to separate the sections in the category page, similar to how comments are separated in this thread.
2. We'd like to add in category dropdowns at the top of category and section pages to allow the user to navigate to other categories easily, similar to the image below
0
Oliver Mottram
Hi Pulkit Pandey is there any way to add line breaks between sections please?
0
Pulkit Pandey
Hi Oliver Mottram
Can you please share the screenshot of what you need to be done, I am not getting it
Thanks
Pulkit
0
Oliver Mottram
0
Oliver Mottram
like that Pulkit Pandey and I'd also like to have the articles showing side by side, rather than a list if possible please
0
Pulkit Pandey
Hi Oliver Mottram
Please add the below CSS at the bottom of your style.css file, It will break the section into new line
Let me know if it solves your issue
Thanks
Pulkit
Team Diziana
0
Oliver Mottram
Hi Pulkit Pandey, not quite, we would like to show the lines as shown in the screenshot to separate the sections, similar to how comments are separated in this thread
0
Pulkit Pandey
Hi
Please add the below CSS at the bottom of your style.css
Let me know if it solves your issue
Thanks
Pulkit
Team Diziana
0
Oliver Mottram
great, thanks Pulkit Pandey the sections are now separated. However, only 6 articles are showing, then it shows 'See all X articles', is there any way to show all articles and have them showing in 2 columns rather than 1 long list, like shown in the screenshot I sent please?
0
Pulkit Pandey
Hi Oliver Mottram
Its not possible to show all articles under the sections
Thanks
Pulkit
0