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

2019年2月11日14:00:02 评论 677 views 1384字阅读4分36秒

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

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

在浏览【99八十一】【星光】等个人博客时发现,虽然同是知更鸟主题,但是这些网站的图标都美化了,站长甚是喜欢, 苦于自己能力有限,网上也没有找到相应的教程,就一直没有实现图标美化工作。但是,经过站长的不断学习和不懈努力~自夸下 还是实现了图标美化。后来想想,还是自己的能力有限,不会扒代码。在此,记录下美化的过程,留个帖子,方便日后升级主题时的再次使用。也分享给像我一样的“白白菜鸟”。“老鸟们”请忽略,一看而过。代码来源【99八十一】博客!

美化后效果,如下图:

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,大功告成,四个图标完美变成彩色!

叶先生
  • 本文由 发表于 2019年2月11日14:00:02
如何为WordPress主题添加文章字数和阅读时间 WordPress

如何为WordPress主题添加文章字数和阅读时间

折腾的路上永不止,很奇怪对于一篇文章内的字数和阅读时间有啥用呢,这我也不知道,也不敢问。不过有朋友说人家的主题里都有,叶先生你知道怎么加一个吗?说实话我是不知道的,不过在鸟叔这里看到了这个教程,所以今...
WordPress如何设置只允许游客浏览指定的分类文章 WordPress

WordPress如何设置只允许游客浏览指定的分类文章

有朋友会问,WordPress如何设置只允许游客浏览指定的分类文章,因为有些分类的文章我不想未登录的用户能够浏览。 不知道是心里作怪,还是好奇心里,感叹这个世界奇葩的人还真不少,不过能有什么办法呢,谁...
如何判断网站是否采用织梦Dedecms搭建 网站建设

如何判断网站是否采用织梦Dedecms搭建

今天有朋友来问叶先生,怎么才能够知道一个网站是否采用织梦Dedecms搭建。坦白说,这个不算太高深的技术,一是凭自己的建站经验,二来是从中看一些细节。只要稍微熟悉一点dedecms的站长或者技术人员都...
用PhpStudy如何在本地搭建WordPress WordPress

用PhpStudy如何在本地搭建WordPress

以前在还没用WordPress建站的时候一直想进行尝试,但后面发现不会在本地搭建,只能够购买域名和服务器进行搭建。但是因为网站上线之初因胡乱修改网站版面,导致网站整体崩溃无法进行恢复,所以只能选择删库...
匿名

发表评论

匿名网友 填写信息

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