最新消息:20210917 已从crifan.com换到crifan.org

【已解决】给WordPress中的retina主题中的链接,添加下划线和设置文字为蓝色

WordPress crifan 3537浏览 0评论

【问题】

用wordpress的retina主题,总体感觉还是不错的。

只是有些细节方面,觉得很是不爽。

最不爽的一个就是,对于带链接的文字,只是颜色略有区别,而不是常见的蓝色字体和下划线,这让人很难分辨,或者很容易忽视掉,原来该文字是带链接的。

比如:

orig no underline

想要给带链接的内容,添加下划线和设置字体颜色为蓝色。

【解决过程】

1.根据之前学习的html的知识,想到应该是css文件中配置的。

去找了下,果然找到对应的设置的地方:

wp-content\themes\retina\style.css

/*  =Anchor
------------------------ */

a,
a:visited {
	color: #072C53;
 	text-decoration: none; 
}

a:hover {
	text-decoration: underline;
}

对应的,设置了字体颜色,文字装饰为无.

2.现在就去修改为自己想要的效果.

试了试:

a{
    color:blue;
    text-decoration:underline;
}

结果会把所有的链接的部分,包括帖子的发布时间等,都变成蓝色加下划线,显示很难看.

3. 然后去看了帖子的代码,发现带链接的内容,都是属于p标签下的a标签,

然后后来经过尝试的值,想要实现p下的a标签,直接是p后面加上空格 再加上a,就可以实现层级控制,访问到p下面的a标签了。,所以就又试了试:

p a{
    color:blue;
    text-decoration:underline;
}

然后此时基本达到所要的效果了。

4. 但是后来发现,这样写的话,对于某些帖子,其a标签上层不是p标签,而是dt,dt上层是dl标签,所以,用p和a,或者是dt,a等等,都不是好办法。

5. 然后发现了,当前wordpress所生成的html中,对于帖子内容,都是在

<div class="entry-content">

下面的,所以,就可以通过div.entry-content来控制了:

div.entry-content a{
    color:blue;
    text-decoration:underline;
}

这样,就真正的实现了,将对应的带链接的文字,加上下划线,并且文字颜色设置为蓝色了。

6.后来又验证了,对于上述在(通过wlw或wordpress后台的文本编辑器)编辑帖子过程中,已经设置了带链接的文字的颜色的前提下,此处的颜色设置为蓝色,是不会影响到其所设置的颜色的,即css中的控制参数,是会被帖子中的另外设置的颜色,所覆盖的。所以,就不会影响那些已经设置为红色或其他颜色的带链接的文字了。

最终的效果如下:

added underline

【总结】

想要控制wordpress中的retina主题中的带链接的文字的效果,其实只是属于HTML的基本知识。

即通过css加上与Anchor相关的配置参数,即可实现对应的效果的。

而此处想要控制wordpress的帖子内容主题中带链接的文字为加上下划线和蓝色字体的话,对应的css配置参数为;

div.entry-content a{
    color:blue;
    text-decoration:underline;
}

转载请注明:在路上 » 【已解决】给WordPress中的retina主题中的链接,添加下划线和设置文字为蓝色

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (3)

  1. 可以,问题已解决,感谢分享,只是我是在css里添加了参数 .post-content-wrap a{ color:blue; text-decoration:underline; }
    无名2年前 (2022-06-18)回复
  2. 还是没能解决,只限定文章内容超链接添加下划线
    有钱赚9年前 (2015-09-16)回复
  3. 学习了 感谢分享
    逼格9年前 (2015-01-16)回复
96 queries in 0.182 seconds, using 23.37MB memory