• 欢迎访问【望星湖畔】,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器或Chrome浏览器访问本网站,欢迎加入官方QQ群 QQ群
  • 【望星湖畔】因搬家不慎将数据弄丢,现在各项资料恢复中,还请大家海涵!!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏【望星湖畔】吧

WordPress修改Blockquote/pre等,让引用文段模块更漂亮

WP应用 admin 4年前 (2013-12-27) 4120次浏览 已收录 1个评论

在 WordPress 后台编辑时,引用一段文字后点击”引用文段”会自动添加 Blockquote 标签,但 WordPress 默认的引用样式是相当丑的,而我们可以通过修改 Style.Css 文件中的 Blockquote 标签样式,让文章的引用段落显示的漂亮一些。

打开主题文件夹中的 style.css 文件,找到 blockquote 标签,修改属性如下:

blockquote{
    background: #d9e9ff; /×背景颜色×/
    padding: 10px 15px 10px 15px; /×引用块内部文字距离边框的距离×/
    margin: 1em 3em 1em 3em; /×引用快边框上右下左的缩进×/
    font-size:.8em;/×字体大小×/
    border-style:dotted dotted dotted solid; /×边框样式×/
    border-width:1px 1px 1px 5px;/×边框宽度×/
    border-color:#5bbcdd;  /×边框颜色×/
    line-height:200%  /×行间距×/
}

显示效果:

同样找到pre 标签,修改其属性如下:

pre {
    background: #d9e9ff;  /×背景颜色×/
    padding: 0.75em 0.75em; /×内部文字距离边框的距离×/
    margin: 1em 3em 1em 3em; /×边框上右下左的缩进×/
    font-size:.8em; /×字体大小×/
    overflow: auto; /×如有超出边框长度的代码,显示滚动条×/
    border-style:dotted dotted dotted solid;/×边框样式×/
    border-width:1px 1px 1px 5px;/×边框宽度×/
    border-color:#5bbcdd;/×边框颜色×/
    line-height:200% /×行间距×/
}

修改完以上两个标签 CSS 属性后保存,这个时候如果你的博客文章中有引用段落或插入代码后就会产生效果。

修改时记得删除注释文字。

本文参考:

WordPress 修改 Blockquote/pre 等,让引用文段模块更漂亮 | 萝卜居—萝卜家园网

WordPress 修改 Blockquote 让引用文段模块更漂亮


望星湖畔 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明WordPress 修改 Blockquote/pre 等,让引用文段模块更漂亮
喜欢 (0)
[loveinghu@qq.com]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 请问那个虚线代码框怎么做的,用什么插件?
    bautian2015-12-08 16:46 回复