What could I add in a custom CSS to reduce the line space between the Category and the Description text?
1 Like
div[class^="category-title-header"] .category-title-contents .category-title {
margin-bottom: 0;
}
2 Likes
Perfect! thankyou for that 
2 Likes
Would it be an idea to make these banners clickable? Because now the banner only includes the first line of the “About” topic of a category. Often there is more information in such an “About” topic. By making them clickable it becomes easier to learn more than just that first line. Of course people can create links to the “About” topic as well. But while being in that topic already, you then have a link to itself. That looks like an ugly hack. Just a suggestion 
2 Likes
I’m using the Category Banners theme and love how desktop users can see both the categories and the latest topics across all of the categories that they’re a part of. It’s a great way to see what’s going on at a glance. I wish the mobile view had similar. Ours only shows the categories. I’d really love it to show the latest 10 topics also. Ideally it would show those on top of the categories as that’s most likely why they’re there.
Is there any good way to accomplish this? I’m concerned that even if I could figure out how to adjust the out that way, the next update would come along and wipe it all out.
Thanks again for a great theme.
2 Likes
This is a bit out of scope for this topic, which just covers the category banner theme component.
I think you’re referencing the /categories page on mobile, which doesn’t have the same variety of template options as desktop. Personally, I’d like to get all of our /categories page options available on mobile in one way or another, but that’s not a priority at the moment.
In the meantime it is possible to make changes to that component in a theme (various techniques are covered in Developer’s guide to Discourse Themes). Discourse updates might require themes to undergo some maintenance, but they shouldn’t wipe everything out completely.
1 Like
I’m referring to the home page on a mobile view. It doesn’t show the latest posts like it does on a desktop. My preference would be to have it show the latest 10-20 posts and then show the categories beneath it. Currently it just shows the categories.
2 Likes
I’ve just made an update to this component that makes it integrate with Tag Banners
When both components are installed and you’re filtered to a category and a tag, rather than stacking the banners, now the tag name will be shown within the category banner:
8 Likes
Thanks Kris, another great integration!
Few issues though:
- it’s not working for me in mobile view (even on desktop browser—no web console errors)
- category banner displays properly in both desktop and mobile view, but tag banner only displays in desktop view
- when also using with Tag icons component
- tags have generic tag icon and the icon defined by Tag icons (it would be better if only Tag icons defined icon was displayed in such cases)
- when icon defined by Tag icons is the same color as Category banner the icon is rendered invisible (similar problem as Category banners + Category icons integration—if possible please allow the Tag icon to match the banner text color for this combo too)
- Remove hyphens / underscores from Tag banners completely hides the icon defined in Tag icons
2 Likes
Thanks for the quick feedback!
I’ve added a fix for the tag not appearing in mobile view:
I’ve also added a setting to disable the tag icon for now, which is a temporary solution for working better with the tag icons component. I’ll have to spend a little more time getting a proper integration with the tag icons component working.
3 Likes
Thanks for a quick workaround, meanwhile I’ve got another one for you 
:
when using Category banners together with Tag banners with Remove hyphens / underscores set to true, the tag name (eg. with-hyphens is displayed without hyphens under the title and hyperlinked but the link is invalid (/tag/with hyphens) and results in 404.
2 Likes
Oh another good one, thanks again!
This fix relies on a minor Discourse update: DEV: add optional `displayName` parameter for `discourse-tag` by awesomerobot · Pull Request #21391 · discourse/discourse · GitHub
So once Discourse and the component are updated, tags without hyphens or underscores will be linked correctly.
2 Likes
A post was split to a new topic: Is it possible to make the category banner appear like the default subcategory banners?
I’ve successfully added banners to some of my categories but can’t add them to others.
The categories it doesn’t work for have names like “Weather - General”, i.e. Space-Hyphen-Space in the middle of the name. If I change the name to “Weather-General”, i.e. no spaces around the hyphen the banner is displayed as expected. In both cases the slug for the category is the same - “weather-general” so I’m not sure why that’s not accepted as a valid value in one case but is in the other.
1 Like
Hi.
Is it possible to align the banner in such a way so it would vertically be (always, whether sidebar on or off) in one line with – forgive a non-webdev’s lack of better/proper terminology – where the main content (not the sidebar) is, to the left, as oppose to the center as it is now, I think.
If it’s not possible or there is no straightforward way to do so - might I suggest to enhance this already neat tool that way? So that rest of us, of non-web people would be able to control that behaviour/parameter. Many thanks.
1 Like
May I suggest a quick mockup (even Paint® will do 
) so we can have a clearer idea of what you want to achieve?
Before making a mock-up — bare in mind that a not-webdev is making these suggestions — what is missing here, in my mind, is the sense that the banner actually belongs to the category (as oppose to top-bar / header as it is).
So, in both views, with left side-bar & without it, the category banner aligns to the left of the main bit (main-outlet element?) and “travels” with it when browser window is resized, that… would give browsees true sense of it being the part of, belonging to the category.
My second suggestion would be to “enhance” the category banner with setting option to disable, to not use category colour
Does that make sense?
Sorry, I do not understand this part. 
Until it is decided if such a feature would make sense, I paste a SCSS that will do this in case someone needs it:
.category-title-header {
background-color: transparent !important;
color: var(--primary) !important;
}
You are devel I presume - I said rubbish & there is no “<div id=“main-outlet”>” ? Inspect html source is all I can do.
Did try my best with the picture, sorry.
Or perhaps even better - ? - make it a part of that main-outlet, place it a the top, above “General | all tags | etc…”
Perhaps… as a dual-choice user option (as with colour), between ‘as-is-now’ & ‘inside that main-outlet element / align that way’. Thanks.