我们新增Dark Mode(暗模式),(只是在晚上)可以改变MAC OS&Windows系统的暗模式实现切换;安卓和苹果手机是一样的。
WordPress

给WordPress评论框加上背景图片

gyue2345·2015-03-06·82 次阅读··

   2015-03-06 18:38 LJY2345    抢沙发   隐藏边栏   黑色模式    82 
   评分 1 次,平均分 4.0    抢沙发   隐藏边栏   黑色模式

给WordPress评论框加上背景图片

一、用图片设计软件自行设计背景图片,并将其透明度调到50%(看个人喜好),上传到服务器或七牛

例如你设计的图片命名为comment.png,并上传到“/wp-content/themes/你的当前主题/images/”目录下,那么你的图片绝对路径就是“http://你的域名/wp-content/themes/你的当前主题/images/comment.png”。

二、打开你博客有评论框的任何一个页面,查看页面的源代码或者直接查看主题目录下的comment.php文件

评论框有类似的代码:

<label for=’comment’ class=’textarea ’>Your Comment</label>

<textarea name=’comment’ id=’comment’ cols=’60′ rows=’10′ tabindex=’4′ class=’textarea’></textarea>

 

可以发现评论框是用textarea代码来控制的,并且textarea文本区域对应的CSS样式表ID为comment,因此可以直接到主题样式style.css里找到#comment代码,其作用就是定义评论框的样式。

打开“/wp-content/themes/你的当前主题/”目录下的style.css文件,查找#commentform textarea,你会发现如下代码:

#commentform textarea {

font: 110% Arial, Helvetica, sans-serif;

height: 140px;

border: solid 1px #999999;

padding: 5px 3px 3px 7px;

margin-top: -1px;

width: 90%;

max-width: 90%;

}

 

添加代码后:

#commentform textarea {

background-image:url(图片的地址);

background-repeat:no-repeat;

background-position:right bottom;

font: 110% Arial, Helvetica, sans-serif;

height: 140px;

border: solid 1px #999999;

padding: 5px 3px 3px 7px;

margin-top: -1px;

width: 90%;

max-width: 90%;

}

 

三、说明

background-repeat:no-repeat;是指拉大评论框图片不重复出现;

background-position:right bottom;是指图片与评论框的右、底对齐

四、效果图

给WordPress评论框加上背景图片

给WordPress评论框加上背景图片

真实效果见本站

赞赏

除特别注明外,本站所有文章均为LJY IT BLOG原创,转载请注明出处来自https://www.ljy2345.com/2015/03/1268/

博 主作者: 关注:6    粉丝:1最后编辑于:2020年4月11日
LJY IT BLOG的站长。

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

view comments - NOTHING
🌙
😃

切换注册
忘记密码 ?

×

您也可以使用第三方帐号快捷登录

切换登录

×
扫一扫二维码分享
下载海报
  切换主题 | SCHEME TOOL