adding google custom search to bootstrap

Hello,
I have added a google custom search to my bootstrap build and it looks like crap, the CSS is 100% controlled by google and I cannot change it in any way. Please see this link, the search is in the 1st content section on right side

http://think.darkstarmedia.net/

I did find this article about overriding it, but I can't make it work
http://newsapps.github.io/bootstrap/getting-started/#third-parties

it talks about overriding specific elements, im having no luck though

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

Open in new window

LVL 1
jblayneyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi jblayney,
I looked up your link and checked it on IE11, Firefox, Chrome & Safari all latest browsers on my win 10 desktop.

here is how the search box looked to me in all 4 browsers with its bottom border missing:
google search bottom border missing
I looked up the page in Firebug and was able to bring back the border and make button similar size.

I changed the DEFAULT.CSS a bit which you can see in code below (you will find the code around the line numbers):
/* line 52 */
.gsc-input-box {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #d9d9d9;
    /* height: 25px; <--- Remove height */
}

/* line 77 */
.cse input.gsc-search-button, input.gsc-search-button {
    background-color: #4d90fe;
    background-image: -moz-linear-gradient(center top , #4d90fe, #4787ed);
    border: 1px solid #3079ed;
    border-radius: 2px;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    height: 26px; /* Changed this from 29px */
    min-width: 54px;
    padding: 0 8px;
}

/* line 122 */
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
    /* height: 13px; <--- Remove height */
    margin-top: 2px;
    min-width: 13px;
    padding: 6px 27px;
    width: 13px;
}

Open in new window


here is how the search box should look after implementing above changes:
now the search box looks much better
check the above suggestion and let me know how it looks.
thanks,
Prasadh
Prasadh BaapaatWeb Designer & DeveloperCommented:
Sorry... some replacement to above code...

here is one more change in DEFAULT.CSS --- just use this below code in place of 3rd code changes to line 122 in above code.

I removed width and now the search button is also visible :)

/* line 122 */
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
    /* height: 13px; <--- Remove height */
    margin-top: 2px;
    min-width: 13px;
    padding: 6px 27px;
    /* width: 13px; <--- Remove width */
}

Open in new window


this is how it should look finally:
This is how it will look
thanks,
Prasadh
jblayneyAuthor Commented:
Prasadh Baapaat,

Thank you for your help.

My problem was not what style to change and how, so much as... the CSS is full controlled through google and I cannot overwrite in locally.

When using the Google seach you add javascript (similar to below), so that means all the CSS is loaded from Google and I cannot overwrite it.

         <script>
  (function() {
    var cx = '011612179414281255868:jwv6sxhrytq';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

jblayneyAuthor Commented:
I managed to find this code online to fix the issue

input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus,
.gsc-search-button {
    box-sizing: content-box; 
    line-height: normal;
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Prasadh BaapaatWeb Designer & DeveloperCommented:
I had given a solution for the problem which was 100% correct and as per the last reply I think it was NOT IMPLEMENTED by jblaney....  I spent my time to give a solution which solved the issue.

I don't say the solution I gave was the ONLY way to solve the problem... there may be other methods too... BUT he cannot dismiss my solution WITHOUT TRYING it out... he can dismiss it IF he did what I answered and  IT DID NOT WORK.
jblayneyAuthor Commented:
Sorry, I did try your solution, it didn't work. Why wouldn't I try yours? it was even posted online for you to see that it wasn't working.

I have been finding that Google has really dropped the ball on this whole custom search thing, this was just one of many many problems I am having with it and I have been wasting hours online trying to find solutions for things that should just work out of the box.
Prasadh BaapaatWeb Designer & DeveloperCommented:
I was not aware that you did try and post it online.... if you would have posted some message to me I would have definitely checked it out.

for you info: I use Firefox browser Inspect Element or Firebug to debug such problems... it has facility that we can edit css / add new styles and it will show result in real-time...

I checked it and if it works in real-time, the probability of it working on the live server is almost 100%.

I would have liked to solve your problem (not for the points but for the satisfaction of solving it)

anyways, since you found the solution, you can commence to dismiss this solution by me.
jblayneyAuthor Commented:
i found it online on stackoverflow
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Frameworks

From novice to tech pro — start learning today.