Homepage Categories & Subcategories Setup


(Fellowship Forums) #1

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!


#2

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.


(Fellowship Forums) #3

Current Setup:


(Fellowship Forums) #4

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


#5

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


(cpradio) #8

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:


(Fellowship Forums) #9

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!


(Mittineague) #10

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.


(cpradio) #11
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.


(Fellowship Forums) #12

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


(Fellowship Forums) #13

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


(cpradio) #14

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%;
}