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.

Changing display of forum boards in a category
-
- WSC 3.1.x
- kbarg
-
-
Use flexbox, that's what I used in my premium style. Basically, something like:
Code
Display More@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; } }
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.
-
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?
-
Please take a look on the updated code above.
-
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
-
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
-
Participate now!
Don’t have an account yet? Register yourself now and be a part of our community!