Solved

help with Google search form input field formatting

Posted on 2014-03-21
6
1,441 Views
Last Modified: 2014-03-24
Hi. I am trying to get a Google custom search form to look good. Here is the development page:

http://test2.ebwebwork.com/

The google custom search form does not display properly, because my existing stylesheet seems to be modifying the search form's appearance.

Because I got this search form from Google, using the Google custom search tool generator, I have only some script to work with:

<!-- SearchBox -->
<div class="SearchBox">
<script>
  (function() {
    var cx = '001382591411870128679:i7bnazymn94';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

<gcse:searchbox-only></gcse:searchbox-only>
<!-- /SearchBox -->
</div>

Open in new window


I can't apply CSS custom styling to that Google script.

Any ideas how I can make this search form look better, or remove the effects of my current style sheet on the search form? (I don't want to remove any parts of the existing style sheet; I need them for the rest of my web site.)

Thank you for any advice.

Eric
0
Comment
Question by:Eric Bourland
  • 4
  • 2
6 Comments
 
LVL 15

Assisted Solution

by:myselfrandhawa
myselfrandhawa earned 500 total points
ID: 39947463
modify this class

.gsc-input-box {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D9D9D9;
    height: 25px;
}

as:

.gsc-input-box {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 25px;
}

input type css change it like this

.gsc-input {
    background: url("http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif") no-repeat scroll left center rgba(0, 0, 0, 0);
    padding: 0 !important;
    width: 150px;
}
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39947471
I will try this later today. Thank you, randhawa!
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39949044
Dear randhawa,

I added those line to my style sheet --- but it looks much the same:

http://test2.ebwebwork.com/

Am I missing something?

Thank you again for your help. Hope you are well.

Eric
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 15

Accepted Solution

by:
myselfrandhawa earned 500 total points
ID: 39949862
remove the table around the box and try this code

<input type="text" lang="en" autocomplete="off" size="10" class="gsc-input" name="search" title="search" style="width: 100%; padding: 0px; border: medium none; margin: 0px;margin-top:0px; height:24px; outline: medium none; background: url(&quot;http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif&quot;) no-repeat scroll left center rgb(255, 255, 255);" id="gsc-i-id1" x-webkit-speech="" x-webkit-grammar="builtin:search" dir="ltr" spellcheck="false">
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39950098
I tried that -- the search interface looks better -- but search does not seem to work. I type a search word and press Enter and nothing happens:

http://test2.ebwebwork.com/

I think I need to use a FORM tag to enclose the INPUT tag above?

Thanks again for your help, randhawa.

Eric
0
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 39952047
randhawa, thanks for these ideas. I went with the old-school google form / input markup:

<form action="http://www.google.com/cse" id="cse-search-box" style="float:right;">
    <input type="hidden" name="cx" value="001382591411870128679:i7bnazymn94" />
    <input type="text" name="q" alt="Enter Google Search Keywords" style="height:1.8em;width:13.0em;padding:0;margin:0;" />
    <input type="submit" name="sa" value="Search ACCT Web Site" style="padding:0.2em; margin:0;" />
</form>

And I applied styles inline, as shown, This seems to work OK. Thank you for your help, as always. Hope you are great.

Eric
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now