Hi Brian! Are you asking if there is a video showing how to install theme components? There is not but there is a guide at Beginner's guide to using Discourse Themes which you might like to take a look at. We’re here to help in case you run into trouble!
Is there a way to do these installs in a sandboxed version, (I’m on your hosted plan) so that if things screw up it doesn’t affect a live site. Would like to test it our first and if all goes well then apply the fix to my live site.
Looking for instructions on how to switch back to the default (bullet) style. Where would I find those details?
There is nothing to install to switch back to the default bullet style.
Look for the category_style
admin setting and change it to “bullet”, so that it looks like this:
Here are the steps:
- go to
/admin
on your site - select SETTINGS from the menu
- search for “category style”
- select “category style” pulldown and select “bullet” (or select RESET to change it back to the default, which is bullet)
Once you’ve done the above, you will see the bullet style everywhere categories are displayed.
Perfect, thanks for those tips made the fix super simple
You’re welcome! I just added the step by step instructions to the first post above for the benefit of others.
I’ve just merged this update:
so if you update Discourse later today you’ll no longer have the category_style
site setting.
If you’d like the box/bar/none styles back you can install the Category Badge Styles theme component.
The Category Icons theme component has also been updated to support this change and will work with the Category Badge Styles component.
Why not just leave it? The bullet style is horrible for large sites that want to make it easy for people to quickly discern between topics. I worry that the theme component will not offer the same flexibility or over time be deprecated itself.
I don’t think there is an issue mixing bullet and other styles, in fact I think it helps prevent the forum looking clinical/lacklustre:
Hi,
testing 3.2.0.beta4-dev [04a58a6e64]
Whenever I create a new category and assign a specific color to it, the color doesn’t seem to be applied to the bullet point as intended. Instead, the bullet remains white, regardless of the color choose.
Is this related to lastest changes ?
While looking into this, we found that 87% of the sites we host use the default style.
It’s certainly hard to remove settings, but if we continue to accumulate settings Discourse will become more and more difficult to configure as time carries on. Utilizing themes for a purely visual change like this seems like a reasonable middle-ground.
In the process of removing the alternative category badge styles, we also made them more flexible to change via theme. The category colors are now available within the badge’s CSS, rather than applied inline to a specific element. Previously selecting a different style would alter the badge’s HTML, but now it’s entirely handled by CSS.
We don’t have any plans to deprecate the theme component, and there are less popular theme components that we’ve been supporting for years now… so while it’s hard to guarantee anything about the future, hopefully that provides at least a little peace of mind.
Yes, it appears to be. This is something we’ll look into fixing. The new category badges have CSS generated using JS, and because the category doesn’t yet exist at this point… we’ll need a different approach for previewing the color while creating it. Thanks for letting us know.
This will be fixed the next time you update:
Just to let you know that this has been a regression on my forum.
I installed the theme component like asked, but the DOM of the “box” is probably not the same as my CSS got completely broken:
Before:
After:
I would have loved for this transition to go smoothly - specially as you made the effort to provide a theme component
Yeah, this turned out to be trickier than we originally expected. Did you end up getting things sorted out? If not, we can try to hash it out here or you can reach out to our support team directly.
We did have to work on our custom CSS - it’s done now thanks
@awesomerobot I think there’s been a regression. I updated today and this is what I see now:
Wide screen:
Narrow screen:
Before:
Thanks for reporting it! this update should fix it: UX: update category badge variable to match core by awesomerobot · Pull Request #3 · discourse/discourse-category-badge-styles · GitHub
Thanks for the quick fix, @awesomerobot!
I also noticed a small regression in .subcategories .badge-category
in the main page.
The padding is currently set to var(--badge-category-padding-v) var(--badge-category-padding-h)
inside .badge-category__wrapper .badge-category
, but that affects .subcategories .badge-category
which previously didn’t have any vertical padding.
Before:
Now:
I’ve just added some more adjustments for this: UX: spacing and alignment adjustments for box mode by awesomerobot · Pull Request #4 · discourse/discourse-category-badge-styles · GitHub
Thanks, that works much better.
I don’t know if it’s as a result of the latest change, but on categories with subcategories, “all” and “none” now lack left padding:
Also, When editing an existing topics’s title, this also happens with “tags (optional)” and the parent category seems misaligned:
I’m also, I don’t know if it’s intentional, but I’m seeing inconsistent font sizes/vertical padding depending on the context (front page, editing an existing topic, editing just the title, changing the current category, scrolling through the list of existing categories).
These are all I could capture in one screenshot (all 3 windows have the same zoom level):