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

自然 2019年6月18日10:19:43 4

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

知更鸟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
网科文媒
快来关注一下,你想要的这里都有喔!
自然

发表评论

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

目前评论:4   其中:访客  2   博主  2

    • avatar 简单生活 3

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

      • avatar 这趟的我 0

        真的可以这样吗