• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Different Ways To Style Block Quotes

By default, most themes include CSS to style text you wrap in blockquote tags.

You can modify your themes default styling for block quotes or add custom styling for use with a different HTML tag.

The standard tag is included in the visual and text editor of WordPress.

To use block quotes you need 2 things.

  1. A HTML tag to wrap your text in
  2. And CSS to style the text wrapped in block quote tags

Default CSS

Here’s the default CSS from the Minimum pro child theme by StudioPress:

blockquote,
blockquote::before {
	color: #999;
}

blockquote {
	margin: 40px;
}

blockquote::before {
	content: "\201C";
	display: block;
	font-size: 30px;
	height: 0;
	left: -20px;
	position: relative;
	top: -10px;
}

Here’s the styling the above CSS generates:

default-blockquote-style

To style your blockqoutes, you can modify your themes default styling

or

Add custom styling for block quotes like you see in the following image:

custom-block-quote

Custom CSS for Block Quotes

Here’s the CSS which generates what you see in the image above:

Register for full access

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems