Google Cse ads by google.

[canadacatman]

I have a google custom search and the ads by google is yellowish. I am trying to make it white with css.

My results code:
[code]
<script src=”//www.google.com/jsapi” type=”text/javascript”></script>
<script type=”text/javascript”>
function parseQueryFromUrl () {
var queryParamName = “q”;
var search = window.location.search.substr(1);
var parts = search.split(‘&’);
for (var i = 0; i < parts.length; i++) {
var keyvaluepair = parts[i].split(‘=’);
if (decodeURIComponent(keyvaluepair[0]) == queryParamName) {
return decodeURIComponent(keyvaluepair[1].replace(/+/g, ‘ ‘));
}
}
return ”;
}

google.load(‘search’, ‘1’, {language : ‘en’});
google.setonloadCallback(function() {
var options = {};
options[google.search.Search.RESTRICT_SAFESEARCH] = google.search.Search.SAFESEARCH_STRICT;
var customSearchControl = new google.search.CustomSearchControl(‘partner-pub-XXXXXXXXXXXXXX’);
customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchResultsOnly();
customSearchControl.draw(‘cse’, options);
customSearchControl.setLinkTarget(
google.search.Search.LINK_TARGET_SELF);
var queryFromUrl = parseQueryFromUrl();
if (queryFromUrl) {
customSearchControl.execute(queryFromUrl);
}
}, true);
</script>
<script type=”text/javascript” src=”http://www.google.com/afsonline/show_afs_search.js”></script&gt;
[/code]

My css I had made:
[code]
.gsc-results .gsc-cursor {
display: inline-block;
margin-top: 20px;
width: 100%;
}

.gsc-results .gs-visibleUrl {
font-weight: normal;
margin-top: 2px;
}

.gsc-results .gsc-cursor-box .gsc-cursor-page {
color: #000;
display: inline-block;
font-size: 20px;
margin: 0 px;
max-width: 60px;
padding: 1px 0;
text-align: center;
width:25px;
}

.gs-webResult .gs-image-box img.gs-image {
border: none;
padding-left:0px;
min-width: 125px;
min-height: 100px;
max-width: 100%;
/* change the number below to set the max-height of images on the WEB results page */
max-height: 175px;
}

.gsc-control-cse {
font-family: Arial, sans-serif;
background-color: #FFFFFF;
border-color: #FFFFFF;
}

.gsc-tabHeader.gsc-tabhInactive {
background-color: #E9E9E9;
border-color: #E9E9E9;
}

.gsc-tabHeader.gsc-tabhActive {
background-color: #FFFFFF;
border-left-color: #E9E9E9;
border-right-color: #E9E9E9;
border-top-color: #FF9900;
}

.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult {
background-color: #ffffff;
border-color: #FFFFFF;
}

.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
background-color: #FFFFFF;
border-color: #FFFFFF;
}

.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
color: #036ad4;
}

.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
color: #036ad4;
}

.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b,
.gs-imageResult a.gs-title:hover,
.gs-imageResult a.gs-title:hover b {
color: #036ad4;
}

.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b,
.gs-imageResult a.gs-title:active,
.gs-imageResult a.gs-title:active b {
color: #036ad4;
}

.gsc-cursor-page {
color: #036ad4;
}

a.gsc-trailing-more-results:link {
color: #036ad4;
}

.gs-webResult .gs-snippet,
.gs-imageResult .gs-snippet,
.gs-fileFormatType {
color: #000000;
}

.gs-webResult div.gs-visibleUrl,
.gs-imageResult div.gs-visibleUrl {
color: #008000;
}

.gs-webResult div.gs-visibleUrl-short {
color: #008000;
}

.gs-webResult div.gs-visibleUrl-short {
display: none;
}

.gs-webResult div.gs-visibleUrl-long {
display: block;
}

.gsc-cursor-box {
border-color: #FFFFFF;
}

.gsc-results .gsc-cursor-box .gsc-cursor-current-page{
background:#F7A401 !important;
}
.gsc-cursor-page{
background:#43a0cb !important;
color:#fff !important;
font-size:1.4em !important;
padding:6px 10px;
text-decoration:none !important;
}

.gs-promotion {
background-color: #ffffff;
border-color: #FFFFFF;
}

.gs-promotion a.gs-title:link,
.gs-promotion a.gs-title:link *,
.gs-promotion .gs-snippet a:link {
color: #036ad4;
}

.gs-promotion a.gs-title:visited,
.gs-promotion a.gs-title:visited *,
.gs-promotion .gs-snippet a:visited {
color: red;
}

.gs-promotion a.gs-title:hover,
.gs-promotion a.gs-title:hover *,
.gs-promotion .gs-snippet a:hover {
color: #036ad4;
}

.gs-promotion a.gs-title:active,
.gs-promotion a.gs-title:active *,
.gs-promotion .gs-snippet a:active {
color: #036ad4;
}

.gs-promotion .gs-snippet,
.gs-promotion .gs-title .gs-promotion-title-right,
.gs-promotion .gs-title .gs-promotion-title-right * {
color: #000000;
}

.gs-promotion .gs-visibleUrl,
.gs-promotion .gs-visibleUrl-short {
color: #008000;
}

.gsc-thumbnail {
padding-right:75px;
}
[/code]

I was told to add this to my css:
[code]
ins {
border-color: #FFFFFE;
background-color: #FFFFFE ! important;
}
[/code]

It did not work. Does anyone know what else I can try. Thank you

[Senff]

Noooooo, don’t just dump a bunch of code in here. Instead, please give us a link to your site, or create a reduced case in Codepen so we can all see what’s going on.

[canadacatman]

http://www.juniorsafetysearch.com/pages/search-results/index.php?cx=partner-pub-7327945792706541%3A5769698145&cof=FORID%3A10&ie=UTF-8&q=cars

[Shikkediel]

Looks like an iframe with a page that’s under the control of Google so I don’t think it can be changed with any CSS on your site. Possibly through their API though.

http://stackoverflow.com/q/10014162/3168107

[Author]

Posts