WordPress.com 용 CSS 수정 자체 호스팅 된 Wordpress 사이트 용 구독 버튼

Question

this instruction을 사용하여 JavaScript 및 Wordpress.com 페이지의 가입 버튼처럼 보이는 버튼이있는 버튼을 만들었습니다. 구독 버튼 대신 텍스트 만 사용합니다.

<?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. 왜 오렌지 텍스트를 정렬 왼쪽

   나는 CSS 코드를 수정하는 지원 찾고 있어요? 나는 마진이나 패딩의 일부 값이 원인이라고 생각하지만 나는 그것을 식별 할 수 없다.

2. 텍스트를 가운데 정렬로 변경하려면 어떻게합니까 (회색 영역 내에서)?
3. CSS는 제 목적을 위해 오히려 부풀어 오르게 보입니다. 더 이상 필요하지 않은 셀렉터가 있습니까?

보다 효율적인 독서를 위해 대답 앞에 질문 번호를 적어주십시오.

Answer 1

1 및 2에 대한 답변 : 태그에는 display : block 및 text-align : center 속성이 있어야합니다.
3에 대한 답변 : #bitsubscriber p를으로 조정하여 텍스트의 크기를 조정할 수 있습니다.