On Friday I happened to lose half an hour when I ran across some cool blockquote formatting at Codrops. I especially like one with a circular image:
Never fear quarrels, but seek hazardous adventures.
The author provides all the code, but I wanted it to be more flexible, after all I’m not always going to quote from The Three Musketeers. I added an attribute of “data-image” to the appropriate class and With a little bit of javascript the image will change to match the quote:
Twas bryllyg, and ye slythy toves
Did gyre and gymble in ye wabe:
All mimsy were ye borogoves;
And ye mome raths outgrabe.
You can see the original code here (Example 1). These were my additions:
CSS
.mb-style-1 .mb-thumb {
display: block;
width: 180px;
height: 180px;
border: 10px solid rgba(255,255,255,0.5);
border-radius: 50%;
background: url( ) no-repeat center center;
position: absolute;
left: 50%;
top: -90px;
margin: 0 0 0 -90px;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
}
HTML
<div class=”mb-wrap mb-style-1″>
<div class=”mb-thumb” data-image=”http://www.sophrosynelife.com/wp-content/uploads/2012/10/Dartagnan-musketeers.jpg”></div>
<blockquote cite=”http://www.gutenberg.org/ebooks/1257″>Never fear quarrels, but seek hazardous adventures.</blockquote>
<div class=”mb-attribution”>
<p class=”mb-author”>Alexandre Dumas</p>
<cite><a href=”http://www.gutenberg.org/ebooks/1257″>The Three Musketeers</a></cite>
</div>
</div>
jQuery
(Note I’m using “jQuery” instead of “$” to avoid conflicts with my WordPress install)
jQuery(function(){
jQuery(‘.mb-thumb’).each(function(){
var theurl = jQuery(this).attr(‘data-image’);
jQuery(this).css(‘background-image’, ‘url(‘+theurl+’)’);
});
});
UPDATE: I’ve written a WordPress Plugin for this.
Related Articles
7 users responded in this post
Hello , I came across your post from modern blockquote styling. I have downloaded the files but need help implementing this on my site. I am a newbie so I have no experience but I am well able to follow step by step instructions. Would you be willing to help me get this styling up and running on my blog.
Hi Giana,
I’d be happy to answer specific questions. I suggest you look at the original article over at Codrops (link is in the post) and then let me know specifically what you’ve tried or what questions you have.
I have no idea even where to begin, I downloaded files from the original website but was lost after that. I can follow step by step instructions . do I need to place these files somewhere, do I need to edit something in the css..I really have no clue.
Sounds like you are pretty much starting from scratch. You’ll need to know how to edit your files and if you are using WordPress how to edit the template files and function files.
The CSS goes into your CSS file.
The HTML goes into the spot on your page you want the quote. The Javascript goes between
do you have an email address where I can email you?
Sorry for the delay – I’ve been out of the office.
diane@beyond-paper.com.
[…] created a WordPress plugin for the styled blockquote featured in this post. To […]
Leave A Reply