How do I replicate the meta banner links?

How can create 4 button: Customize, Guide, Hot topics, Our Hosting

2 Likes

In the Search Banner theme component, there are two plugin outlets you can target for custom content in a separate custom component you can build.

4 Likes

What is search_banner.search_button_text
How can i create button same photo?

Thanks! I couldn’t find the option to insert this code under customisation.
Can you guide me please :pray:

I will make a theme component. :+1:

8 Likes

Well, it’s okay, Don. It’s all about learning and sharing. I think it would be a good idea to inform our intention from the start, next time. Thanks for sharing. :+1:

Actually, I’ve been working on it since yesterday[1]. I did something similar, but I haven’t posted it yet. I want to add more customization options, like the ability to choose between emoji, Font Awesome icons, or image URLs, but also CSS per button, conditional rendering, and such. For that, I’ve been exploring and testing the JSON schema format a lot (and it’s quite a headache – on a side note, this PR to improve the styling will be awesome!). I will silently post my version on Github later.


  1. image ↩︎

9 Likes

Have you had any success? I’ve had a go building one, but have gotten stuck.

3 Likes

Hi @Arkshine, do you have any updates on this component? It would be amazingly helpful for me as well :innocent:

2 Likes

I completely forgot, sorry. :smile:

Unfortunately, the JSON schema format for the settings will soon be deprecated, so what I originally wanted to do will not work anymore (and the customization with it was too tricky, to be honest).

I wanted to post Don’s version but can’t find his repository. :thinking:

I will see what I can do to post a working version as soon as possible. :+1:

3 Likes

Thank you so much! :pray:t2:

1 Like

@Helga_Razinkova

Can you give it a try? Credit to @Don and @nolo – I took some of their ideas.

It requires a recent Discourse version (3.3) since it relies on the new Objects type for theme setting.

Some images

General settings:

Link settings:

The default look – it uses the theme color.

Button can be styled separately:
image

Let me know if you need specific settings.
It might need some adjustments for mobile. By default, the buttons wrap and are displayed in one column on mobile. Looking forward to any feedback.

If all is good, I will release it later. :+1:

3 Likes

@Arkshine I’m so sorry for the delay, I’ve just got around to this idea :slight_smile:

I was able to add the buttons, thank you so so much for this plugin!! The only challenge now is placing the buttons right after the search bar, but I hope we’ll find a solution.

One question: is it possible to make the Emoji field optional instead of required?

Thank you once again!

2 Likes

Hey, thanks for testing the component!

I’ve updated it to make the emoji optional. :+1:

Do you mean you’re using the Banner Search component, and you want the button to appear below?
If so, in plugin outlets setting, you can set it to below-site-header.
You might need to adjust the spacing with some CSS, though.

Let me know if you need additional help. :slight_smile:

1 Like

Hello, I think Helga looking for this plugin outlet. :slightly_smiling_face:

4 Likes

Indeed!

For some reason, I assumed the Plugin Outlet component would show them (I forgot how the component generates them). Thanks for correcting me. :+1:


I will need to adjust the settings to make it work with component outlets and to make it easier to customize the spacing. I will update you soon, Helga.

3 Likes

Awesome, thanks a million for your help, @Arkshine @Don! :fire: :fire:

2 Likes

Sorry for the wait! I’ve updated the component. I’ve added several new settings.

In your case, you want to use search-banner-below-input in the plugin_outlet setting.
It will appear now right below:

If you prefer, you can now set a max width to the container:
image
`
Here are the settings I used:


The image shows a user interface element labeled "buttons wrapper max width" with a slider control and a number input field allowing the user to set a maximum width of 600 pixels, along with a "reset" button. (Captioned by AI)

There are other settings, including a few for the mobile view.

Let me know if it works well for you. :+1:

2 Likes

Oh my, @Arkshine, you’re a star!! Thanks a million, everything looks awesome now! :heart_eyes:

2 Likes

Very smart how this theme component’s settings are laid out, @Arkshine! As always, here you provide another excellent starting point and template for the community’s beginner component builders!

Many, many THANKS to you, my friend!

4 Likes

Great Theme Component - and definitely deserves its own topic!

Should we perhaps re-format this one for that purpose? Or make a new one?

1 Like