typecho1.3.0关于编辑器页面自定义字段样式错位解决方案
typecho1.3.0版本后台css样式出现了部分修改与不同，使用下面的方法即可解决自定义字段当中的描述信息间距问题。// 注册插件的方式，把下面的代码添加到functions.php文件中 Typecho_Plugin::factory('admin/write-post.php')->bottom = array('editora', 'reset'); Typecho_Plugin::factory('admin/write-page.php')->bottom = array('editora', 'reset'); // 重置编辑器按钮 class editora{ public static function reset() { echo ' '; } }
typecho1.3.0关于文章编辑器按钮显示不全解决方法
typecho1.3.0版本后台css样式出现了部分修改与不同，这就导致以前的旧主题多多少少会出现样式错乱问题。通过下面的方法至少可以让被遮挡的按钮显示完全，当然方法不止这一种。// 注册插件的方式，把下面的代码添加到functions.php文件中 Typecho_Plugin::factory('admin/write-post.php')->bottom = array('editor', 'reset'); Typecho_Plugin::factory('admin/write-page.php')->bottom = array('editor', 'reset'); // 重置编辑器按钮 class editor{ public static function reset() { echo ' '; } }
可变透明度返回顶部代码，如果向下滚动超过1200像素，按钮的透明度会下降，减少视觉干扰，更便于浏览内容主体，非常贴心的用户体验，兼容主流浏览器js代码// JavaScript Document (function($){ var goToTopTime; $.fn.goToTop=function(options){ var opts = $.extend({},$.fn.goToTop.def,options); var $window=$(window); $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix //$(this).hide(); var $this=$(this); clearTimeout(goToTopTime); goToTopTime=setTimeout(function(){ var controlLeft; if ($window.width() > opts.pageHeightJg * 2 + opts.pageWidth) { controlLeft = ($window.width() - opts.pageWidth) / 2 + opts.pageWidth + opts.pageWidthJg; }else{ controlLeft = $window.width()- opts.pageWidthJg-$this.width(); } var cssfixedsupport=$.browser.msie && parseFloat($.browser.version) < 7;//判断是否ie6 var controlTop=$window.height() - $this.height()-opts.pageHeightJg; controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop; var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false; if (shouldvisible){ $this.stop().show(); }else{ $this.stop().hide(); } $this.css({ position: cssfixedsupport ? 'absolute' : 'fixed', top: controlTop, left: controlLeft }); },30); $(this).click(function(event){ $body.stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration); $(this).blur(); event.preventDefault(); event.stopPropagation(); }); }; $.fn.goToTop.def={ pageWidth:960,//页面宽度 pageWidthJg:2 ,//按钮和页面的间隔距离 pageHeightJg:100,//按钮和页面底部的间隔距离 startline:300,//出现回到顶部按钮的滚动条scrollTop距离 duration:500,//回到顶部的速度时间 targetObg:"html"//目标位置,用body太恶心了，回不到最上面去 }; })(jQuery); $(function(){ $('').appendTo("body"); });我在原来的css修改了一点点，各位可以在原来的代码中重新修改。.cd-top { z-index:9999; display: inline-block; border-radius: 3px; height: 38px; width: 38px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(232, 98, 86, 0.8) url(https://yfch.top/img/top.png) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 0.85; } .cd-top.cd-is-visible:hover { /* the button becomes visible */ visibility: visible; background: #8BC34A url(https://yfch.top/img/top.png) no-repeat center 50%; opacity: 1; } .cd-top.cd-fade-out { /* 如果用户继续向下滚动,这个按钮的透明度会变得更低 */ opacity: .5; } .no-touch .cd-top:hover { background-color: #e86256; opacity: 1; } @media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; } } @media only screen and (min-width: 1024px) { .cd-top { height: 38px; width: 38px; right: 30px; bottom: 30px; } }Top使用方法js 引用到header.php的标签前面css 添加到 style.css 文件里面HTML 添加到 header.php 的标签的后面的前面其他本来这个按钮是会被其他div模块遮盖的。怎样设置一个DIV在所有层的最上层，最上层DIV，其实很简单，只需要在这个DIV上使用这个样式即可，z-index:99999; 文章来源于:https://www.yvii.cn/archives/1928.html
一个代码是扒自虎绿林中的艾特功能，其实简单的修改就可以实现其它快捷功能。html快捷功能按钮事件绑定 @Ta js代码
CSS代码.rantangle { width:100%; box-sizing:border-box; text-align:center; } .rantangle button { width:20%; border:0; border-radius:5px; color:#FFF; padding:10px 0; text-align:center; text-decoration:none; cursor:pointer; } .btnleft { background:linear-gradient(-59deg,transparent 21px,#d12826 0) top right; background-size:100% 100%; background-repeat:no-repeat; } .btnright { background:linear-gradient(120deg,transparent 21px,#04A95B 0) top left; background-size:100% 100%; background-repeat:no-repeat; margin-left:-25px; } html代码 按钮1 按钮2 截图
WordPress侧边栏如何实现一图三按钮的效果
可能有的人不太明白什么是一图三按钮的效果，其实就是在侧边栏某一个文本工具中显示有一张图片和三个链接按钮，具体效果看下图一图三按钮效果，或见下图所示：其实这个一图三按钮效果，一般人还真用不到，所以我就没有整合到Nana主题中，但是一直都有博主来问如何实现。虽然每次都说这个是比较简单的代码，直接浏览器中查看元素复制相应的 HTML 代码及 CSS 代码即可，但是还是有很多人不太懂得如何下手去折腾，所以今天就特意把它写成教程，以便让更多喜欢这个效果的博主们能够用上它。侧边栏实现一图三按钮效果步骤1、将以下 CSS 代码添加到所使用主题的 style.css 文件中#update_version img{margin:5px 0 15px} #update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff} .blog_link{background-color:#2ba9fa} .blog_link,.cms_link{float:left;margin-right:5%} .cms_link{background-color:#ff6969} .grid_link{float:left;background-color:#70c041} 2、登录站点后台 >> 外观 >> 小工具 >> 将『文本』或html代码 小工具添加到指定侧边栏中。3、接着输入标题（可选，可不输入），并将文本小工具编辑框切换到文本格式，然后将以下代码添加进去并保存即可。代码如下： 发送邮件网址导航关于我们 点击在线投稿 投稿邮箱：123456@qq.com 交流 QQ：123456 说明：其他代码不用修改，只需将代码中的链接名称及链接地址等内容修改成自己想要的名称及地址即可。玩转网已经根据以上教程在侧边栏实现了一图三按钮的效果，具体效果请移步玩转网首页侧边栏这个一图三按钮的效果，不单单适用于 WordPress，也适用于 zblogPHP 站点的侧边栏，更是适用于其他程序所见的站点侧边栏。当然，如果添加到不到侧边栏的地方应该也是可以，具体效果请自行测试和修改。
typecho向后台富文本编辑器添加自定义按钮
纯CSS3制作的圆形修边渐变按钮动画特效源码
纯CSS3制作的圆形修边渐变按钮动画特效源码html代码 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 Click!查看更多 查看更多 查看更多 查看更多 查看更多 CSS样式body { background: #e0e5ec; } h1 { position: relative; text-align: center; color: #353535; font-size: 50px; font-family: "Cormorant Garamond", serif; } p { font-family: 'Lato', sans-serif; font-weight: 300; text-align: center; font-size: 18px; color: #676767; } .frame { width: 90%; margin: 40px auto; text-align: center; } button { margin: 20px; } .custom-btn { width: 130px; height: 40px; color: #fff; border-radius: 50px; padding: 10px 25px; font-family: 'Lato', sans-serif; font-weight: 500; font-size: 16px; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5), inset -7px -7px 10px 0px rgba(0,0,0,.1),7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); text-shadow: 2px 2px 3px rgba(255,255,255,.5), -4px -4px 6px rgba(116, 125, 136, .2); outline: none; } /* 1 */ .btn-1 { color: rgba(0,3,255,.5); background-color: #b2d8ff; border: none; } .btn-1:hover { color: rgba(0,3,255, .7); background: linear-gradient(0deg, rgba(0,3,255,.5) 0%, rgba(2,126,251,.5) 100%); } /* 2 */ .btn-2 { background-color: #e8d1ff; color: rgba(96,9,240, .5); border: none; } .btn-2:before { height: 0%; width: 2px; } .btn-2:hover { box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .5), inset -4px -4px 6px 0 rgba(255,255,255,.2), inset 4px 4px 6px 0 rgba(0, 0, 0, .2); } /* 3 */ .btn-3 { color: rgba(2,126,251,1); background: rgba(118,174,241,1); width: 130px; height: 40px; line-height: 42px; padding: 0; border: none; } .btn-3 span { position: relative; display: block; width: 100%; height: 100%; } .btn-3:before, .btn-3:after { position: absolute; content: ""; right: 0; top: 0; background: rgba(2,126,251,1); transition: all 0.3s ease; } .btn-3:before { height: 0%; width: 2px; } .btn-3:after { width: 0%; height: 2px; } .btn-3:hover{ background: transparent; box-shadow: none; } .btn-3:hover:before { height: 100%; } .btn-3:hover:after { width: 100%; } .btn-3 span:hover{ color: rgba(2,126,251,1); } .btn-3 span:before, .btn-3 span:after { position: absolute; content: ""; left: 0; bottom: 0; background: rgba(2,126,251,1); transition: all 0.3s ease; } .btn-3 span:before { width: 2px; height: 0%; } .btn-3 span:after { width: 0%; height: 2px; } .btn-3 span:hover:before { height: 100%; } .btn-3 span:hover:after { width: 100%; } /* 4 */ .btn-4 { color: #03c8a8; background: #96e4df; line-height: 42px; padding: 0; border: none; } .btn-4:hover{ background-color: #89d8d3; } /* 5 */ .btn-5 { border: none; color: #ff84c1; background-color: #ffc1e0; } .btn-5:hover { color: #f0094a; background: transparent; box-shadow:none; } .btn-5:before, .btn-5:after{ content:''; position:absolute; top:0; right:0; height:2px; width:0; background: #f0094a; box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003, 4px 4px 5px 0px #0002; transition:400ms ease all; } .btn-5:after{ right:inherit; top:inherit; left:0; bottom:0; } .btn-5:hover:before, .btn-5:hover:after{ width:100%; transition:800ms ease all; } /* 6 */ .btn-6 { color: rgba(234,76,137,1); background: rgb(247,150,192); line-height: 42px; padding: 0; border: none; } .btn-6 span { position: relative; display: block; width: 100%; height: 100%; } .btn-6:before, .btn-6:after { position: absolute; content: ""; height: 0%; width: 1px; box-shadow: -1px -1px 20px 0px rgba(255,255,255,1), -4px -4px 5px 0px rgba(255,255,255,1), 7px 7px 20px 0px rgba(0,0,0,.4), 4px 4px 5px 0px rgba(0,0,0,.3); } .btn-6:before { right: 0; top: 0; transition: all 500ms ease; } .btn-6:after { left: 0; bottom: 0; transition: all 500ms ease; } .btn-6:hover{ background: transparent; color: #76aef1; box-shadow: none; } .btn-6:hover:before { transition: all 500ms ease; height: 100%; } .btn-6:hover:after { transition: all 500ms ease; height: 100%; } .btn-6 span:before, .btn-6 span:after { position: absolute; content: ""; box-shadow: -1px -1px 20px 0px rgba(255,255,255,1), -4px -4px 5px 0px rgba(255,255,255,1), 7px 7px 20px 0px rgba(0,0,0,.4), 4px 4px 5px 0px rgba(0,0,0,.3); } .btn-6 span:before { left: 0; top: 0; width: 0%; height: .5px; transition: all 500ms ease; } .btn-6 span:after { right: 0; bottom: 0; width: 0%; height: .5px; transition: all 500ms ease; } .btn-6 span:hover:before { width: 100%; } .btn-6 span:hover:after { width: 100%; } /* 7 */ .btn-7 { background: #ffbf7f; line-height: 42px; color: darkorange; padding: 0; border: none; } .btn-7 span { position: relative; display: block; width: 100%; height: 100%; } .btn-7:before, .btn-7:after { position: absolute; content: ""; right: 0; bottom: 0; background: rgba(251,75,2,1); box-shadow: -7px -7px 20px 0px rgba(255,255,255,.9), -4px -4px 5px 0px rgba(255,255,255,.9), 7px 7px 20px 0px rgba(0,0,0,.2), 4px 4px 5px 0px rgba(0,0,0,.3); transition: all 0.3s ease; } .btn-7:before{ height: 0%; width: 2px; } .btn-7:after { width: 0%; height: 2px; } .btn-7:hover{ color: rgba(251,75,2,1); background: transparent; } .btn-7:hover:before { height: 100%; } .btn-7:hover:after { width: 100%; } .btn-7 span:before, .btn-7 span:after { position: absolute; content: ""; left: 0; top: 0; background: rgba(251,75,2,1); box-shadow: -7px -7px 20px 0px rgba(255,255,255,.9), -4px -4px 5px 0px rgba(255,255,255,.9), 7px 7px 20px 0px rgba(0,0,0,.2), 4px 4px 5px 0px rgba(0,0,0,.3); transition: all 0.3s ease; } .btn-7 span:before { width: 2px; height: 0%; } .btn-7 span:after { height: 2px; width: 0%; } .btn-7 span:hover:before { height: 100%; } .btn-7 span:hover:after { width: 100%; } /* 8 */ .btn-8 { background-color: #d9d0f5; color: #c797eb; line-height: 42px; padding: 0; border: none; } .btn-8 span { position: relative; display: block; width: 100%; height: 100%; } .btn-8:before, .btn-8:after { position: absolute; content: ""; right: 0; bottom: 0; background: #c797eb; transition: all 0.3s ease; } .btn-8:before{ height: 0%; width: 2px; } .btn-8:after { width: 0%; height: 2px; } .btn-8:hover:before { height: 100%; } .btn-8:hover:after { width: 100%; } .btn-8:hover{ background: transparent; } .btn-8 span:hover{ color: #c797eb; } .btn-8 span:before, .btn-8 span:after { position: absolute; content: ""; left: 0; top: 0; background: #c797eb; transition: all 0.3s ease; } .btn-8 span:before { width: 2px; height: 0%; } .btn-8 span:after { height: 2px; width: 0%; } .btn-8 span:hover:before { height: 100%; } .btn-8 span:hover:after { width: 100%; } /* 9 */ .btn-9 { border: none; transition: all 0.3s ease; overflow: hidden; color: #1fd1f9; color: #0cbcff; } .btn-9:after { position: absolute; content: " "; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #5fe0fd; transition: all 0.3s ease; } .btn-9:hover { background: transparent; box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5), inset 4px 4px 6px 0 rgba(116, 125, 136, .3); color: #fff; } .btn-9:hover:after { -webkit-transform: scale(2) rotate(180deg); transform: scale(2) rotate(180deg); box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5), inset 4px 4px 6px 0 rgba(116, 125, 136, .3); } /* 10 */ .btn-10 { background: lightblue; color: #60abf7; border: none; transition: all 0.3s ease; overflow: hidden; } .btn-10:after { position: absolute; content: " "; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; transition: all 0.3s ease; -webkit-transform: scale(.1); transform: scale(.1); } .btn-10:hover { color: #fff; border: none; background: transparent; } .btn-10:hover:after { background: #7fbfff; -webkit-transform: scale(1); transform: scale(1); } /* 11 */ .btn-11 { border: none; background: rgb(251,33,117); background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%); background: #f7d0f5; color: rgba(251,33,117,.5); overflow: hidden; } .btn-11:hover { text-decoration: none; color: #fff; } .btn-11:before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: shiny-btn1 3s ease-in-out infinite; } .btn-11:hover{ opacity: .7; } .btn-11:active{ box-shadow: 4px 4px 6px 0 rgba(255,255,255,.3), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.2), inset 4px 4px 6px 0 rgba(0, 0, 0, .2); } @-webkit-keyframes shiny-btn1 { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } /* 12 */ .btn-12{ position: relative; right: 20px; bottom: 20px; border:none; box-shadow: none; width: 130px; height: 40px; line-height: 42px; -webkit-perspective: 230px; perspective: 230px; } .btn-12 span { background: #7fbfff; color: #3b97f3; display: block; position: absolute; width: 130px; height: 40px; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); border-radius: 50px; margin:0; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; } .btn-12 span:nth-child(1) { box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 50% -20px; -moz-transform-origin: 50% 50% -20px; transform-origin: 50% 50% -20px; } .btn-12 span:nth-child(2) { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: 50% 50% -20px; -moz-transform-origin: 50% 50% -20px; transform-origin: 50% 50% -20px; } .btn-12:hover span:nth-child(1) { box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); } .btn-12:hover span:nth-child(2) { background: transparent; color: transparent; box-shadow: none; text-shadow: none; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); } /* 13 */ .btn-13 { color: lightseagreen; background-color: #89d8d3; border: none; z-index: 1; } .btn-13:after { position: absolute; content: ""; width: 100%; height: 0; bottom: 0; left: 0; z-index: -1; border-radius: 50px; background-color: #4dccc6; background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%); box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), inset -7px -7px 10px 0px rgba(0,0,0,.1), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); text-shadow: 0px 0px 6px rgba(255,255,255,.3), -4px -4px 6px rgba(116, 125, 136, .2); transition: all 0.3s ease; } .btn-13:hover { } .btn-13:hover:after { top: 0; height: 100%; } .btn-13:active { top: 2px; } /* 14 */ .btn-14 { background: #ffff9e; color: #ffb64d; border: none; z-index: 1; } .btn-14:after { position: absolute; content: ""; width: 100%; height: 0; top: 0; left: 0; z-index: -1; border-radius: 50px; background-color: #ffff8a; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), inset -7px -7px 10px 0px rgba(0,0,0,.1), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); text-shadow: 0px 0px 6px rgba(255,255,255,.3), -4px -4px 6px rgba(116, 125, 136, .2); transition: all 0.3s ease; } .btn-14:hover { color: #ffb64d; } .btn-14:hover:after { top: auto; bottom: 0; height: 100%; } .btn-14:active { top: 2px; } /* 15 */ .btn-15 { background: #c68eff; color: #a453f5; border: none; z-index: 1; } .btn-15:after { position: absolute; content: ""; width: 0; height: 100%; top: 0; right: 0; z-index: -1; background-color: #7f7fff; border-radius: 50px; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); transition: all 0.3s ease; } .btn-15:hover { color: #4c4cf1; } .btn-15:hover:after { left: 0; width: 100%; } .btn-15:active { top: 2px; } /* 16 */ .btn-16 { border: none; color: #aaa; } .btn-16:after { position: absolute; content: ""; width: 0; height: 100%; top: 0; left: 0; direction: rtl; z-index: -1; border-radius: 50px; box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001; transition: all 0.3s ease; } .btn-16:hover { color: #bbb; } .btn-16:hover:after { left: auto; right: 0; width: 100%; } .btn-16:active { top: 2px; }