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

wp美化448.6K views阅读模式

wordpress使用知更鸟主题的小伙伴都会发现，在“关于本站”下面有四个联系方式图标（姑且先这么叫吧，我也不知道正规名称是什么）。但是，主题默认的四个图标是暗色系“灰色”的，很不美观，与站长的要求相差甚远。

美化后效果，如下图：

wordpress知更鸟主题侧边栏“关于本站–微信、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，大功告成，四个图标完美变成彩色 wordpress知更鸟主题侧边栏“关于本站–微信、QQ、微博、订阅”四个图标美化

企鹅SEO
  • 本文由 发表于 2019年5月30日 10:42:10
  • 转载请务必保留本文链接：https://www.qieseo.com/1131.html
评论  4  访客  4
    • 百度竞价
      百度竞价 0
      1F

      这可以，谢谢分享

      • be my baby
        be my baby 0
        2F

        谢谢分享

        • QQRSS
          QQRSS 0
          3F

          最后的一部分 我怎么看的有点晕了。
          最后一部分，来个完整修改版的截图吧。

            • 企鹅seo
              企鹅seo
              B1

              @ QQRSS 实在不知道怎么详细了，很清楚了

          发表评论