Question

我为自己的网页生成了Google+ badge。

问题是，它只有2个主题（浅色和深色），并且在我的网站上不太适合。

我想删除灰色边框并使背景透明。

Google提供的代码基本上包含一个带有API的js文件，然后使用徽章将IFrame附加到我的页面。

因此，我无法更改IFrame的CSS，因为src的域与我的域不同。

我似乎无法找到任何记录方式来自定义徽章样式。

但是，我遇到了Android website并注意到他们有相同的徽章，但设法删除了背景和边框。在浏览了android的页面源代码之后，我发现他们使用的是与我相同的API和相同的标记来包含徽章。

有谁知道他们如何设法定制它？

Answer 1

在android.com上查看<a href="//plus.google.com/104629412415657030658" id="page-badge-border"></a>的样式。它有一个白色边框，覆盖徽章的灰色边框。

Answer 2

在线达成共识似乎是在改变背景是不可能的。

边框，但是......这个网站的答案对我有用： http://www.daddydesign.com/wordpress/how-to-customize-your-google-page-badge/

您可以在<-strong> Google提供的徽章

之后添加

<script type="text/javascript">
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>

然后在标题中添加这些样式：

#googleplus_widget{
    width: 318px; /*two pixels LESS than badge width */
    height: 362px; /*two pixels LESS than badge height */
     /*float: left;*//*I replaced this with three lines below, which center the badge*/
    position:absolute;
    left:0;right:0;
    margin:0px auto 0px auto;
}
#googleplus_widget span{
    width: 318px; /*two pixels LESS than badge width */
    height: 362px; /*two pixels LESS than badge height */
    float: left;
    overflow: hidden;
    background: #fff;
}
#googleplus_widget span div{
    margin: -1px 0 0 -1px !important;
    position: relative;
}

宽度和高度属性应比徽章的宽度和高度更少两个像素。

这是一个非常漂亮和干净的解决方案，因为您不必担心将其他元素放置在边框顶部以隐藏它们，这意味着徽章的尺寸实际上就是您在页面上看到的尺寸。

更改Google+徽章样式

2 个答案: