Изменить стиль значка Google+ - PullRequest
Новая
       8

Изменить стиль значка Google+

2 голосов
/ 09 марта 2012

Я сгенерировал Google + значок для своей страницы.

Дело в том, что у него есть только 2 темы (светлая и темная), и он не очень хорошо вписывается в мой сайт.

Я бы хотел удалить серую рамку и сделать фон прозрачным.

Код, который Google предоставляет, включает в себя файл js со своим API, который затем добавляет IFrame на мою страницу со значком.

Из-за этого я не могу изменить CSS IFrame, потому что домен src не совпадает с моим.

Кажется, я не могу найти какой-либо документированный способ настройки стиля значка.

Однако я наткнулся на веб-сайт Android и заметил, что у них одинаковый значок, но мне удалось удалить фон и границу. После просмотра исходного кода страницы Android я обнаружил, что они используют тот же API, что и я, и ту же разметку для добавления значка.

Кто-нибудь знает, как им удалось настроить его?

Ответы [ 2 ]

1 голос
/ 10 июня 2015

Консенсус онлайн, похоже, заключается в том, что изменение фона невозможно.

Границы , однако ... Ответ на этом сайте работал для меня: http://www.daddydesign.com/wordpress/how-to-customize-your-google-page-badge/

Вы добавляете этот скрипт после поставляемого Google div для значка: 

<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;
}

Атрибуты ширины и высоты должны быть на два пикселя * на 1018 * меньше , чем ширина и высота вашего значка.

Это довольно хорошее и чистое решение, потому что вы нене нужно беспокоиться о размещении других элементов поверх границ, чтобы скрыть их, а это означает, что размеры значка на самом деле - это то, что вы видите на странице.

1 голос
/ 09 марта 2012

Посмотрите на стиль для <a href="//plus.google.com/104629412415657030658" id="page-badge-border"></a> на android.com.У этого есть белая граница, которая покрывает серую границу значка.

...