Show categories vertically in Persona

alejandrocobo

Hi,

Today I have updated nodebb to the last 1.12.2 version. With the update I have lost some of the CSS changes I made. There is one I am unable to restore with the new version of Persona Theme. Before the update, the categories were shown in the frontpage vertically instead of the dafault set up:

This is more an issue of me not knowing that much of CSS. Could anyone help me with this?

Thanks!

oplik0

.category-children-item {
  display: flex;
  float: none !important;
}

seems to do the trick.

EDIT:
after looking a bit at the topic @crazycells linked and looking at this for a few more minutes I think the better solution would be:

.categories .category-children {
  display: flex;
  flex-direction: column;
}

It doesn't affect how it works, but not using !important is the improvement here

Oh, and if you want some distance between the items just add margin-top or margin-bottom to .categories .category-children-item.

crazycells

a related topic you can get some info:

Persona Theme - Subcategory view on main page

Hi, I have two things to ask... is there any setting or CSS suggestions to make these subcategories (red box below) look tidier? such as more tidy look with...

NodeBB Community (community.nodebb.org)

alejandrocobo

@oplik0 said in Show categories vertically in Persona:

.categories .category-children {
display: flex;
flex-direction: column;
}

Both of them worked fine.

Thank you very much, guys!