I’ve been learning how to theme and work with themes for the past few weeks, since twe are in that part of the migration, or rather are ready to almost exclusively focus on just that.
I’ve done some amazing and cool things with theme components, but I’m trying to figure something out that has stumped me all evening.
On mobile, how do I move the subcategories list shown in the categories page (we use categories with featured topics as our default) to above the topics list and below the category title.
There are two ways to go about this, if you have to change the order of the HTML itself… then there’s no choice but to override the template. This isn’t the best for long-term maintainability because if we change something the template relies on, this could break your customization.
The other way would be with CSS, which should be easier to maintain. I haven’t tested this thoroughly so you’d want to keep an eye out for side-effects… but this can reorder things in the way you’re looking for:
.mobile-view .category-list {
tbody {
display: flex;
flex-direction: column
}
.subcategories-list {
order: -1
}
tr:first-child { // this is category title section
order: -1
}
}
This converts the table layout to use flexbox, which allows sibling elements to be reordered with order.
This is where we are at so far. (Currently using Graceful as a base template for our all of our edits to attempt to bring it somewhat close to what users are used to). Using your fix, I was quickly able to also change the order of where category descriptions showed up once I saw what your code above did.
