Formatting of New Widget

On my main site at https://christiangays.com/ I have added a new widget called "Search The Bible". It is under "Global Site Search (not members)".

Can you tell me please how to format the new widget so that it looks like the Global Site Search widget.

The Custom CSS for Global Site Search Widget is:

/* Begin - Global Site Search - format */
#global-site-search-widget-4 > form > table > tbody > tr > td:nth-child(1) > input[type="text"] {
height: 25px;
padding: 0 0 0 5px;}
#global-site-search-widget-4 > form > table > tbody > tr > td:nth-child(2) > input[type="submit"] {
height: 25px;
padding: 5px 5px;}
/* End - Global Site Search*/

Support Access is Granted. Many thanks!

Staff Edit: Chat link attached in the thread

  • Mary

    Two days ago I posted this ticket. Nobody has responded. In the meantime I have changed my mind as to the layout of the new widget. I would rather make the "Global Site Search" widget look like the "Search The Bible" widget - i.e. remove the table. Can you please help me with that.

    Please see screenshot showing both widgets. I prefer both to look like the more simple "Search The Bible" one.


    Thank you. Support access has been extended.

  • Mary

    Sorry, issue has not been resolved. Search button looks good on Safari and Chrome, but not on Firefox, or if I adjust it to look good on Firefox then it doesn't look right on Chrome and Safari.

    Using the following Custom CSS:
    #global-site-search-widget-4 > form > table > tbody > tr > td:nth-child(2) > input[type="submit"] {
    height: 25px;
    padding: 5px 5px;
    position: absolute;
    right: 4%;
    top: 26.8%;
    }

    It looks perfect in Chrome & Safari

    But Firefox looks like this

    If I change top from 26.8% to 20.8%
    Firefox looks good

    but Chrome and Safari are not good.

    So what I need is code that will work for all browsers and mobile. This is current css
    /* Begin - Global Site Search - format */
    #global-site-search-widget-4 > form > table > tbody > tr > td:nth-child(1) > input[type="text"] {
    height: 25px;
    width: auto;
    padding: 5% 4% 0 5%;
    }

    #global-site-search-widget-4 > form > table > tbody > tr > td:nth-child(2) > input[type="submit"] {
    height: 25px;
    padding: 5px 5px;
    position: absolute;
    right: 4%;
    top: 20.8%;
    }

    #global-site-search-widget-4 > form > table > tbody > tr > td:nth-child(1) {
    width: 100%;
    padding: 0 6% 0 0%;
    }

    #global-site-search-widget-4 > form > table {
    border: 0; }

    #global-site-search-widget-4 > form > table > tbody > tr > td:nth-child(1) {
    border: 0; }

    #global-site-search-widget-4 > form > table > tbody > tr > td:nth-child(2) {
    border: 0; }
    /* End - Global Site Search*/

    /* Begin - Search The Bible - format */
    .textwidget input[type="text"] {
    height: 25px;
    width: 73% !important;
    padding: 5% 4% 0 5%;
    }

    .textwidget input[type="submit"] {
    height: 25px;
    padding: 5px 5px;
    width: 55px;
    position: absolute;
    right: 4%;
    }
    /* End - Search The Bible - format */

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.