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

  1. Is there a way to remove the Category description?  In the attached image this is "Administration and managment"
  2. How can I display the subsections?  In the attached image, you will see the "Using Nastel Navigator" section is empty.
  3. 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

ok, no problem, thanks. Is there a way to have the articles in two columns, rather than one list please Pulkit Pandey

0


Pulkit Pandey I can see in this example Using Slack | Slack there are more than 6 articles showing in the Channels section

 

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Oliver Mottram

You need to use the API to list all the articles of the Sections 

 

Thank You 

Pulkit

0


ok thanks Pulkit Pandey is there any way to get the categories in the hero section on the category and section pages as shown here Using Slack | Slack

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Oliver Mottram

You need to create it using the Zendesk API, which require custom development on your theme 

 

Thanks

Pulkit

0


Hi Pulkit Pandey and whoever may read this, I've found this article which gets fairly close to how to achieve this....

0


Hello all,

Wondering if there are any tips on how to edit the CSS or the category_page.hbs to remove this indentation?

 

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Beth

Please add the below CSS at the bottom of your style.css file. Are you using a custom theme or the Zendesk Default theme Copenhagen?

.category-content .section-tree .section .article-list { 

margin-left: 0;

}
 

Please let me know if it solves your issue

 

Thanks

Pulkit

Team Diziana









 

0


Hi Pulkit Pandey ! We have a custom theme, but I have updated it to show sub-sections based on the latest Copenhagen code and from the help you have provided others in this thread (thank you so much). However I'm not a web developer and am outside my area of expertise. 

 

I added the code you recommended but it didn't work. You can see how I have customized the CSS below:

 

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Beth

I am glad to hear that the previous solutions worked for you. Please add the CSS below to your style.css file, making sure to add it after line 5856 as per your screenshot.

 

.category-content .section-tree .section-tree-title {

     margin-left: 0px!important;

}

 

Please let me know if it solves your issue.

 

Thanks

Pulkit

Team Diziana

0


I used below but it didn't work - didn't add bullets to tge article list..Ideas?

 

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

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

0


Also any ideas how  to list the articles into 2 columns instead of a long list?

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Joane Bonghanoy,

Are you using the Default Copenhagen Theme, or can you share the live URL of your help center so that I can review it and provide a better solution for your query?

 

Thank You

Pulkit

Team Diziana

0


Yes Default Copenhagen Theme. 

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Joane Bonghanoy,

Please add the below CSS at the bottom of your style.css file and it will bullets to the list of articles 

.section-tree .article-list {

   list-style-type: disc;

  list-style-position: inside;

}

 

 

Thank You 

Pulkit

Team Diziana

0


Yes that is what I added but it didn't bullet the positioning of the articles, per my original post

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Joane Bonghanoy

Can you please share the screenshot of how you added the code that I have provided for adding bullets to the articles 

 

Thank You

Pulkit

Team Diziana

0


image avatar

Brett Bowser

Zendesk Community Manager

Joane Bonghanoy it doesn't look like your screenshot attached to this thread. Can you try uploading it again?

0


Brett Bowser all good ta, I know what I did wrong there. Managed to get it working now

 

Although I have a different question? How can I arrange the article into 2 columns? bullets + arranged into 2 columns inside a border?

 

 

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Joane Bonghanoy

 

Do you want articles on the category page to be in 2 columns ?

 

Thank You 

Pulkit 

Team Diziana

0


Pulkit Pandey articles in our sub-sections to be in 2 columns 

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Joane Bonghanoy,  Is it possible to share the URL of  your help center where these subsection are listed so that I will share the exact solution for that 

 

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Joane Bonghanoy

 

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

 

.section-content .article-list {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  list-style-type: disc;

  list-style-position: inside;

}


 

.section-content .article-list .article-list-item {

   flex: 1 0 320px;

}

 

 

 

Let me know if it solves your issue 

 

 

Thank You 

Pulkit

Team Diziana

 

0


Pulkit Pandey thanks so much! that worked. 

 

One last ffup Q promise! If I want to use an icon instead of the normal bullet icon, how do I go about that? is that possible?

 

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Joane Bonghanoy,  do you want to use font icons (i.e Font Awesome) or want add image?

0


Pulkit Pandey an image, one of our branded image

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Joane Bonghanoy,

 

Sorry for the late reply :)

 

First, upload your branded image to an assets folder and then copy the image URL, as shown in the attached screenshot.

 

Now replace the copied image URL with the YOUR IMAGE URL GOES HERE in the code below

 

.section-tree .article-list .article-list-item {
 position: relative;
}

.section-tree .article-list .article-list-item a {
 margin-left: 40px;
}

.section-tree .article-list .article-list-item:before {
  content: '';
 background: url("YOUR IMAGE URL GOES HERE");
  height: 30px;
   display: inline-block;
   width: 40px;
   position: absolute;
   left: -4px;
   right: auto;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   top: 13px;
 
}

 

 

Let me know if it solves your issue 

 

 

Thank You

Pulkit

Team Diziana

 

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post