npl Posted November 23, 2011 Posted November 23, 2011 Anyone know how to change the appearance of the google plus one button to a square? It is not in the default developer settings. I am at a loss with this one. It needs to be changed to a square to fit in with the rest of my site. http://borealtrek.com Thanks for the help!
Guest xaav Posted November 24, 2011 Posted November 24, 2011 You will need to take [this](https://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite.png) sprite, then use a photo-editing program to make one of the lines a square. After that, you will need to adjust the .Uu and .Uu .JF classes in a custom CSS file to point to your edited image.
npl Posted November 24, 2011 Author Posted November 24, 2011 I don't know where I would be with out this forum. Thanks for the help. I think what you said will do the trick just nicely.
npl Posted November 25, 2011 Author Posted November 25, 2011 I jumped the gun.... I got the sprite done and I tried to put it into the code and it did not work.What would you do? New Sprite http://borealtrek.com/wp-content/uploads/2011/11/g+.png Normal g+ code <!-- Place this tag where you want the +1 button to render --> <g:plusone annotation="none" href="www.borealtrek.com"></g:plusone> <!-- Place this render call where appropriate --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'http://borealtrek.com/wp-content/uploads/2011/11/g+.png'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script></td> <td>
Guest xaav Posted November 25, 2011 Posted November 25, 2011 EDIT: I just realized that this isn't going to work because the plus one button is rendered inside an inline frame. However, I may have another solution. First, change that plus one code to back like you had it before. Then, add this CSS between the <head> tags: <style type="text/css"> #___plusone_0 > iframe { opacity: 0 !important; } #___plusone_0 { background: url('http://borealtrek.com/wp-content/uploads/2011/11/g+.png'); } </style>
demizide Posted December 3, 2011 Posted December 3, 2011 EDIT: I just realized that this isn't going to work because the plus one button is rendered inside an inline frame. However, I may have another solution. First, change that plus one code to back like you had it before. Then, add this CSS between the <head> tags: <style type="text/css"> #___plusone_0 > iframe { opacity: 0 !important; } #___plusone_0 { background: url('http://borealtrek.com/wp-content/uploads/2011/11/g+.png'); } </style> Well, if you'd do that then it won't change like it did at first, and you won't know that you've +'ed the page, and people will think it's broken.
xwinuser Posted December 4, 2011 Posted December 4, 2011 The Google+ button on your page is in the shape of a square.
demizide Posted December 5, 2011 Posted December 5, 2011 The Google+ button on your page is in the shape of a square. He wasn't talking about the G+ button, he was talking about the +1 button, it's kinda the G+'s version of FB like-
xwinuser Posted December 5, 2011 Posted December 5, 2011 The +1 button that shows up in search results? Not sure you can change that. Not like a Favicon. Sorry wish I were more help. Will research more.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now