知更鸟主题“关于本站–微信、QQ、微博、订阅”四个图标美化

2018年5月3日19:03:07 55 10.6K 1480字阅读4分56秒
摘要

在此,记录下美化的过程,留个帖子,方便日后升级主题时的再次使用。也分享给像我一样的“白白菜鸟”。“老鸟们”请忽略,一看而过。代码来源【99八十一】博客。

知更鸟主题“关于本站--微信、QQ、微博、订阅”四个图标美化

使用知更鸟主题的小伙伴都会发现,在“关于本站”下面有四个联系方式图标(姑且先这么叫吧,我也不知道正规名称是什么)。但是,主题默认的四个图标是暗色系“灰色”的,很不美观,与站长的要求相差甚远。 :lol: 在浏览【99八十一】【闲鱼】等个人博客时发现,虽然同是知更鸟主题,但是这些网站的图标都美化了,站长甚是喜欢, :eek: 苦于自己能力有限,网上也没有找到相应的教程,就一直没有实现图标美化工作。但是,经过站长的不断学习和不懈努力~自夸下 :neutral: 还是实现了图标美化。后来想想,还是自己的能力有限,不会扒代码。在此,记录下美化的过程,留个帖子,方便日后升级主题时的再次使用。也分享给像我一样的“白白菜鸟”。“老鸟们”请忽略,一看而过。代码来源【99八十一】博客 :wink:

美化后效果,如下图:

知更鸟主题“关于本站--微信、QQ、微博、订阅”四个图标美化

代码部署过程如下:

打开style.css,找到

  1. #feed_widget a {
  2. color: #3690cf;
  3. width: 40px;
  4. display: block;
  5. text-align: center;
  6. height: 40px;
  7. line-height: 34px;
  8. margin: 0 auto;
  9. border-radius: 4px;
  10. border: 1px solid #ddd;
  11. }

修改为:

  1. #feed_widget a {
  2. color: #999;
  3. width: 40px;
  4. display: block;
  5. text-align: center;
  6. height: 40px;
  7. line-height: 34px;
  8. margin: 0 auto;
  9. border-radius: 20px;
  10. border: 1px solid #ddd;
  11. }

再次,在

  1. #feed_widget a:hover {
  2. color: #fff;
  3. border: 1px solid #fff
  4. }

  1. #feed_widget .be {
  2. font-size: 18px !important;
  3. font-size: 1.8rem !important;
  4. }

之间,添加如下代码:

  1. #feed_widget .feed a {
  2. color: #d28300;
  3. border: 1px solid #d28300
  4. }
  5. #feed_widget .feed a:hover {
  6. background: #d28300;
  7. color: #fff !important;
  8. border: 1px solid #d28300
  9. }
  10. #feed_widget .weixin a {
  11. color: #248a34;
  12. border: 1px solid #248a34;
  13. }
  14. #feed_widget .weixin a:hover {
  15. background: #248a34;
  16. color: #fff! important;
  17. border: 1px solid #248a34
  18. }
  19. #feed_widget .tsina a {
  20. color: #c40000;
  21. border: 1px solid #c40000
  22. }
  23. #feed_widget .tsina a:hover {
  24. background: #c40000;
  25. color: #fff !important;
  26. border: 1px solid #c40000
  27. }
  28. #feed_widget .tqq a {
  29. color: #4e91d1;
  30. border: 1px solid #4e91d1
  31. }
  32. #feed_widget .tqq a:hover {
  33. background: #4e91d1;
  34. color: #fff !important;
  35. border: 1px solid #4e91d1
  36. }

OK,大功告成,四个图标完美变成彩色 :grin:

继续阅读
weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!
漂亮的音乐播放器插件Aplayer 资源分享

漂亮的音乐播放器插件Aplayer

Aplayer是一款HTML5的WordPress音乐播放器,界面仿照网易云音乐外链播放器,每个音乐需要填写音乐名称、作者、音乐封面、还有外链地址,添加成功后在音乐列表右侧复制短代码到文章需要显示的位...
知更鸟主题添加设置导航菜单方法 WordPress

知更鸟主题添加设置导航菜单方法

主题支持四个菜单(主要菜单、顶部菜单、移动端菜单和移动端页脚菜单),菜单操作使用方法: 进入WP后台→外观→菜单,点击创建新菜单。 首先输入一个菜单名称,并保存菜单。 菜单支持添加单篇文章、分类、标签...
知更鸟主题文章底部添加个性图标和分类目录 WordPress

知更鸟主题文章底部添加个性图标和分类目录

星光自己也摸索过文章显示当前分类目录的方法,虽然也是成功了,但是不怎么美丽,离我的要求还有一点点的距离,没有达到完美化。在与“简单生活”博客友联过程中看到他的网站显示的效果正是我想要的,随与博主联系获...
匿名

发表评论

匿名网友 填写信息

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

评论:55   其中:访客  43   博主  12
    • 小苹果 小苹果 0 来自天朝的朋友 谷歌浏览器 Windows 10 辽宁省大连市 电信

      真不错,真不错

      • lmdk5200 lmdk5200 0 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省泰州市 电信

        不错,学习了……

        • dream dream 0 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省 移动

          支持一下,拿过去试试

          • 韦贝贝 韦贝贝 0 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省宁波市慈溪市 电信

            支持一下,拿过去试试

            • 誓言oO 誓言oO 0 来自天朝的朋友 谷歌浏览器 Windows 10 河北省秦皇岛市 联通

              谢谢博主分享

              • huzi huzi 0 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 联通

                支持下楼主大大

                • 131425 131425 3 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省宿迁市 移动

                  支持过来学习一下

                  • 小可 小可 1 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省宁波市 电信

                    看看,学习一下

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

                      谢谢谢谢 虚心学习

                      • 单车旅行 单车旅行 0 来自天朝的朋友 谷歌浏览器 Windows 7 上海市 电信

                        博主的文章很不错哦~
                        这里是谙年博客,欢迎回访,友链互换。