利用CSS修改WordPress Lekh链接属性

CSS修改Lekh超链接属性

最近,小楼在尝试用一款Wordpress免费主题–Lekh,刚开始,并没有发现太大的问题,但在使用过程中,发现正文中超链接默认是蓝色,鼠标划过时,没有明显的颜色变化,从交互角度来看,界面并不友好,用户很难发现这是一个链接,可以点击。

CSS修改Lekh超链接属性

经过网上查阅CSS相关资料,小楼终于解决了这个问题今天就在这里给大家讲一下,如何通过修改CSS,完成Lekh主题的超链接属性修改。

1. 找出文章超链接的归属

打开你要准备修改的文章页面,推荐Chrome浏览器,因为这样可以直接右键 检查,定位到你文中超链接的位置。

CSS修改Lekh超链接属性

其实在这里,虽然我们找到了,超链接的样式的所在地,但是我们在主题的style里面是无法找到的,这应该就是基础版和专业版的差距所在。

CSS修改Lekh超链接属性

不过小楼还是尝试了,在lekh的CSS样式表中,找到了entry-content的样式,先尝试改一下。

2. 定位Lekh主题的CSS样式表

在找到entry-content的样式后,因为a标签表示内容下的链接,所以小楼尝试通过CSS代码先改一下超链接的颜色以及下划线。

.entry-content a{

  font-size: 1.125rem;

  padding: 10px;

color:red;

 text-decoration:underline;

}

测试一下效果,ok没问题。不过当小楼试图想改一下颜色,同时在加上鼠标滑动的响应时,问题就出现了。新添加的代码无一生效。Bug?

也就是说小楼在Lekh主题中修改超链接相关代码是无效的了,那怎么办呢?

幸好,我们还有绝招– Additional CSSAdditional

3. CSS中添加超链接属性

进入主题定制页面中,找到Additional CSS,将以下代码加进去,可以看实时效果。

.entry-content a{

  font-size: 1.125rem;

  padding: 10px;

 color:#54b4e1;

    text-decoration:underline;

}

.entry-content  a:hover{

color: #ffd35f;

    text-decoration:none;

}

这里小楼将默认链接颜色为蓝色,有下划线,鼠标划过时,链接颜色变为浅黄色,下划线消失。当然,你们也可以根据自己喜好,变换颜色。

到此为止,测试正常,WordPress免费版毕竟不花钱,所以有时候还是需要自己会一点基础的CSS,才能达到自己想要的效果。不过,这些方法只是给还在WordPress道路上探索的小白一点参考,大牛们当然是觉得这个太简单了。

Leave a Reply

Your email address will not be published. Required fields are marked *