How to hide category names and move the description?

support
1

I’ve got Discourse set up, but I’m pretty new to this platform and am having some trouble figuring out how to situate the categories how I want them. I’m wanting to go for a look like the Gearbox forums. http://forums.gearboxsoftware.com/ Here’s an image in case no one wants to click the link:
Imgur: The magic of the Internet

I’ve got categories displaying on the front page in the order I want, and I know how to set up the images, but I just can’t figure out how to remove the category titles and move the category descriptions in it’s place. Could anyone point me in the right direction?

I did find this topic here, about someone complaining about the titles disappearing when using images but that functionality was removed.

1 Like
2

You should probably fill out the category descriptions… It’s the topic that a button in the category edit dialog takes you to.

1 Like
3

I already have category descriptions… either you misunderstood me or I’m missing something really simple related to category descriptions.

I made an image to show what I’m talking about.


The top image is what it currently looks like on my site. The bottom image is what I want, which is just like how the Gearbox forums have their categories set up.

4

Have you tried CSS? eg.

.category-name { 
  display: none;
}

*test, I don’t know where else that class might be being used so you may need a more specific selector

2 Likes
5

With

span.category-name {
    display: none;
}

It looks like this:

How would I move the description up to where the category title was? I could use JS to copy the description, hide the description and then paste it into the ‘span.category-name’ but I don’t think that’s the proper way to go about this :\

6

Ok, this took me way too long, but I figured it out. For anyone else that wants a similar setup I’m going to lay it out here. It’s really simple too.

Gearbox uses this:

.has-logo div:first-child {
    float:left;
}

.has-logo h3 a {
    font-size: 0;
}

.has-logo .category-description {
    float: left;
    width: 250px;
}
7 Likes
7

This has really helped me! The solution has worked, however, I don’t want this rule to apply to subcategories. I can’t seem to fathom the rule I need to allow these changes to take effect to the main categories but for them to ignore the subs.

Is there a solution to this?

Thank in advance!