Loper主题添加个性title提示,偶尔给我发现特效提示框蛮不错的,简单来说就是气泡提示美化框样式,所以决定手动添加Loper主题个性title提示,拽立网,其实很简单的不是用复杂,只要用心修改一下颜色代码就行了,如果感觉很麻烦也可以使用Wordpress Tooltips插件,今天我把Loper主题添加个性title提示方法分享给大家,请看以下操作!
添加前的效果图!
1.登陆你的后台管理,选择【外观】-【编辑】-【loper: 样式表 (style.css)?】
选择:你喜欢效果的代码添加进去:【4种效果颜色自己改默认黑白】
1.第一种个性title提示效果图:
第一种个性title提示代码:
/* 主题个性title提示1 */
#tooltip{color:#FFFFFF;text-align:center;position:absolute;z-index:999;display:none;background:black;font-size:12px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:0 0 3px black;-moz-box-shadow:0 0 3px #000000;-webkit-box-shadow:0 0 3px black;padding:3px 8px;}
2.第二种个性title提示效果图:
第二种个性title提示代码:
/* 主题title提示样式2 */
#tooltip{background:#000000;color:#FFFFFF;text-align:center;margin-right:10px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #000000;border:1px dashed #FFFFFF;padding:3px 8px;font-size:12px;}
3.第三种个性title提示效果图:
第三种个性title提示代码:
/* 主题个性title提示3 */
#tooltip{background:#000;color:#FFFFFF;text-align:center;padding:6px 0;position:absolute;z-index:9999;display:none;border-radius:3px;box-shadow:0 0 3px #000;padding:3px 8px;font-size:12px;text-shadow:none;}
#tooltip:before{position: absolute;width: 0;height: 0;line-height: 0;border: 6px dashed #000;top: -6px;left:15px;border-bottom-style: solid;border-top: none;border-left-color: transparent;border-right-color: transparent;content:''}
4.第四种个性title提示效果图:
第四种个性title提示代码:
/* 主题个性title提示4 */
#tooltip{background:#000000;color:#FFFFFF;text-align:center;margin-right:10px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #000000;border:1px dashed #FFFFFF;padding:3px 8px;font-size:12px;}
#tooltip:before{position: absolute;width: 0;height: 0;line-height: 0;border: 6px dashed #000;top: -6px;left:15px;border-bottom-style: solid;border-top: none;border-left-color: transparent;border-right-color: transparent;content:''}
5.登陆你的FTP工具,选择【Loper主题】-【/scripts/】-【loperjs.js】
用【Notepad++】工具打开【loperjs.js】文件直接搜索以下代码:
$(".searchfade").fadeOut("slow");});
在上面代码后面添加下面全部代码:
function hooktooltip() {
$('*').each(function(i){if(this.title){var aTitle=this.title;$(this).mouseover(function(e){this.title='';$('body').append('<div id="tooltip">'+aTitle+'</div>')
;$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px',opacity:"0.8"
}).show(250)
}).mousemove(function(e) {
$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px'
})}).mouseout(function() {
this.title=aTitle;$('#tooltip').remove()
}).mousemove(function(e) {
$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px'
})})}});}
hooktooltip();
不懂添加代码,那就下载我分享的【loperjs.js】文件!然后替换!
提示:CSS里面颜色代码随便修改你喜欢的,各有所爱!
提示:Loper主题专用代码,添加带其他主题自己研究,请先备份好文件!

版权声明:本站原创文章,于2015年09月12日,由 拽立网 发表,共 2620 字。
打赏



感觉还是没改之前好看些,但这些代码值得收藏。
@王桂明博客: 呵呵,这样才方便,一样的道理啊!颜色修改一下就行了!

管理员回复