知更鸟begin主题评论回复框和评论提交按钮美化

avatar
avatar
自然
408
文章
472
评论
2019年6月18日10:19:43 10 955字阅读3分11秒

自然的建站运维之路就是不断的折腾,发现不一样的风景。浏览本站的小伙伴或许已经发现自然博客的评论框及评论提交按钮和主题原来的样式有一定的差别,看上去不难生硬,显得更加舒服。

知更鸟begin主题评论回复框和评论提交按钮美化

评论框美化

自然给评论框添加了一个背景图样式,让本身单调的,一片空白的评论框更加灵动,有内容在里面,显得更加充实有趣。

操作很简单,只需要把下面的css样式代码粘贴到后台主题选项,定制风格,自定义样式的代码框之中就可以了。

  1. /**给你的WordPress评论框加上图片特效**/
  2. #comment {
  3.     background-imageurl(https://pic-wanvi-net.ixmu.net/wp-content/uploads/2019/01/2019011116501327.jpg);
  4.     background-repeatno-repeat;
  5.     background-positionrightright bottombottom;
  6. }

我们来看一下美化前后的效果差别。

知更鸟begin主题评论回复框和评论提交按钮美化

评论提交按钮美化

原来的长条方框型的评论提交按钮和上方输入框对齐,布局显得更加简约,硬朗。美化后的评论提交按钮则是一种截然不同的风格,使得简约硬朗的风格显得更加生动,更加生动唯美。

知更鸟的begni主题样式的修订基本都是在后台,主题选项,定制风格,自定义样式中填入代码即可。

  1. /* 评论提交按钮 */
  2. #respon#submit {
  3.     background#38a3fd;
  4.     width: 15%;
  5.     margin5px 0 15px 0;
  6.     padding8px;
  7.     cursorpointer;
  8.     border1px solid #ddd;
  9.     border-radius: 19px;
  10.     -webkit-appearance: none;
  11.     color#fff;
  12.     box-shadow: 0 6px 10px #38a3fd50;
  13. }

我们来对比一下前后效果。

知更鸟begin主题评论回复框和评论提交按钮美化

小结

美化前风格显得比较生硬,美化后的展示效果看着更加生动唯美。不一定每一个站点都需要美化,美化的目标是提升用户友好度的同时,让自己看着更加舒服。对于自然这种记录型的小博客而言,美化纯粹是为了让自己看起来更加舒服。

weinxin
自然博客
快来关注一下,一个linux运维爱好者的个人博客!
avatar
  • 本文由 发表于 2019年6月18日10:19:43
全网通流量卡/物联卡 SIM专用上网卡
AlphaSSL 域名通配符型DV SSL证书
WP-China-Yes自建wordpress中国区仓库源 Nginx

WP-China-Yes自建wordpress中国区仓库源

WordPress的CDN在19年被国内攻击后(存疑),一直屏蔽了大陆IP的访问,从大陆访问WP的服务都会返回429 Too Many Requests。虽然WP官方社区并不承认屏蔽了大陆地区的访问(...
匿名

发表评论

匿名网友 填写信息

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

评论:10   其中:访客  0   博主  0
    • avatar 简单生活 3

      额,个人喜好了,还是感觉原版好!

      • avatar 这趟的我 0

        真的可以这样吗

        • avatar 软件库 0

          评论框里怎么加 字 呀

            • avatar 自然

              @ 软件库 查看页面源代码,我放在stytle里面了。都有注释很容易找到的

            • avatar 天天笑 1

              请问博主的回复留言日期下面的“回复和那个小方块”默认是@回复的你这个样式怎么弄的呢,谢谢!

                • avatar 自然

                  @ 天天笑 主题引入的阿里云图标库

                    • avatar 天天笑 1

                      @ 自然 请问,回复的这个样式小方块 在哪个文件模板里添加呢,谢谢博主告知!感谢!

                        • avatar 自然

                          @ 天天笑 我能告诉你这是主题自带吗?如果你需要引入就去查看阿里图标库的引入文档