Changing display of forum boards in a category

kbarg · Mar 10th 2019

I have seen a couple of Woltlab custom skins, and some cool Xenforo skins that implemented something like this. Basically what I would like to do is display my forums all in one or two lines, side by side. The best example I saw was on Xecuter's website (yes I know its on Xenforo) but I want to do it here. I have included a screenshot of their forum. If anyone has an idea of how I could implement this.

Ramiru · Mar 11th 2019

Use flexbox, that's what I used in my premium style. Basically, something like:

Code

@include screen-md-up {
    .wbbCategory > ul {
        display: flex;
        flex-wrap: wrap;
    }
    .wbbBoardContainer {
        flex: 0 1 50%;
    }
    .wbbBoardList .wbbBoard {
        flex-wrap: wrap;
    }
    .wbbBoardList .wbbCategory .wbbDepth2.wbbBoardContainer > .wbbBoard > .icon {
        flex: 0 1 32px; /* change 32px to define the width of the icon container */
        margin: 0;
    }
    .wbbBoardList .wbbBoardMain {
        flex: 0 1 calc(100% - 112px); /* change 112px to the sum of the icon (32px) + stats size below (80px) */
        margin: 0;
        padding: 0 0 0 10px;
    }
    .wbbBoardList .wbbBoardDescription {
        display: none; /* hide description */
    }
    .wbbBoardList .wbbStats {
        flex: 0 1 80px; /* change 80px to define the width of the stats */
        margin: 0;
    }
    .wbbBoardList .wbbStats + .wbbLastPost {
        flex: 1 1 auto;
        margin: 0;
    }
}

Display More

will produce two columns. And then you have to adjust where the other elements such as the last post will appear so that it will look comfortable.

kbarg · Mar 11th 2019

Ok, I added that and it looks great.

But I was curious how do i display the last post at the bottom of each flex box?

Or the board description? OR to remove the board description entirely from the BoardIndex?

Ramiru · Mar 11th 2019

Please take a look on the updated code above.

kbarg · Mar 11th 2019

When i get home from work I will try this out.

Thank you for your help.

I had one additional question. Is there a way via css to disable displaying subforums and forum descriptions per theme? I know I can disable collapsible categories via css.

I want some themes to still display the stuff

Ramiru · Mar 11th 2019

Yes, there are ways you can hide elements via CSS such as:

display: none;
visibility: hidden;
opacity: 0;
position: absolute;

but you may want to search and read: https://www.google.com/search?q=seo+friendly+css+hiding

kbarg · Mar 12th 2019

Ramiru you are an amazing person. Kudos to you!! Thank you for your help.

Changing display of forum boards in a category

Participate now!

Share