изменить высоту Google Plus 1 кнопка - PullRequest
Новая
       5

изменить высоту Google Plus 1 кнопка

2 голосов
/ 26 января 2012

Я хотел бы знать, как изменить CSS размера кнопки Google +1 высотой (кнопка со счетчиком пузырьков на ней).

по умолчанию 60 пикселей, но мне нужно 70 пикселей

Дайте мне знать, пожалуйста

спасибо 

 <!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></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 = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Ответы [ 2 ]

1 голос
/ 28 января 2012

Изменить изображение нельзя, кроме того, что они разрешают настраивать на странице.

Но вы можете добавить 10px отступов вверху или внизу вашего div (или 5px top).5px снизу), который окружает <g:plusone.Таким образом, он будет лучше размещаться в вашей области контента с высоким разрешением 70px, и вы сможете выравнивать сверху, снизу или по центру.Мой пример центров расположен вертикально. 

<div style="padding:5px 0;">
  <g:plusone size="tall"></g:plusone>
</div>
0 голосов
/ 27 апреля 2016

Я знаю, что это старый пост, однако мне удалось обойти эту проблему в большинстве современных браузеров, используя преобразование в родительском div iFrame.Очевидно, вам нужно было бы преобразовать его равномерно, чтобы предотвратить деформацию G +, поэтому, возможно, потребуется уменьшить ширину данных, если элемент станет слишком широким.

Так как большую часть времени div будетотображаемый inline-block, установка источника преобразования где-нибудь вдоль дна предотвратит большинство проблем с выравниванием.

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

/* ID provided by Google in my example matches this format */
div[id^="___plusone_"] {
    /* Cross browser support for transform */
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);

    /* Cross browser support for transform origin */
    -moz-transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;

    /* Margin right is used here since origin is set to bottom left */
    margin-right: 10px;
}
...