• 欢迎访问望星湖畔,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入望星湖畔 QQ群
  • 由于360网盘即将关闭,本站内部分下载资源可能暂时无法下载,请到相关文章评论处留言,我们会马上处理,谢谢合作!
  • 本站正在搬家,各项数据恢复中……

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

WP应用 admin 4728次浏览 2个评论

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

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

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

显示效果:

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

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

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

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

本文参考:

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

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


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

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

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

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