修改CSS为WordPress.com订阅按钮自托管Wordpress网站
Modify CSS for WordPress.com Subscribe Button for self-hosted Wordpress sites
我使用这个指令用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
- 为什么橙色文本向左对齐?我怀疑一些值的边距或填充是原因,但我不能识别它们。
- 如何将文本更改为居中对齐(在灰色区域内)?
- 对于我的目的,CSS看起来相当臃肿。是否有不再需要的选择器?
回答你的1和2:你的标签应该包含属性display: block以及text-align: center。
答案3:调整#bitsubscriber p a边距来控制文本的大小
相关文章:
- Ajaxify Wordpress网站与社交插件
- 鼠标光标-用于wordpress网站
- 在向下滚动JS/HTML/CSS wordpress网站时替换徽标图像
- Sombody在wordpress网站中注入了一些链接.可能是什么起源?这是怎么发生的
- 在Wordpress网站的图像点击上播放随机声音
- 我想每隔10秒刷新一个wordpress网站
- 如何将javascript添加到wordpress网站
- 如何禁用右键单击WordPress网站
- 使用谷歌分析'Wordpress网站的用户ID功能
- wordpress和packery.js的集成问题,但适用于非wordpress网站
- 如何解决wordpress网站的速度问题
- 用JS更改Wordpress网站上的按钮
- 从Wordpress网站构建Cordova应用程序需要哪些文件
- 使用 HTTP 请求对 WordPress 网站进行更改
- 在WordPress网站上获取推文
- 如何将JS添加到我的WordPress网站
- 我的谷歌地图自定义标记不会显示在我的WordPress网站中
- 我想在我的WordPress网站上使用计数器.js但它显示错误
- 将自定义标记添加到自定义样式的 Google Maps API v3 for Wordpress 网站
- 我的Wordpress网站上的所有jQuery脚本都无法正常工作