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
- }
最后,保存完,就大功告成了,简单吧?
1. 如有链接无法下载、失效或广告,请联系QQ:181289218 处理!
2. 本站的所有资源为购买、网络收集,或者用户投稿的资源,版权归原作者及网站所有!
3. 如若侵犯了您的权利,请及时联系站长删除!
4. 本站提供的资源,都不包含技术服务请大家谅解!
5. 此软件“仅限学习交流,不能用于商业用途”!
6. 如用于商业用途,请到官方购买正版软件,追究法律责任与“云墨SEO”站点无关!
2. 本站的所有资源为购买、网络收集,或者用户投稿的资源,版权归原作者及网站所有!
3. 如若侵犯了您的权利,请及时联系站长删除!
4. 本站提供的资源,都不包含技术服务请大家谅解!
5. 此软件“仅限学习交流,不能用于商业用途”!
6. 如用于商业用途,请到官方购买正版软件,追究法律责任与“云墨SEO”站点无关!
- 我的微信
- 这是我的微信扫一扫
- 站长技术资源群
- QQ群:431710796
评论