如何在WordPress主题中自定义Blockquotes样式

报价通常是文章中最令人难忘的部分。它们也是任何帖子或演示文稿中最共享的部分。这就是为什么报纸和主流媒体网站定制他们的blockquote风格,使其脱颖而出。在本文中,我们将向您展示如何在WordPress中自定义blockquotes样式,并向您展示9个自定义blockquotes样式的漂亮示例。

WordPress允许您使用写入部分中的工具栏区域在帖子和页面中添加块引用。

Add Blockquote in WordPress

这将在您的帖子中添加一些HTML,我们可以使用它来自定义样式。注意:我们在WordPress帖子编辑器中使用文本模式。下面是您应该看到的HTML示例。

  <blockquote>Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam.  <cite>Wise Man</cite></blockquote>  

为了在WordPress主题中自定义blockquotes样式,我们需要修改主题的style.css文件。你可以通过去做外观»编辑在您的WordPress管理员或通过FTP编辑文件。

接下来,您需要使用下面建议的其中一种样式并覆盖您的blockquote样式。如果不存在,则只需添加这些。您也非常欢迎将这两种款式结合起来,并根据您的心愿进行定制。

1.经典的CSS Blockquote

通常人们使用CSS背景图片在blockquote中添加大引号。在这个例子中,我们使用CSS来添加大引号。

Classic CSS only blockquote example

  blockquote {  font-family: Georgia, serif;  font-size: 18px;  font-style: italic;  width: 450px;  margin: 0.25em 0;  padding: 0.25em 40px;  line-height: 1.45;  position: relative;  color: #383838;  background:#ececec;  }    blockquote:before {  display: block;  content: "C";  font-size: 80px;  position: absolute;  left: -10px;  top: -10px;  color: #7a7a7a;  }    blockquote cite {  color: #999999;  font-size: 14px;  display: block;  margin-top: 5px;  }    blockquote cite:before {  content: "4 €9";  }  

2.带图像的经典Blockquote

在此示例中,我们使用背景图像作为引号。

Classic Blockquote with Image for Quotation Marks

  blockquote {  font: 16px italic Georgia, serif;  width:450px;  padding-left: 70px;  padding-top: 18px;  padding-bottom: 18px;  padding-right: 10px;  background-color: #dadada;  border-top: 1px solid #ccc;  border-bottom: 3px solid #ccc;  margin: 5px;  background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);  background-position: middle left;  background-repeat: no-repeat;  text-indent: 23px;  }    blockquote cite {  color: #a1a1a1;  font-size: 14px;  display: block;  margin-top: 5px;  }    blockquote cite:before {  content: "4 €9";  }  

3.简单的Blockquote

在这个例子中,我们添加了背景颜色和虚线左边框而不是块引用。随意玩颜色。

Simple CSS blockquote example

  blockquote {  font-family: Georgia, serif;  font-size: 16px;  font-style: italic;  width: 500px;  margin: 0.25em 0;  padding: 0.25em 40px;  line-height: 1.45;  position: relative;  color: #383838;  border-left:3px dashed #c1c1c1;  background:#eee;  }    blockquote cite {  color: #999999;  font-size: 14px;  display: block;  margin-top: 5px;  }    blockquote cite:before {  content: "4 €9";  }  

4.白色蓝色和橙色Blockquote

Blockquotes可以突出,它们可以像你想要的那样丰富多彩。

Blue background and white font blockquote example

    blockquote {  font-family: Georgia, serif;  font-size: 16px;  font-style: italic;  width: 450px;  margin: 0.25em 0;  padding: 0.25em 40px;  line-height: 1.45;  position: relative;  color: #FFF;  border-left:5px solid #FF7F00;  background:#4b8baf;  }    blockquote cite {  color: #efefef;  font-size: 14px;  display: block;  margin-top: 5px;  }    blockquote cite:before {  content: "4 €9";  }  

5.在CSS中使用Google Web Fonts for Blockquotes

在这个blockquote CSS示例中,我们使用了来自Google Web字体库的Droid Serif字体。

Importing Google Web font in CSS for Blockquote

  blockquote {  @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);  font-family: "Droid Serif", serif;  font-size:16px;  font-style:italic;  width:450px;  background-color:#fbf6f0;  border-left:3px dashed #d5bc8c;  border-right:3px dashed #d5bc8c;  text-align:center;  }  blockquote cite {  color: #a1a1a1;  font-size: 14px;  display: block;  margin-top: 5px;  }    blockquote cite:before {  content: "4 €9";  }  

6.圆角Blockquote

在这个例子中,我们有带圆角的blockquote,我们使用了阴影作为边框。

Round corners blockquote

    blockquote {  width: 450px;  background-color: #f9f9f9;  border: 1px solid #ccc;  border-radius: 6px;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote cite:before {  content: "4 €9";  }    

7.使用Gradient作为Blockquote的背景

在这个CSS blockquote示例中,我们使用CSS3渐变来增强blockquote的背景。由于跨浏览器兼容性,CSS渐变很棘手。我们建议使用colorlabs,CSS渐变生成器。

Adding CSS Gradient as background for Blockquote

  blockquote {  width: 450px;  color:#FFF;  background: #7d7e7d; /* Old browsers */  background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */  background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */  background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */  background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#7d7e7d", endColorstr="#0e0e0e",GradientType=0 ); /* IE6-9 */  border: 1px solid #ccc;  border-radius: 6px;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote cite:before {  content: "4 €9";  }    

8.带有背景图案的Blockquote

在这个例子中,我们使用背景图像作为blockquote的模式。

CSS blockquote with background image pattern

    blockquote {  width: 450px;  background-image:url("http://example.com/wp-content/themes/your-theme/images/lined_paper.png");  border: 1px solid #ccc;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote cite:before {  content: "4 €9";  }  

9.在Blockquote背景中使用多个图像

您可以使用css在blockquote背景中使用多个图像。在这个例子中我们使用过块引用:前用于将另一个背景图像添加到blockquote的伪元素。

Adding multiple background images in blockquote using CSS

    blockquote {  width: 450px;  background-image:url("http://example.com/wp-content/themes/your-theme/images/lined_paper.png");  border: 1px solid #ccc;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote:before{  position:absolute;  margin-top:-20px;  margin-left:-20px;  content:url("http://example.com/wp-content/themes/your-theme/images/pin.png");  }  blockquote cite:before {  content: "4 €9";  }  

报价通常是文章中最令人难忘的部分。它们也是任何帖子或演示文稿中最共享的部分。这就是为什么报纸和主流媒体网站定制他们的blockquote风格,使其脱颖而出。在本文中,我们将向您展示如何在WordPress中自定义blockquotes样式,并向您展示9个自定义blockquotes样式的漂亮示例。

WordPress允许您使用写入部分中的工具栏区域在帖子和页面中添加块引用。

Add Blockquote in WordPress

这将在您的帖子中添加一些HTML,我们可以使用它来自定义样式。注意:我们在WordPress帖子编辑器中使用文本模式。下面是您应该看到的HTML示例。

  <blockquote>Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam.  <cite>Wise Man</cite></blockquote>  

为了在WordPress主题中自定义blockquotes样式,我们需要修改主题的style.css文件。你可以通过去做外观»编辑在您的WordPress管理员或通过FTP编辑文件。

接下来,您需要使用下面建议的其中一种样式并覆盖您的blockquote样式。如果不存在,则只需添加这些。您也非常欢迎将这两种款式结合起来,并根据您的心愿进行定制。

1.经典的CSS Blockquote

通常人们使用CSS背景图片在blockquote中添加大引号。在这个例子中,我们使用CSS来添加大引号。

Classic CSS only blockquote example

  blockquote {  font-family: Georgia, serif;  font-size: 18px;  font-style: italic;  width: 450px;  margin: 0.25em 0;  padding: 0.25em 40px;  line-height: 1.45;  position: relative;  color: #383838;  background:#ececec;  }    blockquote:before {  display: block;  content: "C";  font-size: 80px;  position: absolute;  left: -10px;  top: -10px;  color: #7a7a7a;  }    blockquote cite {  color: #999999;  font-size: 14px;  display: block;  margin-top: 5px;  }    blockquote cite:before {  content: "4 €9";  }  

2.带图像的经典Blockquote

在此示例中,我们使用背景图像作为引号。

Classic Blockquote with Image for Quotation Marks

  blockquote {  font: 16px italic Georgia, serif;  width:450px;  padding-left: 70px;  padding-top: 18px;  padding-bottom: 18px;  padding-right: 10px;  background-color: #dadada;  border-top: 1px solid #ccc;  border-bottom: 3px solid #ccc;  margin: 5px;  background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);  background-position: middle left;  background-repeat: no-repeat;  text-indent: 23px;  }    blockquote cite {  color: #a1a1a1;  font-size: 14px;  display: block;  margin-top: 5px;  }    blockquote cite:before {  content: "4 €9";  }  

3.简单的Blockquote

在这个例子中,我们添加了背景颜色和虚线左边框而不是块引用。随意玩颜色。

Simple CSS blockquote example

  blockquote {  font-family: Georgia, serif;  font-size: 16px;  font-style: italic;  width: 500px;  margin: 0.25em 0;  padding: 0.25em 40px;  line-height: 1.45;  position: relative;  color: #383838;  border-left:3px dashed #c1c1c1;  background:#eee;  }    blockquote cite {  color: #999999;  font-size: 14px;  display: block;  margin-top: 5px;  }    blockquote cite:before {  content: "4 €9";  }  

4.白色蓝色和橙色Blockquote

Blockquotes可以突出,它们可以像你想要的那样丰富多彩。

Blue background and white font blockquote example

    blockquote {  font-family: Georgia, serif;  font-size: 16px;  font-style: italic;  width: 450px;  margin: 0.25em 0;  padding: 0.25em 40px;  line-height: 1.45;  position: relative;  color: #FFF;  border-left:5px solid #FF7F00;  background:#4b8baf;  }    blockquote cite {  color: #efefef;  font-size: 14px;  display: block;  margin-top: 5px;  }    blockquote cite:before {  content: "4 €9";  }  

5.在CSS中使用Google Web Fonts for Blockquotes

在这个blockquote CSS示例中,我们使用了来自Google Web字体库的Droid Serif字体。

Importing Google Web font in CSS for Blockquote

  blockquote {  @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);  font-family: "Droid Serif", serif;  font-size:16px;  font-style:italic;  width:450px;  background-color:#fbf6f0;  border-left:3px dashed #d5bc8c;  border-right:3px dashed #d5bc8c;  text-align:center;  }  blockquote cite {  color: #a1a1a1;  font-size: 14px;  display: block;  margin-top: 5px;  }    blockquote cite:before {  content: "4 €9";  }  

6.圆角Blockquote

在这个例子中,我们有带圆角的blockquote,我们使用了阴影作为边框。

Round corners blockquote

    blockquote {  width: 450px;  background-color: #f9f9f9;  border: 1px solid #ccc;  border-radius: 6px;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote cite:before {  content: "4 €9";  }    

7.使用Gradient作为Blockquote的背景

在这个CSS blockquote示例中,我们使用CSS3渐变来增强blockquote的背景。由于跨浏览器兼容性,CSS渐变很棘手。我们建议使用colorlabs,CSS渐变生成器。

Adding CSS Gradient as background for Blockquote

  blockquote {  width: 450px;  color:#FFF;  background: #7d7e7d; /* Old browsers */  background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */  background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */  background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */  background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#7d7e7d", endColorstr="#0e0e0e",GradientType=0 ); /* IE6-9 */  border: 1px solid #ccc;  border-radius: 6px;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote cite:before {  content: "4 €9";  }    

8.带有背景图案的Blockquote

在这个例子中,我们使用背景图像作为blockquote的模式。

CSS blockquote with background image pattern

    blockquote {  width: 450px;  background-image:url("http://example.com/wp-content/themes/your-theme/images/lined_paper.png");  border: 1px solid #ccc;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote cite:before {  content: "4 €9";  }  

9.在Blockquote背景中使用多个图像

您可以使用css在blockquote背景中使用多个图像。在这个例子中我们使用过块引用:前用于将另一个背景图像添加到blockquote的伪元素。

Adding multiple background images in blockquote using CSS

    blockquote {  width: 450px;  background-image:url("http://example.com/wp-content/themes/your-theme/images/lined_paper.png");  border: 1px solid #ccc;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote:before{  position:absolute;  margin-top:-20px;  margin-left:-20px;  content:url("http://example.com/wp-content/themes/your-theme/images/pin.png");  }  blockquote cite:before {  content: "4 €9";  }  

本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如果侵犯你的利益,请发送邮箱到 [email protected],我们会很快的为您处理。
超哥软件库 » 如何在WordPress主题中自定义Blockquotes样式