How do I replicate the meta banner links?

dev
1

image
image1612×428 48.8 KB

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

2 Likes
2

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
3

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

image
image1612×428 48.8 KB

4

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

5

I will make a theme component. :+1:

8 Likes
7

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
8

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

3 Likes
9

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

2 Likes
10

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
11

Thank you so much! :pray:t2:

2 Likes
12

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

image
image616×907 15.9 KB

Link settings:

image
image1090×1036 34.4 KB

The default look – it uses the theme color.

image
image697×94 4.96 KB

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:

6 Likes
13

@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
14

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
15

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

4 Likes
16

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
17

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

2 Likes
18

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:

image
image1206×356 24.5 KB

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

image
image740×128 2.68 KB

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
19

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

2 Likes
20

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
21

Great Theme Component - and definitely deserves its own topic!

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

2 Likes