CODEWITHSUNDEEP
google-plusgoogle-plus-onebadge
Bohdan Hdal
Bohdan Hdal

Reputation: 149

How to change css styles of Google Plus Pages Badge?

I configuring standart badge on https://developers.google.com/+/plugins/badge/config

For it Google+ rendering iframe content. How i can change classes styles inside iframe?

Upvotes: 1

Views: 3412

Answers (3)

Francisco Souza
Francisco Souza

Reputation: 828

You can do a little trick:

The HTML for the iframe:

<div id="social_gplus_circle">
<div id="social_gplus_circle_inner"><g:plus href="https://plus.google.com/105379671042990608528" size="smallbadge"></g:plus></div>
</div>

The CSS for the trick:

#social_gplus_circle{overflow: hidden;width: 105px;height: 45px;padding-top: 7px;}
#social_gplus_circle_inner{overflow: hidden;position: relative;top: -20px;left: -130px;height: 50px;width: 276px;}
iframe{display: block!important;}

I did not made this myself, I got it from a google forum.

Upvotes: 1

Carlos Oporto
Carlos Oporto

Reputation: 131

At this time it seems there is currently no way to do it. I tried editing the CSS to get rid of the annoying border and white background:

.yeb { 
    background-color: none !important;
    border: 0px solid gainsboro !important;
}

But since the CSS is in the Google server you can't override the iFrame. It is a current feature request in the Google forums.

Upvotes: 1

tildy
tildy

Reputation: 1009

You can't change it , because the google plus code is not on your server. You can only modify the iframe CSS , if your page and the iframe code is on the same server.

Upvotes: 0

Related Questions