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

一点优化
一点优化
一点优化
478
文章
49
评论
2019年12月29日21:07:46
评论
975看 1247字

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

美化后效果,如下图:

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

代码部署过程如下:

打开style.css,找到

#feed_widget a {
color: #3690cf;
width: 40px;
display: block;
text-align: center;
height: 40px;
line-height: 34px;
margin: 0 auto;
border-radius: 4px;
border: 1px solid #ddd;
}

修改为:

#feed_widget a {
color: #999;
width: 40px;
display: block;
text-align: center;
height: 40px;
line-height: 34px;
margin: 0 auto;
border-radius: 20px;
border: 1px solid #ddd;
}

再次,在

#feed_widget a:hover {
color: #fff;
border: 1px solid #fff
}

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

之间,添加如下代码:

隐藏的内容:

#feed_widget .feed a {
color: #d28300;
border: 1px solid #d28300
}
#feed_widget .feed a:hover {
background: #d28300;
color: #fff !important;
border: 1px solid #d28300
}
#feed_widget .weixin a {
color: #248a34;
border: 1px solid #248a34;
}
#feed_widget .weixin a:hover {
background: #248a34;
color: #fff! important;
border: 1px solid #248a34
}
#feed_widget .tsina a {
color: #c40000;
border: 1px solid #c40000
}
#feed_widget .tsina a:hover {
background: #c40000;
color: #fff !important;
border: 1px solid #c40000
}
#feed_widget .tqq a {
color: #4e91d1;
border: 1px solid #4e91d1
}
#feed_widget .tqq a:hover {
background: #4e91d1;
color: #fff !important;
border: 1px solid #4e91d1
}

OK,大功告成,四个图标完美变成彩色 wordpress知更鸟主题侧边栏“关于本站–微信、QQ、微博、订阅”四个图标美化

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

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