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

云墨
云墨
云墨
647
文章
0
评论
2018年8月30日 评论 1,438

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

一直看到另人博客上这四个图标美化的特别漂亮,所以找到了以下方法:

美化后效果,如下图:

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. }

最后,保存完,就大功告成了,简单吧?

1. 如有链接无法下载、失效或广告,请联系QQ:181289218 处理!
2. 本站的所有资源为购买、网络收集,或者用户投稿的资源,版权归原作者及网站所有!
3. 如若侵犯了您的权利,请及时联系站长删除!
4. 本站提供的资源,都不包含技术服务请大家谅解!
5. 此软件“仅限学习交流,不能用于商业用途”!
6. 如用于商业用途,请到官方购买正版软件,追究法律责任与“云墨SEO”站点无关!
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 站长技术资源群
  • QQ群:431710796
  • weinxin
云墨
  • 本文由 发表于 2018年8月30日
  • 转载请务必保留本文链接:https://www.yunmoseo.com/1441.html
WordPress回复评论自动添加@评论者的修改方法 网站建设

WordPress回复评论自动添加@评论者的修改方法

有网友留言,问我这个@昵称回复如何实现的?如下图: 其实之前我也看到很多博客有这样的功能,但是我是在后台审核并回复评论的,之前有好几次因为没注意评论信息栏的:回复给***,还以为是给我的留言,所以给人...
匿名

发表评论

匿名网友