WordPress美化:知更鸟Begin主题右侧按钮美化

2023年11月29日11:34:26 发表评论 热度3,095 ℃

近日去一些博客闲逛,发现他们的右侧滚动条按钮比知更鸟Begin主题自带的要好看,心里痒痒,在堆爱博客博主和爱都娱乐的帮助下,终于美化成功。

效果图

WordPress美化:知更鸟Begin主题右侧按钮美化

代码部署

把下面的代码复制,粘贴到:后台→外观→主题选项→定制风格→自定义样式

  1. /*右侧滚动条美化*/
  2. #scroll{width:32px;float:rightright;position:fixed;rightright:10px;bottombottom:50px;z-index:9999;}
  3. #scroll li a{font-size:16px;color:#fff;width:32px;height:32px;line-height:28px;text-align:center;vertical-align:middle;margin-top:4px;display:block;cursor:pointer;border:1px solid #ddd;border-radius:15px;box-shadow:0 1px 1px rgba(0,0,0,0.04);}
  4. #scroll li a:hover{background:#2f889a;color:#fff;border:1px solid #2f889a;transition:all .2s ease-in 0s;}
  5. .scroll-h{background-color:#ff5e5c !important;}
  6. .scroll-c{background-color:#24a5db !important;}
  7. .scroll-b{background-color:#ff9531 !important;}
  8. #gb2big5{background-color:#aec534 !important;}
  9. .qr{background-color:#4a4a4a !important;}
  10. .qqonline a{background:#39c!important;}
  11. @media screen and (min-width:900px){
  12. #scroll li a:hover{background:#2f889a;color:#fff;border:1px solid #2f889a;transition:all 0.2s ease-in 0s;}}
  13. .qr-img{position:fixed;background:#fff;bottombottom:50px;rightright:50px;max-width:300px;z-index:9999;display:none;border-radius:4px;padding:10px 10px 2px 10px;animation:fade-in;animation-duration:0.5s;-webkit-animation:fade-in 0.5s;border:1px solid #ddd;box-shadow:0 1px 1px rgba(0,0,0,0.05);}
  14. #output img{position:absolute;top:72px;rightright:72px;width:25px;height:25px;}
  15. .qr .fa-qrcode{font-size:20px !important;line-height:32px !important;}
  16. .qr-img .arrow{position:absolute;font-size:26px;bottombottom:2px;}
  17. .arrow-y{color:#fff;rightright:-8px;}
  18. .arrow-z{color:#c6c6c6;rightright:-9px;}
  19. #output td{border:none;}
  20. #output td{padding:0;}
  21. .page-template-template-blog
  22. #scroll li a.scroll-c,.page-template-template-code
  23. #scroll li a.scroll-c,.page-template-template-links
  24. #scroll li a.scroll-c,.page-template-template-archives
  25. #scroll li a.scroll-c,.page-template-template-cms
  26. #scroll li a.scroll-c,.page-template-template-hot
  27. #scroll li a.scroll-c,.page-template-template-tag
  28. #scroll li a.scroll-c,.page-template-template-tougao
  29. #scroll li a.scroll-c,.page-template-template-contact
  30. #scroll li a.scroll-c,.page-template-template-message
  31. #scroll li a.scroll-c,.page-template-template-baidu
  32. #scroll li a.scroll-c{display:none;}

由于知更鸟Begin主题更新为LTS后,添加了搜索栏目图标,需添加一下css,这样搜索图标才能上色。

  1. #scroll li a {
  2.     background: #2f9a3c;
  3. }

瓜皮猪

发表评论

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