网站美化:评论提交按钮和评论区背景图

小熊 网站建设1 3,061字数 1091阅读3分38秒阅读模式

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

网站美化:评论提交按钮和评论区背景图

前后对比

美化前

网站美化:评论提交按钮和评论区背景图

美化后

网站美化:评论提交按钮和评论区背景图

评论框美化

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

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

/**给你的WordPress评论框加上图片特效**/
#comment {
    background-image: url(https://pic-wanvi-net.ixmu.net/wp-content/uploads/2019/01/2019011116501327.jpg);
    background-repeat: no-repeat;
    background-position: rightright bottombottom;
}

评论提交按钮美化

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

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

/* 评论提交按钮 */
#respond #submit {
    background: #38a3fd;
    width: 35%;
    margin: 5px 0 15px 0;
    padding: 8px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 19px;
    -webkit-appearance: none;
    color: #fff;
    box-shadow: 0 6px 10px #38a3fd50;
}

小结

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

本站整理自 https://www.wanvi.net/10259.html

我发现在移动端 评论背景太大了,改下样式

#comment {
    background-image: url(https://cuijiahua.com/wp-content/uploads/2018/10/comment.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size:40% auto;
}

weinxin
公众号
扫码订阅最新深度技术文,回复【资源】获取技术大礼包
小熊