2012-01-26 3 views
2

Я хотел бы знать, как изменить css размера кнопки google +1 с высоким уровнем (кнопка с счетчиком пузырьков на нем).изменить высоту google plus 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> 

ответ

1

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

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

<div style="padding:5px 0;"> 
    <g:plusone size="tall"></g:plusone> 
</div> 
0

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

Поскольку большую часть времени div будет отображаться встроенным блоком, установка источника трансформации где-то вдоль дна предотвратит большинство проблем выравнивания.

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

/* 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; 
} 
Смежные вопросы