Toolbar under site header per category

[Heliosurge (Dan DeMontmorency)]

https://meta.discourse.org/t/welcome-link-banner/218743/28

Hi I was wondering if you might have seen my feature request?

https://meta.discourse.org/t/welcome-link-banner/218743/73?u=heliosurge

Or Alternatively a theme-component that would allow one to ‘dock’ a toolbar under the main site bar when viewing a specific category? As that is what I am looking for more specifically. This could be something like Joe’s custom header links for example.

Guidance even adjusting an existing theme-conponent’s behaviour to accomplish this would be awesome.

I do apologize as I am still very much a novice learning as I go.

[Canapin (Coin-coin le Canapin)]

@Heliosurge

Or Alternatively a theme-component that would allow one to ‘dock’ a toolbar under the main site bar when viewing a specific category? As that is what I am looking for more specifically. This could be something like Joe’s custom header links for example.

Hi!

Could you be a bit more specific about your needs? What exactly do you want to put below Discourse’s header?

The standard way to put “anything” below the header is inside the After Header tab when you edit a theme or a component:

But it seems you’re thinking about something more dynamic and/or more complex.

The more info you provide, the more helpful the replies will be

[Heliosurge (Dan DeMontmorency)]

Thank you for the speedy response.

To be very clear & Specific something like Johani’s Custom Header Links(Icon) would be close to perfect.

That being said the purpose is to have ideally a toolbar With a clickable logo then a couple of maybe dropdowns.

For example the forum has a sponsor that owns Category A with 2 Sub caregories. When user’s are viewing Category A or it’s subs. A toolbar is anchored under site header. With links for that company.

ie store link, support, community links.

[Canapin (Coin-coin le Canapin)]

The custom header links is a pretty simple theme component and I think it would be a good start to use the same code base but to put the link list somewhere else.
That said, it doesn’t support submenus, which would be tricker to add.

Another approach would be to do a component without any settings, just using HTML, CSS (and maybe a bit of JS). So, it would be a pretty “static” customization and if you need to do any change, you’d have to edit the proper HTML and CSS code.

Here’s an example I made for my own forum:

And how it looks in the site customizations:

Would such a way suffice for your needs, or do you prefer something easier to edit from the admin side like the custom header links component with several inputs, like this?

[Heliosurge (Dan DeMontmorency)]

Something like the Custom header links might be easier until I get more xp. or matbe guidance to make a seperate component that say targets and overrides something like Johani’s custom header links component to change behavior to under header(may have option for this already) with overrides to use current parent category.

However if have 2 sponsors would need to know if can install component twice with renaming component and targetting component by name.

ie

1. (A) Custom header links
2. (B) Custom Header Links

Iirc there is a theme component that adds a sude bar based in category? but a side bar would not work as is inly desktop. so need top bar.

[Heliosurge (Dan DeMontmorency)]

I do know I can export than import from a zip to modify the code. But would need guudance on what to change if going this route. I am willing to try.

[Heliosurge (Dan DeMontmorency)]

Now ir might be easier as working on custom theme-component

to as you mentioned to simplify this by some simple after the header code that targets the category with showing simple links using a pic here and there for main links with say a community link going to a post or published page?

I again want to thank you for your time & sharing of knowledge.

[Canapin (Coin-coin le Canapin)]

Here’s a practical example I made for you:

Here’s the HTML I put in the After Header tab

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Here's some content only displayed on the <strong>General</strong> category</h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Here's some content only displayed on the <strong>Site Feedback</strong> category</h2>
</div>

Here’s the SCSS I put in the CSS tab (Discourse uses SCSS which extends CSS features):

$category_classes: "general", "site-feedback";

.below-header-banner {
    display: none;
}

@each $cat in $category_classes {
    body.category-#{$cat} {
        #category-#{$cat}-banner.below-header-banner {
            display: block;
        }
    }
}

Here’s the result. Each banner appears only in its respective category.

Hope that helps further!

[Heliosurge (Dan DeMontmorency)]

That is absolutely perfect! Thank you very much!

With this base code will it still display if in a subcategory of the parent? or do I need to add the Subcategories to the condition?

I should really copy & paste and get back to you. As you have been very kind with all the time you have shared helping me.

[Canapin (Coin-coin le Canapin)]

@Heliosurge

With this base code will it still display if in a subcategory of the parent? or do I need to add the Subcategories to the condition?

Subcategories have their very own class in the body tag.

For example, in https://meta.discourse.org/c/support/wordpress/21, wordpress is a subcategory of support.

The category class on <body> is: category-support-wordpress.

If you want the banner to be displayed in the subcategories as well as their parent, the SCSS code should be different. I can have a look tomorrow.

[Heliosurge (Dan DeMontmorency)]

Awesome! Thank you again for sharing the wealth of your knowledge & giving me a solid start.

You are definitely an asset to your team!

[Heliosurge (Dan DeMontmorency)]

My apologies for my inexperience. But can I lean on you one more time?

<div id="pimax-navbar">
 <span id="pimax-top-links">
 <ul class="pimax-nav-link-container">
   <li><b><a href="//pimax.com/pages/pitool/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=pitool_button" class="pimax-link">Pitool</a></b></li>
   <li><b><a href="//www.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=brandsite_button" class="pimax-link">Store</a></b></li>
   <li><b><a href="//support.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=support_button" class="pimax-link">Support</a></b></li>
</ul></span>
</div>

How do I combine this with your example? And get the links as well to span left to right? vs stacked on top of each other?

[Canapin (Coin-coin le Canapin)]

Basically, you’d take this code and put it in my code as a replacement for the <h2> tag and its content. But I’d suggest you refine and adapt this code to your needs, not just copy-paste it.

As for having the list of elements inline instead of on top of each other, there are many CSS ways to do that… A lot of them are pretty straightforward, but then we fall a bit out of the scope of the help we provide here. See this explanation:

About the dev category

The category for all things Discourse Development. Building a customization for yourself or the community? Then this is the category for you! Questions and discussions about creating themes, theme components, plugins, help with submitting pull requests, configuring development environments, coding conventions, and so on and so forth are all welcome here. However, basic HTML and CSS questions are not in scope for support.

In this kind of case about general, not directly Discourse-related HTML and CSS stuff, you may find information here: Make CSS changes on Your Site
And pretty much anywhere on the internet. For example: https://www.google.com/search?q=css+make+list+element+inline

That said, what are your current skills with HTML with CSS?
Knowing a bit more about this would help to write more tailored replies.

[Heliosurge (Dan DeMontmorency)]

@Canapin

That said, what are your current skills with HTML with CSS?
Knowing a bit more about this would help to write more tailored replies.

If I am being honest with myself and those around me. I am a novice enthusiast. I have had some programing in high school involving gwbasic and turbo pascal. I have taken the initiative to use an ap to help learn html and CSS and have had some successes. However not anything at a high level.

For example someone shared a code example to hide a category from the hamburger menu. It worked well but was a lot of coding to hide all the ones I wanted. This was prior to the theme-component “Category Hider” though did contribute with an idea to have an option to hide all sub categories to which a community member had shared a 1 or 2 line code that hid all subcategories. lol

That was much more efficient then I targeting each one to hide individually.

However I have now had mild success modifying Welcome Link banner by comparing the settings.yml with Modern Category boxes iirc settings.yml with swapping out the first setting with one that targets listing categories vs discovery. However it seems I still need to compare a couple of files to see where the setting takes effect. As I can add categories to the first setting but it does not see to be working quite yet.

I know I need to read more and use a better ide than my mobile to truly evolve my understanding and awareness. I will get there I just need to have the humility and focus to do so.

For that I am truly thankful we have this great and understanding community whom has often when asked given me guidance I need with a high level of patience that many would not give.

I know with studying code and taking time I will get there. I am too stubborn not too.

I do use linux and have now setup my desktop to better facilitate things… plus need to see how the desktop side of design and the mobile to create a well balance design. I am learning new things all the time. I am basing the core on the Air Theme as it is a great starting point.