conpertura conpertura - 1 month ago 7
CSS Question

Modify CSS for WordPress.com Subscribe Button for self-hosted Wordpress sites

I have used this instruction to create a button with JavaScript and CSS that looks like the Subscribe button on Wordpress.com pages.
But instead of the Subscribe button I just use text.

I'm looking for support to modify the CSS code:

<?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>


Text looks like this (lower right corner):
sacriba.bplaced.net


  1. Why is the orange text aligned left? I suspect some values for margin or padding are the cause but I cannot identify them.

  2. How can I change the text to centered alignment (within the grey area)?

  3. The CSS seems rather bloated for my purpose. Are there any selectors that are not needed any longer?



Please mention the question number before your answer for more efficient reading.

Answer

Answer for your 1 and 2: Your a tag should be a block.
Answer for 3: Remove padding from bitsubscriber and adjust #bitsubscriber p a margin to your liking.

Comments