Homepage Categories & Subcategories Setup

Hello,

I have a question regarding discourse categories setup. Currently, our homepage categories and subcategories setup has them below the image (image is above the subcategories). We are trying to put the subcategories to the right of the image (see attached). Can you help us get it set up like this?

Here’s a link to the forum: https://fellowshipforums.discoursehosting.net/

Thanks!

Hi there,
Can you post a pic of what you currently see? Your forum is set to login required so we can’t see your current setup.

2 Likes

Current Setup:

Do you have any thoughts? The forum is now open if you’d like to take a look…

You’ll be able to achieve it using custom CSS but that’s not my area of expertise.

This might be close

td.category > div:first-of-type {
    float: left;
    width: 50%;
}

td.category div.subcategories {
    float: right;
    width: 50%;
}

td.category .category-description {
    clear: both;
}

Screenshot:

4 Likes

Thank you! This worked. I have a couple more follow up questions.

  1. How can I have it only show one bullet point per line…for example, under coach’s corner, i would like each of pre exam day, exam day, and post exam day to be on three separate lines.

  2. How can I have the subcategory expand so that it is not being cut off for longer sub categories like in the syllabus material section?

  3. Any way to have the bullet boxes be the exact same size/dimension…appears the size is not consistent in the syllabus material section?

Thank you so much for your help!

When there’s a limited amount of screen real estate and there isn’t enough room for everything to fit, something has to go or get obnoxious. In this case it’s the longer topic titles pushing the bullets. To keep the bullets all the same size, the choice would be to have the topic titles truncate at a shorter length or overflow their container.

1 Like
td.category div.subcategories span.subcategory {
    display: block;
}

I don’t see it cutting off, primarily because I think you renamed it. I’d have to see it with the full name again to see if that is even something that can be controlled by CSS alone or not.

I’m not following, it looks identical to me.

2 Likes

Thanks. I changed the last two items (as you’ve noticed).

Thoughts on how to make the “1 new” indicator appears only on the right of the subcategories and not underneath it? Or is this just a matter on the text being to long and I should shorten it?

57%20PM

You can try playing with the width:50% on the CSS, maybe 45% / 55%?

Such as:

td.category > div:first-of-type {
    float: left;
    width: 45%;
}

td.category div.subcategories {
    float: right;
    width: 55%;
}
1 Like

Hi, other than making a category private, can I hide/show certain categories on my homepage?

Looks like this has been done on our community, though I can’t figure out how it was implemented.

It’s possible someone hid them with CSS. This is not a secure method at all, but it would make them less discoverable I suppose. I would check your site’s themes for any CSS that targets the categories.

For reference, this is the proper way to control access to categories: How to use category security settings to control access to content.

4 Likes

Thanks for the response, in fact I realised that the ‘Suppress category from latest topics’ checkbox was ticked in the categories Settings, so I un-ticked that and we’re all good.

2 Likes