本博知更鸟begin主题美化教程

2019年4月17日20:28:44 3 115

本博知更鸟begin主题美化教程

wordpress主题有很多,但是真正符合自己审美标准的只手可数。所以,大多数童鞋安装主题后都会进行美化来张扬个性、突出自我。关于begin主题的美化太多了,建议大家根据自己的喜好来折腾。毕竟,适合自己的才是最好的!

提示:修改中文主题模板,建议使用专门的编辑工具,比如:Notepad++(免费),绝不能用操作系统自带的记事本编辑模版文件,否则会造成模板错位,中文模版编码为:UTF-8 无BOM(无签名)。

使用方法:知更鸟主题不用修改任何文件,将以下css代码添加到主题选项-定制风格-自定义样式中即可,或者自行添加到主题css文件中。

页脚彩色横条

#footer-widget-box {background: #555 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 100%;}

顶部导航渐变色

#header-top {
    background: linear-gradient(-30deg,rgba(255,213,60,.71) 10%,rgba(161,230,243,.78)) no-repeat;
    border-bottom: 1px solid #dedede;}

面包屑导航样式

.breadcrumb{border-width:1px;
background-color:rgb(255, 255, 255);
margin-Bottom:5px;border-radius:2px;margin-top:5px;}

顶部菜单样式

.shen{background:#b485e2;color:#fff;padding:2px 8px;border-radius:2px}.wu{background:#74d62f;color:#fff;padding:2px 8px;border-radius:2px}

修改文章底部分享点赞颜色

.social-main a {
    color: #fff;
}
.like a {
    background: #f40000;
    border: 1px solid #f40000;
}
.share-s a {
    background: #dd9933;
    border: 1px solid #dd9933;
}
.social-main i {
    color: #fff;
}
.shang-p a {
    background: #7ab951;
    border: 1px solid #7ab951;
}
.social-main a:hover {
    color: #fff;
    background: #666;
}
.like a:hover, .share-s a:hover, .shang-p a:hover {
    border: 1px solid #666;
}

文章列表阅读全文按钮美化

.entry-more a {
    opacity:0
}
.post:hover .entry-more a {
    rightright:0;
    opacity:1;
}
.post {
    transition:all 0.3s ease 0s;
}
.post:hover {
    transform:translateY(-3px);
    z-index:1;
    -webkit-box-shadow:0 15px 32px rgb(175,135,255)!important;
}

鼠标悬停抖动

img:hover {
-webkit-animation:shenwu 1s .1s ease both;
-moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes shenwu {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.8) rotate(-2deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(2deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-2deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  2   博主  1

    • avatar 心语难诉 0

      博客的内容真充实

      • avatar 青山 3

        你可终于更新了

          • avatar shenwu Admin

            @青山 前段时间上了阿里云香港轻量服务器的车,忙着折腾呢!