WordPress默认主题Twenty Ten的blockquote引用样式修改

WordPress默认主题Twenty Ten的默认blockquote引用样式为“斜体+缩进”,在排版上不太醒目。如图:

image

通过修改主题样式,可以使排版更加醒目、清晰。如图:

image

修改主题的Style.css:

查找“blockquote”,找到下面的代码:

blockquote {
font-style: italic;
padding: 0 3em;
}

这段代码有两个作用:一个句定义了斜体,一句定义了偏移的位置。我们在这段代码的前后通过注释符将代码注释掉:

/*
blockquote {
font-style: italic;
padding: 0 3em;
}
*/

在css文件末尾加入下面的代码:

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
width: 90%;
font: 微软雅黑, Georgia;
color: #888;
}
blockquote p {
display:inline;
}

其中,width宽度、font字体等处可根据实际情况修改。改完保存即可。如果需要恢复原状,只需要去掉最后一段代码,再把前面的注释符号去掉就可以。

20120211

20120529:经土木坛子兄提醒,如将上述代码最后三行去除,引用段落内可以完成换行。

原创文章,转载请注明: 转载自风云居 | Less is more

本文链接地址: https://kangjian.net/blog/892/

WordPress默认主题Twenty Ten的blockquote引用样式修改》有7个想法

    1. 康健 文章作者

      以前弄zblog特别喜欢研究这些,甚至去尝试diy程序代码。那时候还算有一点点VB皮毛,asp程序能驾驭。现在完全是linux+lnmp架构,虽然能拿来用,拆了就装不上了。做这种顶层修改只有做好笔记,以便以后少走弯路吧。文科背景的博客,感觉引用的样式还是不能马虎。

      回复
  1. 土木坛子

    虽然我说过不弄了,但默认的样式实在太差了,所以我借用了你的技巧,不过我发现:
    blockquote p {
    display:inline;
    }

    这一段去掉的话,引用的内容能分段,否则,分段的引用会变成一块,没有段落了。

    回复
  2. Pingback引用通告: MR.BLACK » 引用樣式改變

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注