Elegant Blockquote Styles (SCSS)
Gives quotes in your posts a refined look with a large quotation mark, an accent border and a styled citation line.
Opens WPIDE on
Code
$accent: #2271b1;
$quote-size: 1.15em;
.entry-content,
.wp-block-post-content {
blockquote,
.wp-block-quote {
position: relative;
margin: 2em 0;
padding: 0.5em 1.5em 0.5em 2.25em;
border-left: 4px solid $accent;
font-size: $quote-size;
font-style: italic;
&::before {
content: "\201C";
position: absolute;
top: -0.15em;
left: 0.25em;
font-size: 3em;
line-height: 1;
color: rgba($accent, 0.35);
}
p:last-of-type {
margin-bottom: 0;
}
cite {
display: block;
margin-top: 0.75em;
font-size: 0.8em;
font-style: normal;
opacity: 0.75;
&::before {
content: "\2014\00a0";
}
}
}
}Notes
Change the $accent variable to your brand color.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.