知更鸟主题右下角滚屏快捷方式美化

  • A+
所属分类:WordPress

知更鸟主题右下角滚屏快捷方式美化

近日,去一些博客闲逛,发现他们的右侧滚动条按钮比知更鸟Begin主题自带的要好看,最后在【99八十一】博客成功扒取代码,美化成功,版本以Begin LTS版本为例。效果如下图:

知更鸟主题右下角滚屏快捷方式美化

第一步,Style.css里找到 /** 滚屏 **/

并查找以下两段代码:

  1. #scroll li a {
  2.     background: #fff;
  3.     font-size: 16px;
  4.     color: #777;
  5.     width: 32px;
  6.     height: 32px;
  7.     line-height: 28px;
  8.     text-align: center;
  9.     vertical-align: middle;
  10.     margin-top: 4px;
  11.     display: block;
  12.     cursor: pointer;
  13.     background: rgba(2552552550.6);
  14.     border: 1px solid #ddd;
  15.     border-radius: 2px;
  16.     box-shadow: 0 1px 1px rgba(0000.04);
  17. }
  1. @media screen and (min-width: 900px) {
  2.     #scroll li a:hover {
  3.     background: #3690cf;
  4.     color: #fff;
  5.     border: 1px solid #3690cf;
  6.     transition: all 0.2s ease-in 0s;
  7. }

将其修改为:

  1. #scroll li a {
  2.     font-size: 16px;
  3.     color: #f8f8f8;
  4.     width: 32px;
  5.     height: 32px;
  6.     line-height: 28px;
  7.     text-align: center;
  8.     vertical-align: middle;
  9.     margin-top: 4px;
  10.     display: block;
  11.     cursor: pointer;
  12.     border: 1px solid #ddd;
  13.     border-radius: 20px;
  14.     box-shadow: 0 1px 1px rgba(0000.04);
  15. }
  16. .scroll-home {
  17.     background-color: #ff9531;
  18. }
  19. .scroll-h {
  20.     background-color: #ff5e5c;
  21. }
  22. .scroll-c {
  23.     background-color: #24a5db;
  24. }
  25. .scroll-b {
  26.     background-color: #ff9531;
  27. }
  28. .qq-mobile {
  29.     background-color: #fffffb;
  30. }
  31. .phone-mobile {
  32.     background-color: #7fb80e;
  33.     border-radius: 20px;
  34. }
  35. .log-button {
  36.     background-color: #f47920;
  37. }
  38. #gb2big5 {
  39.     background-color: #aec534;
  40. }
  41. .qr {
  42.     background-color: #4a4a4a;
  43. }
  44. @media screen and (min-width: 900px) {
  45.     #scroll li a:hover {
  46.     background: #2f889a;
  47.     color: #fff;
  48.     border: 1px solid #2f889a;
  49.     transition: all 0.2s ease-in 0s;
  50. }

第二步,Style.css里找到 /** QQ **/ 单独进行QQ美化

1、查找以下代码:

  1. .phone-mobile .be-phone {
  2.     color: #555;
  3. }

将其修改为:color: #f8f8f8;

2、查找:

  1. .online a {
  2.     width: 30px;
  3.     color: #fff;
  4.     text-align: center;
  5.     line-height: 31px;
  6.     display: block;
  7.     border-radius: 2px;
  8.     box-shadow: 0 1px 1px rgba(0000.1);
  9. }

修改为:

  1. .online a {
  2.     width: 30px;
  3.     color: #fff;
  4.     text-align: center;
  5.     line-height: 31px;
  6.     display: block;
  7.     background-color: #fffffb;
  8.     border-radius: 2px;
  9.     box-shadow: 0 1px 1px rgba(0000.1);
  10. }

更改成功,完美显示彩色按钮快捷方式。

weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!

发表评论

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

目前评论:31   其中:访客  25   博主  6

    • 墨雲軒 墨雲軒 0 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市 电信

      看起來很不錯的樣子

      • 喵J ♂ 喵J ♂ 1 来自天朝的朋友 火狐浏览器 Windows 10 广东省佛山市 联通

        很不错的样子

        • 北极星 北极星 1 来自天朝的朋友 谷歌浏览器 Windows 10 山东省济南市 移动

          星光博客谢谢分享

          • bokezhu bokezhu 0 来自天朝的朋友 谷歌浏览器 Windows 10 河北省 联通

            看看学习下