Reduce Height of Global Site Search Input Box & Button

Can you tell me please how I reduce the input box and Search button for Global Site Search to 30px high so that it matches the height of the Log In box above it.

Thank you.

  • Nithin

    Hey Mary,

    Hope you are doing good today. :slight_smile:

    I suppose you are talking about the widget, and not the search search bar in your /site-search page. If yes, please try the following CSS, and check whether it works fine:

    #global-site-search-widget-3 > form > table > tbody > tr > td:nth-child(2) > input[type="submit"] {
    	height: 30px;
    	padding: 8px 20px;
    }
    
    #global-site-search-widget-3 > form > table > tbody > tr > td:nth-child(1) > input[type="text"] {
    	height: 30px;
    }

    Since there isn't any class, or unique IDs the above method will be the only way to implement the changes, please do note if you re-arrange the widgets, the above CSS won't work.

    You can add the above CSS code, using Custom CSS box(if your theme offers), or either using a Child theme, or a plugin like Simple Custom CSS.

    Please clear your cache, and let us know how that goes, have a nice weekend. :slight_smile:

    Kind Regards,
    Nithin

  • Rupok

    Hi Mary,

    Sorry for the miscommunication here. Most probably Nithin tried to say that rearranging the *elements* in that widget will make that custom CSS code not working. But if you move the position of that whole widget to up or down, that should not affect the custom CSS code.

    I could confirm this if I could test this on your site. So I tried to login with Support Access but it's showing me the following error:

    The admin of this site does not allow users to access the wp dashobard.
    Go back to the home page by clicking here.

    Did you change any security settings on your site which could be causing this? If yes, can you please change that so we can login with Support Access and confirm you the answer of your question?

    I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Mary

    No, I didn't change any security settings and support access is good for two more days.

    I have revoked and granted again. Please try now.

    Note: I just went in to Wordfence to check my settings and Live Traffic was enabled. I never turn on Live Traffic. Not sure what's happening. I have turned it back off, although I don't think that should have prevented you from logging in. Will continue to check settings. If one has been changed, perhaps something else has been changed.

  • Rupok

    Hi Mary,

    Thanks for the reply. I tried again and still getting the same error. I asked my colleague Nithin and Vaughan, they are also getting the same error while trying to access your site through Support Access.

    While you are checking your settings, can you please send me a message with WordPress access credentials through our secure contact form here: https://premium.wpmudev.org/contact/ so I can continue working on the issue of this thread?

    Subject: "Attn: Rupok"
    - WordPress admin Username
    - WordPress admin Password
    - Login URL
    - Link back to this thread for reference
    - Any other relevant URLs

    Select "I have a different question" for your topic. This and the subject line ensure that it gets assigned to me.

    Please confirm here when you are done sending. I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Mary,

    Thanks a lot for sending those credentials. I've tried moving that widget to upper and lower position and as I said, this doesn't stop that custom CSS from working.

    So you can move that widget to up or down. It won't stop that custom CSS from working, confirmed!

    Please let us know if you have any confusion or any further query. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Mary,

    So sorry for the mis-understanding. You said "global site search is in the second, third and fourth places in the left sidebar". So I thought we are talking about a specific site. But now I understand. Let me provide the solution.

    When you put that widget in another subsite, the ID for that widget changes. For example, in your "https://christiangays.com/" site, that widget ID is "global-site-search-widget-3". Please check the attached screenshot for reference.

    But for your dating subsite, the ID for that widget changes to "global-site-search-widget-2". Please check the attached screenshot for reference.

    You can easily track the ID for that widget in different subsites using Firebug or Chrome Dev Tools as I shown in the screenshots.

    So, in your dating subsite, you will have to use "global-site-search-widget-2" in the code Nithin provided above. The code for your dating site will be this:

    #global-site-search-widget-2 > form > table > tbody > tr > td:nth-child(2) > input[type="submit"] {
    	height: 30px;
    	padding: 8px 20px;
    }
    #global-site-search-widget-2 > form > table > tbody > tr > td:nth-child(1) > input[type="text"] {
    	height: 30px;
    }

    I've already done it for you on your dating site and it's showing the proper height now. Can you please check and confirm?

    In this way, you need to find the ID for that widget for all the sites and update the custom CSS code accordingly.

    Please let us know if you still have any confusion or any further query. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.