0

I hope I am posting in the right place. I apologize if not.

I will start out I am not a coder. The code for my search box can from a tutorial for my theme (custimzr pro). Anyway, I have created a costume search box in a stickied header that looks like a magnifying glass, expands when clicked, and allows for searches. I want to replace that search with google search (via adsense) but keep the styling the same. I figured out how to put the google search there, but I can't get it to style, mostly because I don't know what the elements to the google box are called.

This is the code I have for my search box now...(located in a child theme style css)

            /* my-nav-menu-search menu item created in functions.php. Move it way   over to the right */
.navbar .nav .my-nav-menu-search {
    float: right;
}
.navbar .nav {
    width: 100%;
}
.my-nav-menu-search .search-form {
    position: relative;
    margin: 0;
}
/*Stop the display of the Search button*/
.my-nav-menu-search .search-submit {
    display: none;
}
/* The "Search for" text is needed for screen readers, but we move it off screen, so we won't see it */
.my-nav-menu-search .search-form .screen-reader-text {
    position: absolute;
    left: -9999px;
    overflow: hidden;
}

/* Style the search input textbox */
.my-nav-menu-search .search-field {
    background: transparent;
    border: none;
    -webkit-box-shadow:    none;
    -moz-box-shadow:       none;
    box-shadow:            none;
    cursor: pointer;
    height: 26px;
    margin: 2px 0 2px 0;
    padding: 0 0 0 36px;
    position: relative;
    -webkit-transition: width 400ms ease;
    -moz-transition:    width 400ms ease;
    -o-transition:      width 400ms ease;
    transition:         width 400ms ease;
    width: 0px;
}

/* Expand the search box when you click it */
.my-nav-menu-search .search-field:active,
.my-nav-menu-search .search-field:focus {
    color: #5a5a5a;
    /* change the colour above if you are working with a dark navbar background */
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 70px;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
    margin: 0;
}

/* Add a magnifying glass background */
.my-nav-menu-search .search-form:before {
    font-family: 'FontAwesome';
    content: '\f002';
    position: absolute; /* this is the key to put it visually inside the search field */
    font-size: 19px;
    font-weight: normal;
    top: 5px; /* tune this vertical alignment inside the search field, as needed */
    left: 5px; /* tune this horizontal alignment inside the search field, as needed */
}

/* Reset nav width and search floating for mobile menu */
.tc-second-menu-on .nav-collapse {
  width: auto;
  clear: none;
  top: 5px;
  float: right;
  margin-right: 5px;
}
.sticky-enabled .tc-second-menu-on .nav-collapse { top: 7px; }
@media (max-width: 979px){
    .navbar .nav .my-nav-menu-search {
        float: left;
    }
    .navbar .nav {
        width: auto;
    }
}
  .tc-second-menu-on .nav-collapse {
      top: 10px;    
    }

And this is the Google search box code they give..

<form action="http://www.lifewithgremlins.com/search/" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-5*my pub number*" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="55" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

Does anyone know how to do this? and actually, if you are allowed to do it? I'm not sure how much Google cares about that search box appearance.

Thank you in advance.

closed as off-topic by TheDeadMedic, Pieter Goosen, kaiser May 6 '16 at 13:17

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

0

This isn't really a wordpress specific question, but you'll have to start by adding the classes you have in your search form to the Google code, until you get the results you desire. Without seeing all of your backend, it's hard to say what you need to do exactly, but this should get you on the right track. You probably don't need the my-nav-menu-search class added to the form, since on your theme it'll be in the nav-menu-search.

  <form action="http://www.lifewithgremlins.com/search/" id="cse-search-box" class="my-nav-menu-search search-form" >
  <div>
    <input type="hidden" name="cx" value="partner-pub-5*my pub number*" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="55" class="search-field" />
    <input type="submit" name="sa" value="Search" class="search-submit" />
  </div>
</form> 
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
  • I just updated the code it pretty much works on my test site. By the way. Good article on the dry drowning. I have a 22 month old little girl. – Howard E May 6 '16 at 10:16
  • Can you mark it as answer? Thanks – Howard E May 7 '16 at 20:42

Not the answer you're looking for? Browse other questions tagged or ask your own question.