【WordPress 教程】知更鸟主题美化代码使用

2019年4月17日07:48:02 1 2,407
摘要

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

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

【使用方法】

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

【CSS代码】

页脚彩色横条
  1. #footer-widget-box {background#555 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 100%;}
顶部导航渐变色
  1. #header-top {
  2.     background: linear-gradient(-30deg,rgba(255,213,60,.71) 10%,rgba(161,230,243,.78)) no-repeat;
  3.     border-bottom1px solid #dedede;}
面包屑导航样式
  1. .breadcrumb{border-width:1px;
  2. background-color:rgb(255, 255, 255);
  3. margin-Bottom:5px;border-radius:2px;margin-top:5px;}
顶部菜单样式
  1. .shen{background:#b485e2;color:#fff;padding:2px 8px;border-radius:2px}.wu{background:#74d62f;color:#fff;padding:2px 8px;border-radius:2px}
修改文章底部分享点赞颜色
  1. .social-main a {
  2.     color#fff;
  3. }
  4. .like a {
  5.     background#f40000;
  6.     border1px solid #f40000;
  7. }
  8. .share-s a {
  9.     background#dd9933;
  10.     border1px solid #dd9933;
  11. }
  12. .social-main i {
  13.     color#fff;
  14. }
  15. .shang-p a {
  16.     background#7ab951;
  17.     border1px solid #7ab951;
  18. }
  19. .social-main a:hover {
  20.     color#fff;
  21.     background#666;
  22. }
  23. .like a:hover, .share-s a:hover, .shang-p a:hover {
  24.     border1px solid #666;
  25. }
文章列表阅读全文按钮美化
  1. .entry-more a {
  2.     opacity:0
  3. }
  4. .post:hover .entry-more a {
  5.     rightright:0;
  6.     opacity:1;
  7. }
  8. .post {
  9.     transition:all 0.3s ease 0s;
  10. }
  11. .post:hover {
  12.     transform:translateY(-3px);
  13.     z-index:1;
  14.     -webkit-box-shadow:0 15px 32px rgb(175,135,255)!important;
  15. }
鼠标悬停抖动
  1. img:hover {
  2. -webkit-animation:shenwu 1s .1s ease both;
  3. -moz-animation:tada 1s .1s ease both;
  4. }
  5. @-webkit-keyframes shenwu {
  6. 0% {
  7. -webkit-transform:scale(1)
  8. }
  9. 10%, 20% {
  10. -webkit-transform:scale(0.8) rotate(-2deg)
  11. }
  12. 30%, 50%, 70%, 90% {
  13. -webkit-transform:scale(1.1) rotate(2deg)
  14. }
  15. 40%, 60%, 80% {
  16. -webkit-transform:scale(1.1) rotate(-2deg)
  17. }
  18. 100% {
  19. -webkit-transform:scale(1) rotate(0)
  20. }

发表评论

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

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

    • 倚楼听风雨 倚楼听风雨

      转载请注明出处!