Docs

[GATHH]

Hi there,
Unfortunately, Google custom search doesn’t display nicely in X Theme. It’s adding some strange internal padding and the search button is not properly visible. I wonder why that is.
I have tried to apply the CSS from here (https://community.theme.co/forums/topic/google-custom-search-engine-not-displaying-correctly-with-x-theme/) but that didn’t help at all.

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[GATHH]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS:

.gsc-input-box {
    height: 40px;
}

input#gsc-i-id1 {
    height: 25px !important;
    margin-top: 3px !important;
    padding: 5px !important;
}

input.gsc-search-button.gsc-search-button-v2 {
    color: #fff;
    background-color: #000;
    padding: 15px 25px;
    background: url(https://www.google.com/uds/css/v2/search_box_icon.png) no-repeat center center;
}

Hope it helps 🙂

[GATHH]

Thanks a lot for that. Almost there. It looks a little bit better but the search button still won’t show nicely. See screenshot please.

[GATHH]

I made a few more adjustments to the code you gave me and it works perfectly now. For anyone else to use:

.gsc-input-box {
    height: 40px !important;
}

input#gsc-i-id1 {
    height: 25px !important;
    margin-top: 3px !important;
    padding: 5px !important;
background: #fff !important;
box-shadow: none !important;
}

input.gsc-search-button.gsc-search-button-v2 {
    color: #fff !important;
    padding: 15px 25px !important;
    background: url(https://www.google.com/uds/css/v2/search_box_icon.png) no-repeat center center #0f9449 !important;
}

[Rad]

Glad to hear that and thanks for sharing!

[Author]

Posts