WordPress美化@回复的样式

  • 6
  • 1,060人读过
  • A+
所属分类:WordPress

这两天树懒先生和其他博主的交流比较密切,经常评论与被评论,渐渐地主题自带的@回复的样式看腻了,越看越觉得不够养眼,那么干脆动手自己修改喽。Wordpress美化@回复的样式

先出一下效果图对比一下

修改之前

Wordpress美化@回复的样式      修改之后

Wordpress美化@回复的样式

勉强说的过去的美观吧,那么开始着手修改,犹豫树懒先生目前是使用的鸟哥的主题,所以具体修改方法可能有所不同,但是CSS代码和思路是完全互通的。我们先审查元素确定要修改的元素的名称,再去文件里面搜索名称,经过查找,树懒先生确定要修改的文件处于主题目录下的\inc\inc.php文件中。

  1. backgroundrgb(60, 165, 246) none repeat scroll 0% 0%;
  2. padding2px 5px;
  3. color#fff;
  4. border-radius: 3px;
  5. margin-left5px;
  6. font-size12px;
  7. margin-right5px;
  8. text-decorationunderline;

先奉上我们要美化的CSS所用的代码,然后将代码加入到刚刚找到的元素之中,可以现在浏览器的控制台实验一下,修改之前与之后的代码对比很明显

  1. //源代码
  2. $comment_text = '<span class="at">@ <a href="#comment-' . $comment->comment_parent . '">'.get_comment_author( $comment->comment_parent ) . '</a></span> ' . $comment_text;
  3. //修改后的代码
  4. $comment_text = '<span class="at" style="background: rgb(60, 165, 246) none repeat scroll 0% 0%;padding: 2px 5px;color: #fff;border-radius: 3px;margin-left: 5px;font-size: 12px;margin-right: 5px;text-decoration: underline;">@ <a href="#comment-' . $comment->comment_parent . '" style="color: #fff;">'.get_comment_author( $comment->comment_parent ) . '</a></span> ' . $comment_text;

刷新一下缓存,不错,树懒先生想要的效果已经实现了,些许的成就感,嘿嘿,折腾的快乐便是如此。

发表评论

不是我 偷笑 博学 友尽 可怜 吃惊 吃瓜 吐血 哈哈哈 嘻嘻嘻 坏笑 奋斗 委屈 尬笑 开心 微笑 思考 打脸 抠鼻子 无语 晕 机智 欲哭无泪 流汗 流泪 滑稽 生气 疑问 羡慕 耶 装逼 调皮 赞 难受 震惊 鼓掌

目前评论:6   其中:访客  3   博主  3

    • 郑永 郑永 1

      这个可以有~

      • 沙扬娜拉 沙扬娜拉 1

        恩 感觉挺好看的

        • 久伴 久伴 1

          这个我之前用过感觉没begin自带的耐看

            • 树懒 先生 树懒 先生 博主

              @ 久伴 哈,各有所爱吧,至少目前我觉得还是看得过去的☺