How to hide category names and move the description?

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:
http://i.imgur.com/vKM4neu.png

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

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

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.

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

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 :\

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

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!