Toolbar under site header per category

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

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.

1 Like

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 :slight_smile:

1 Like

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.

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?

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.

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.

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.

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!

1 Like

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.

:vulcan_salute::sunglasses::handshake:

1 Like

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.

1 Like

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

You are definitely an asset to your team! :beers::sunglasses::vulcan_salute:

2 Likes

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?

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:

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. :slight_smile:

1 Like

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. :wink:

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.

1 Like