[Support request] Customize the search bar

Home Forums Support [Support request] Customize the search bar

Home Forums Support Customize the search bar

Viewing 15 posts - 1 through 15 (of 32 total)
  • Author
    Posts
  • #2300209
    Justin

    I want to customize the search bar.
    I added the search bar on the right sidebar by using elements.
    However, there is no function to customize the search bar.

    Therefore, I will have to change it by adding code to CSS.
    I don’t want to use any plug-in.

    Can you advise how I can modify the code for search bar?
    I want to make the search borders round on the edges and add text “Search…” inside with the color blue?

    #2300285
    Fernando
    Customer Support

    Hi Justin,

    Can you share the link to your site?

    You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    #2300297
    Justin

    My site is currently in staging so I do not have a link to share

    #2300311
    Fernando
    Customer Support

    I see. What search bar are you using? Is it the one from GP or from WP?

    #2301368
    Justin

    Search bar created in GP with elements

    #2301375
    Fernando
    Customer Support

    If you’re using the WP Search Block, you can add the placeholder to the block itself.

    In terms of design, here are a couple of CSS you can try adding through Additional CSS:

    input[type="search"] {
        border: solid 3px #0000ff;
        border-radius: 20px;
        color: #0000ff;
    }
    
    input[type="search"]::placeholder{
        color: #0000ff;
    }

    You may modify theme as well to your preference.

    #2304788
    Justin

    didn’t work

    #2304971
    David
    Staff
    Customer Support

    Hi there,

    are you using a Block Element ? And is it a Search Block that you used ?

    #2342014
    Justin

    Yea I made it in element and used the search block

    #2342433
    David
    Staff
    Customer Support

    As we can’t see it on the front end, we need to know what settings you have on the search block – see here:

    2022-09-14_10-21-44

    NOTE: If you don’t require a Search Label then you should Toggle that first toolbar option to Off.

    #2343205
    Justin

    How can I remove the little box around the search icon and anyway I can make the search rectangular box rounded on the edges?

    #2343215
    Fernando
    Customer Support

    Can you re-share the link to the site in question?

    You may use the Private Information field for this: https://docs.generatepress.com/?s=private+information

    #2343733
    Justin

    my site is still not public or active

    #2343990
    David
    Staff
    Customer Support

    Can you share a screenshot of the search block with the toolbar visible as i did here:

    https://generatepress.com/forums/topic/customize-the-search-bar-2/#post-2342433

    Then we can advise on how to style it – but we need to know what settings you’re using so we can replicate it locally.

    #2344155
    Justin

    How do I attach it?

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