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 -
10. März 2019 um 23:09
-
-
Use flexbox, that's what I used in my premium style. Basically, something like:
Code
Alles anzeigen@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
-
Ramiru you are an amazing person. Kudos to you!! Thank you for your help.
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!