This theme component provides a number of enhancements for the Discourse category header.
The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the… category’ topic.
This theme component provides the following enhancements
The category header is now shown by default for all categories. It now includes the name of the category in addition to the logo (if set) and the category description. It can also now include a logo background image and can be styled to show as either a ‘box’ or a ‘banner’, using the category color settings . There are a wide range of configurable options in the theme settings.
Theme settings
- show category name: Show the category name in the header
- show category description: Show the category description text (the first paragraph of the “About this category” topic)
- description text size: Size of text within the category description
- text align: Alignment of the text within the category header
- show subcategory header: Show header for subcategories
- show parent category name: Prefix the parent category name on the subcategory headers (this acts as a breadcrumb link to the parent category page)
- show lock icon: Show the lock icon on categories protected by permissions
- show category logo: Show the category logo image within the header
- show parent category logo: Show the parent category logo when a subcategory logo is not set
- show site logo: Show the small site logo if a category logo is not set
-
position logo: Position of the logo within the box
– ‘left’ and ‘right’ display the logo inline with the text.
– ‘top’ displays the logo above aligned with the text -
size logo: Position of the logo within the header.
– Small is 50px high similar to a subcategory box logo.
– Standard is 150px high.
– Original is the size of the image uploaded -
header style: Set the header style to either:
– Box: the category header is displayed in the same style as the standard Discourse boxes
– Banner: set the header background to the category background color and text to the foreground color
– None: no border or background styling -
header background image: Applies if you have uploaded a category background image
– ‘contain’, ‘cover’ and ‘resize’ display the background within the header.
– ‘outside’ is the Discourse default displaying it outside the header, over the whole page. - show mobile: Show category header on mobile devices
- force mobile alignment: Force mobile alignment of logo-text to the top-centre of the header
- hide if no category description: Hide header if category description is not set
- hide category exceptions: Headers will not show for these categories
Install the theme component
Git repo: https://github.com/naidihr/discourse-category-headers
How do I install a Theme or Theme Component?
Credits
Thanks to @Johani for his excellent Developer’s guide to Discourse Themes
This theme component was inspired by other themes notably the Discourse Category Banners theme by @awesomerobot
Examples
Box style: The category header is displayed in the same style as the subcategory boxes
Subcategory, note the subcategory doesn’t have a logo but is set to inherit the parent category logo. The parent category name is also set to show as a breadcrumb link.
If the subcategory has it’s own logo it will display it instead.
Mobile view showing a different text and icon alignment.
Text size settings.
Alignment options example center text, logo right.
Banner style: Uses the category background and foreground colors
Background image: Uses the category background image
I was missing the following under Settings:
. Thanks for posting the answer too - I suspect it will be useful for others too. I hope the theme component works well for you.
