Блог

Я использовал эту инструкцию для создания кнопки с JavaScript и CSS, которая выглядит как кнопка подписки на WordPress.com страницы. Но вместо кнопки Подписаться я просто использую текст.

Я ищу поддержку для изменения CSS-кода:

  <?php wp_footer(); ?>
<style type="text/css" media="screen">
 #bit, #bit * {}
 #bit {
      bottom: -300px;
      font: 13px Helvetica,sans-serif;
      position: fixed;
      right: 10px;
      z-index: 999999;
      width: 230px;
  }
#bit a.bsub {
      background-color: #464646;
      background-image: -moz-linear-gradient(center bottom , #3F3F3F, #464646 5px);
      background: -webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#464646));
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#3F3F3F', endColorstr='#464646');

      border: 0 none;
      box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
      color: #CCCCCC;
      display: block;
      float: right;
      font: 13px/28px Helvetica,sans-serif;
      letter-spacing: normal;
      outline-style: none;
      outline-width: 0;
      overflow: hidden;
      padding: 0 10px 0 8px;
      text-decoration: none !important;
      text-shadow: 0 -1px 0 #444444;
  }
#bit a.bsub {
      border-radius: 2px 2px 0 0;
  }
#bit a.bsub span {
      background-attachment: scroll;
      background-clip: border-box;
      background-color: transparent;
      background-image: url("http://sacriba.bplaced.net/wordpress/wp-content/uploads/2014/07/Favicon_small.png");
      background-origin: padding-box;
      background-position: 2px 3px;
      background-repeat: no-repeat;
      background-size: 30% auto;
      padding-left: 18px;
  }
#bit a:hover span, #bit a.bsub.open span {
      /*background-position: 0 -117px;*/
      color: #FFFFFF !important;
  }
#bit a.bsub.open {
      background: none repeat scroll 0 0 #333333;
  }
#bitsubscribe {
      background: none repeat scroll 0 0 #464646;
      border-radius: 2px 0 0 0;
      color: #FFFFFF;
      margin-top: 27px;
      padding: 15px;
      width: 200px;
      float: right;
      margin-top: 0;
  }

div#bitsubscribe.open {
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  }

  #bitsubscribe div {
      overflow: hidden;
  }

  #bit h3, #bit #bitsubscribe h3 {
      color: #fff;
      font-family: Helvetica,Arial,sans-serif;
      font-size: 20px;
      font-weight: 300;
      margin: 0 0 0.5em !important;
      text-align: center;
      text-shadow: 0 1px 0 #333333;
  }

#bit #bitsubscribe p {
      font: 300 15px/1.3em Helvetica,Arial,sans-serif;
      margin: 0 0 1em;
      text-shadow: 0 1px 0 #333333;
  }

  #bitsubscribe p a {
      margin: 20px 0 0;
      color: #FF7A3D;
      display: block;
  }

  #bit #bitsubscribe p.bit-follow-count {
      font-size: 13px;
  }
#bitsubscribe.open {
      display: block;
  }
#bitsubscribe #bsub-credit {
      border-top: 1px solid #3C3C3C;
      font: 11px Helvetica,sans-serif;
      margin: 0 0 -15px;
      padding: 7px 0;
      text-align: center;
  }
#bitsubscribe #bsub-credit a {
      background: none repeat scroll 0 0 transparent;
      color: #AAAAAA;
      text-decoration: none;
      text-shadow: 0 1px 0 #262626;
  }
#bitsubscribe #bsub-credit a:hover {
      background: none repeat scroll 0 0 transparent;
      color: #FFFFFF;
  }
</style>
<script type="text/javascript" charset="utf-8">
  jQuery.extend(jQuery.easing, {
      easeOutCubic: function (x, t, b, c, d) {
          return c * ((t = t / d - 1) * t * t   1)   b;
      }
  });
  jQuery(document).ready(function () {
      var isopen = false,
          bitHeight = jQuery('#bitsubscribe').height();
      setTimeout(function () {
          jQuery('#bit').animate({
              bottom: '-'   bitHeight - 30   'px'
          }, 200);
      }, 300);
      jQuery('#bit a.bsub').click(function () {
          if (!isopen) {
              isopen = true;
              jQuery('#bit a.bsub').addClass('open');
              jQuery('#bit #bitsubscribe').addClass('open')
              jQuery('#bit').stop();
              jQuery('#bit').animate({
                  bottom: '0px'
              }, {
                  duration: 400,
                  easing: "easeOutCubic"
              });
          } else {
              isopen = false;
              jQuery('#bit').stop();
              jQuery('#bit').animate({
                  bottom: '-'   bitHeight - 30   'px'
              }, 200, function () {
                  jQuery('#bit a.bsub').removeClass('open');
                  jQuery('#bit #bitsubscribe').removeClass('open');
              });
          }
      });
  });
</script>
<div id="bit" class="">
<a class="bsub" href="javascript:void(0)"><span id='bsub-text'>Scroll</span></a>
<div id="bitsubscribe">
<p><a href="#">Raufscrollen</a></p>
<p><a href="#showcategorylist">Zur Artikelliste</a></p>
</div>
</div>
</body>
</html>
  

Текст выглядит следующим образом (нижний правый угол):
sacriba.bplaced.net

1. Почему оранжевый текст выровнен по левому краю? Я подозреваю, что причиной являются некоторые значения полей или отступов, но я не могу их идентифицировать.
2. Как я могу изменить выравнивание текста по центру (в серой области)?
3. CSS кажется довольно раздутым для моей цели. Есть ли какие-либо селекторы, которые больше не нужны?

Пожалуйста, укажите номер вопроса перед вашим ответом для более эффективного чтения.

Ответ на ваши вопросы 1 и 2: Ваш тег должен содержать свойства display: block, а также text-align: center.
Ответ на 3: Отрегулируйте поле #bitsubscriber p по своему вкусу, чтобы контролировать размер текста.