[Support request] Add Search Hero Box under Header

Home Forums Support [Support request] Add Search Hero Box under Header

Home Forums Support Add Search Hero Box under Header

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #1570461
    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

    #1570515
    David
    Staff
    Customer Support

    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

    #1570540
    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?

    #1570573
    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

    #1570702
    David
    Staff
    Customer Support

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

    #1570707
    ahmad

    Sure
    Designscanyon.com
    Please also check on mobile
    Thanks

    #1570947
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1571216
    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

    #1571375
    David
    Staff
    Customer Support

    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.

    #1571376
    ahmad

    Hello David Yes that worked Thank you

    still left:

    -Change button Color

    -fix the rounded text field in mobile

    Best

    #1571378
    ahmad

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

    #1571538
    David
    Staff
    Customer Support

    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.

    #1573978
    ahmad

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

    #1574158
    David
    Staff
    Customer Support

    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;
    }
    #1574185
    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

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.