[Support request] Add Search Hero Box under Header

[ahmad]

Hello Guys
I want to add a search bar hero element under the header bar
like in this image :

bar

I have managed to add PHP snippet this one with pluginception

add_shortcode( ‘search_form’, function() {
ob_start();

get_search_form();

return ob_get_clean();
} );

and then created a hook before the main content and added this :

[search-form]

but the result is ugly not centered and cant color it and doesn’t seem to work:

bar02

can you guys help to reach a good result?

best

[David]

Hi there,

create a Block Element and set the Hook to generate_after_header

https://docs.generatepress.com/article/block-element-overview/

You can use the GenerateBlocks plugin to create the Container, add background etc and other content, to which you can also include your search Shortocde to.

https://generateblocks.com

[ahmad]

Thanks for Getting Back David
Alright I was able to get this started
but now how can I alter the look of the search bar itself
– I want to make it longer
– I want to change the button color, shape, size ( rounder, square )
– I want to change the word inside the bar ( Search… )
I cannot do that within the block editor
can you please help?

[ahmad]

Another Question on mobile
that search bar gets messed up there is no padding between the text field and button
and it’s not centered at all here is how it looks like :

View post on imgur.com

[David]

If you can share a link to a page where i can see this then ill provide some CSS.

[ahmad]

Sure
Designscanyon.com
Please also check on mobile
Thanks

[Elvin]

Hi,

To clarify: Are you trying to achieve an alignment similar to this?
https://share.getcloudapp.com/Jruq6QPP

If so, you can try adding this CSS:

.gb-inside-container form.search-form {
    display: flex;
    justify-content: center;
}

This CSS center aligns the contents of the search form.

[ahmad]

Thank you, Elvin
that fixed the alignment for sure

can you please tell me how to change:

– button color
– the wording inside the search box

also for some reason on mobile the text field has rounded corners but on the desktop is different
do you know why and how to make it corners on all devices?

Thanks

[David]

To change the Placeholder text you will need to change your search from shortcode to this:

add_shortcode( 'search_form', function() {
    ob_start();
    
    ?>
    <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field"
        placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>"
        value="<?php echo get_search_query() ?>" name="s"
        title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
    </label>
    <input type="submit" class="search-submit"
        value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
    </form>

    <?php
    
    return ob_get_clean();
} );

On this line of the code:

placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>

Change the Search ... text to what you require.
Once that is done we may need to tweak the CSS – so make that change and let us know and we can work through the other amends.

[ahmad]

Hello David Yes that worked Thank you

still left:

-Change button Color

-fix the rounded text field in mobile

Best

[ahmad]

also if there is a way to make the search field width longer ?

[David]

hmmm … you’re using a Grid Block with empty columns to restrict the size of your content. Don’t use the Grid Block, simply place the content inside the Container block, in the settings > Layout you can change the width of the inner container.

Need that change so as i can resize the search bar.

[ahmad]

Can you please tell me how to change the button color?
Thanks

[David]

By default that button will use the Colors you set in Customizer > Colors > Buttons
If you want it to be different to the rest of the theme then use this CSS:

.search-form input[type=submit] {
    background-color: #f00;
    color: #000;
}

[ahmad]

Thank you David that changed the color!

The only thing I have left is the actual width of the search field I would like to make it longer.

I did what you said in the block editor I removed all the columns as a test and keep only the short code one but still, it was the same width it wasn’t longer

any ideas what could be the issue?

Best

[Author]

Posts