Hi there! Today’s post is part of The Design Your Own (lovely) Blog, Blog Tour hosted by the fabulous Marianne. This is the last week of the 3 week blog tour full of helpful blog design tips and tutorials, including Anna’s tutorial yesterday on how to spice up your footer.
Today I am teaching you how to make your text stand out by using block quotes and content boxes.
A block quotation is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation – Wikipedia. This is a block quote.
I like to think that blogs are more like magazines than they are books or journals. Think back to the last magazine you read in the grocery store checkout. What did the pages look like? Magazines are littered with contrasting texts.
We all know that it is very important to have a great blog design, but we also know that “content is king”. So add style to your content and make your text stand out with block quotes and content boxes.
It does take a bit of coding to achieve block quotes and content boxes, but I’m going to walk you through the steps.
Create custom block quotes for your blog
Block quotes are used when you quote someone else, another article, or even yourself. Use block quotes when you share exact quotes. They are usually indented from the body text and are italicized.
WordPress and Blogger both have built-in block quotes, but the following are examples of customized block quotes.
This is a classic block quote with a default quotation mark on left side.
Happiness can be found even in the darkest of times if one remembers to turn on the light -Albus Dumbledore
This is a block quote with left border
This is a block quote with borders on top and bottom.
Henry David Thoreau
This is a block quote I created for a client. It uses images as the top and bottom border.
– Johnny Cash
CSS code for block quotes
Here is the code used to create the block quote examples above. Feel free to use and modify these to create your own block quotes. Simply choose a code and copy/paste it into your blog’s stylesheet (I’ll show you where to paste it in the instructions below).
blockquote {
color: #999;
margin: 40px;
font-style: italic;
}
blockquote::before {
content: “\201C”;
display: block;
font-size: 20px;
height: 0;
left: -20px;
position: relative;
top: -10px;
}
blockquote {
border-left: 4px solid #18B888;
color: #18B888;
font-style: italic;
margin: 30px 0 30px 15px;
padding-left: 15px;
}
blockquote {
border-top: 1px solid #3A78AB;
border-bottom: 1px solid #3A78AB;
color: #3A78AB;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;
}
blockquote {
background:
url(https://kristiehill.com/wp-content/uploads/2014/11/blockquotebg.png) top center no-repeat,
url(https://kristiehill.com/wp-content/uploads/2014/11/blockquotebg2.png) bottom center no-repeat;
color: #EF5488;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;
}
Instructions for adding block quote CSS to WordPress
From your WordPress dashboard, navigate to Appearance – Editor and select your stylesheet (style.css). Find the code for the current block quote code and replace it with your custom CSS.
Instructions for adding block quote CSS to Blogger
From your Blogger dashboard, navigate to the Template screen and click Customize. Once you are inside the blogger template designer, click advanced and scroll down to Add CSS. Add the CSS for your custom block quote and then click apply to blog.
How to use block quotes within your posts
Now that you’ve added CSS for block quotes to your stylesheet, it is easy to use them inside your blog posts. Simply highlight the text you want to be a block quote and click the quotation symbol on your toolbar.
Create content boxes for your blog.
Content boxes put your text within a color box. For example, I use yellow content boxes any time I give a blogging definition within a blog post. I also use content boxes to separate the different services I offer. Some bloggers use content boxes to emphasize phrases from the article. Marianne uses content boxes to introduce guest writers on her blog.
CSS code for content boxes
Here is the code used to create the content box examples above. Feel free to use and modify these with your blog’s colors to create your own content boxes. Simply choose a code and copy/paste it into your blog’s stylesheet.
.content-box-green {
margin-bottom: 30px;
overflow: hidden;
padding: 30px;
background-color: #18B888;
color: #fff;
}
.content-box-gold{
margin-bottom: 30px;
overflow: hidden;
padding: 30px;
background-color: #dfd09c;
border-left: 8px solid #C6AC4F;
}
.content-box-plum {
background-color: #cb93c1;
border: 1px solid #351930;
margin-bottom: 30px;
overflow: hidden;
padding: 20px;
}
Instructions for adding content box CSS to WordPress
From your WordPress dashboard, navigate to Appearance – Editor and select your stylesheet (style.css). Scroll to the bottom of your stylesheet and paste your desired code.
Instructions for adding content box CSS to Blogger
From your Blogger dashboard, navigate to the Template screen and click Customize. Once you are inside the blogger template designer, click advanced and scroll down to Add CSS. Paste the CSS for your desired content box and then click apply to blog.
How to use content boxes within your posts
Once you’ve added the CSS for content boxes, you will have to manually add code in the post where you want the content box to appear. The content box is created with a div class. Switch to your text mode and use the following code:
The information inside the quotations needs to match the CSS class .content-box-plum at the beginning of the code you pasted into your CSS.
Go design your own blog!
Hopefully this tutorial will inspire you to create your own custom content boxes and block quotes. Leave me a link once you do, I’d love to see how you use block quotes and/or content boxes to make your text stand out!
Don’t stop with this tutorial, make sure to check out all 14 tutorials and tips to help you design your blog!
Yesterday’s Post: Designing Your Blog from Head to Footer by Anna of Anna Marie Moore Designs
Tomorrow’s Post: Marianne at Design Your Own (lovely) Blog
About Marianne and Design Your Own (lovely) Blog
Marianne has been helping women to create lives they love by giving them confidence when it comes to their own blog designs. Her goal is to provide economical DIY ways for them to get started and help them feel better about who they are and what they have to offer.
I first discovered Marianne’s blog while I was still in the pre-launch phase of this blog. Once I went live, Marianne is one of the few people who noticed my blog when it was Dreamy Ambitions (that only lasted a month). She has motivated me from the start!
I really resonate with Marinane’s purpose for the blog tour and her blog. We share the same goal: to provide DIY ways for you to get started and feel confident with your blog.
Resources:
How to use block quotes
colored content boxes
Can I please have the code for the yellow content box that you use, I tried editing the code myself to get the exact yellow and margin but omg this coding stuff is not my cup of tea.
It works. Thanks so much.
please i tried it out on my blog but it didn’t work out take a look at my blog to and tell to see what i’m talking about >> http://www.myfurniturezworld.blogspot.com..
A helpful post. Your suggestions for creating blockquotes and content boxes are perfect. Thanks for the step by step guided procedure. Appreciate you hard work.
You’re welcome! I hope it they turn out well on your site.
Am not really code savvy. Is there any way I can do this with plugins
I like the tips you’ve provided to help jazz up my blog. I use Wix, and I’ve heard some negative things about it. I bought a year contract and I’m about half way through. Do you have any thoughts on that platform (generally speaking)? I think that I can easily do the quotes with the lines, but I’m going to try to see about the content boxes.
Hi Theresa, I haven’t used WIX since 2009 so I’m not too sure how far it has come. Do you have access to edit the CSS? If so then you should be able to do all of these.
Impressive post! After reading this information I want to say that you have created very interesting information. Keep doing the great work up.
You’re welcome!
Hi, Kristie! Thanks so much for sharing this. I’m brand new to Blogger, CSS, and all that jazz. I used your block quote with top and bottom border, and my only question is this: how can I adjust either the code or other settings to remove the quotation marks entirely?
I want to be able to attribute the quote within the blockquote area, but I don’t want the person’s name to automatically go inside of quotation marks. If I can remove the quotation marks entirely or be able to input them manually when I write the quote in my post, that would be ideal. And I have no idea how to do it 🙂
Hi Jessica, the code I’ve provided does not have any quotation marks in it. Perhaps your template is providing them?
What a help.
Thanks from my heart.
I just implement This.
Love Post.
Glad to be of help!
Hey Kristie – this is exactly what I have been looking for – bit nervous to make the change since I haven’t done coding yet, but I really want to add a text box.
Just to be clear, in WordPress…I add the CSS to the VERY end of the page?
The css for the code needs to go in your css file. Which you can access via Appearance > Editor > and then find your style.css file from the list on the right-hand side. Add the code at the VERY end of that page.
Then, you’ll be able to use the text box anywhere you want in your posts. Let me know when you have it up. 🙂
I tried it both on my blog on blogger but it doesn’t work tho, what’s wrong?
oh no! It should work on blogger. Where are you pasting the CSS and where are you using the code within a post?
Wow, Really it’s a great post. Your blog is really excellent. I read your full article. Really I enjoyed it.
Thank you MD. Do you use content boxes on your site?
I use quote in my blog. Please tell me how many blockquotes we use in a post??
Hi Kristi- Help.. I just had another company host my site meshnewsdesk.com and I’ve lost the ability to box copy/images with the quote marks. I do not know code and am not really interested in learning it….afraid I’ll screw it up. But I really want to regain that option.
Is there likely something I should have them add with CSS? Previously I would highlight copy and had it wrap around photos, sometimes the double box turned out very interesting, stacking copy and images. There was not color or background involved, just changing the format a bit by using the quote marks.
Hi Marianne, I’ve copy pasted the code you provided into my CSS in Blogger and followed your instructions but for some reason it’s not working. In my blog post I highllighted the text and pressed the blockquote button and in the post html it’s showing the code for blockquote before and after the text. Any thoughts on what I might be doing wrong? The only thing I changed in the CSS was the color (#ADC39F). Thank you!
Hi Marie, can you give me a link example where you tried using a blockquote so I can inspect it?
Also, make sure there is a ; after the color you changed.
This post was very helpful Marianne – thank you so much! I’ve wondered how to do this properly in Blogger. Pinned and printed and definitely setting this up.
Hi – I love your blog and ideas. But just to let you know that you have a missing { for your Green content box code. I only discovered this once I entered the code into my CSS and updated. Now EVERYTHING that should be white has gone beige (the colour I selected for my content box) – not only on my site, but on my whole PC. I have deleted the code, restarted my computer, and even tried putting in the wrong code again but with white instead of beige to try to reset everything to white….but to no avail. I now have a beige PC!! (My site looks fine on other computers.) Help! Does anyone know what I can do?
PS I haven’t actually launched my site yet. You are welcome to visit, but be aware….it’s not finished!
Oh no! Joanna, I am so sorry for the trouble I caused you. The site looks normal and I’m not seeing any code for content boxes in your CSS. The site is probably still showing up with beige on your bworser because you need to clear your browsing history.
As to your PC being beige though, I have no idea! That’s very odd actually.
Editing CSS in your stylsheet on WordPress should not have any control over your computer. Are you editing it locally on an editor program like DreamWeaver?
Hi Kristie
Thanks for your reply. Yes – the site looks normal viewed from any other device. The issue is just with my laptop!
Yes, I’m just editing locally within WP. I’ve deleted all the content box code now – will stay away from that for a while!! Clearing the browser did not help.
Oh well – I can live with it – at least it’s beige and not bright pink! I’ll ask a programming friend for help 🙂
This is the 1st step-by-step I have read on this topic! Thank you for covering this!
You’re welcome Stefanie! You’ll have to let me know when you add one in your posts and I’ll check it out!
Very informative and useful post! Thanks!
Have you used a blockquote or content box in a post yet? I’d love to see it!
Been wanting to know how to do this…so much to learn while blogging! I appreciate your help and guidance!
I still learn something new about blogging every day!
Great post! Thank you!! I love using the block quote with borders. 🙂
I like your block quote with green borders!
Thanks so much for this great info!
You’re welcome Pam!
How cool is this…… I love it, a few weeks ago I discovered the twitter box that you can put in your post content, but I love these ideas too. Thanks for sharing…. So excited to use, tomorrow probably….. 🙂
I actually have a post about using content boxes or block quotes for Twitter boxes coming up this week! Can’t wait to see how you use them.
Thank you for posting this! I get so lost when it comes to changing things and making sure I don’t mess up all the codes, so thank you for providing the information detail for detail!
You got this! Let me know if you need any help. Let me know when you’ve added them to your blog!
I’m always looking for great little tips and tricks to enhance my blog. Thanks for sharing and the awesome details
You’re welcome Maritza! My blog is full of great little tips and tricks for bloggers!
Oh my goodness! Thank you for this post! I’ve been wanting to know how to do the content box!
Your welcome! I’m glad it helped you, let me know when you use one in a blog post, I’d love to see it!
Kristie, this is a lovely post! The blockquote is usually one of my favourite things to play with, you can do so much with just a little bit of code to really mix things up!
Thanks! I agree, small little adjustments really go a long way.
Hi Kristie
Thanks a lot for this step by step tutorial! This is very valuable to me as I don’t know coding at all and therefore I’m very limited. I do have one question as my WP Site dose have also a CSS Stylesheet Editor next to the Editor itself. This comes with my WP-Theme and I do have there already some codes from the designer of the Theme. May I just add your codes into this CSS Stylesheet Editor instead of the Editor? Because I think if there will be a Theme update it will overwrite everything. The CSS Stylesheet Editor stays the same way.
Thanks for your Feedback.
P.s. I already wrote one post but couldn’t see it here. So if this is because you have to open it up, then you will see two replies from me. Please just ignore one. Thanks.
Hi Kristie
Thank you so much for this step by step tutorial. As I don’t have any knowledge in coding and nobody I know who can help me I’m very limited in changing my design. Now you gave me some tools which I really very appreciate. I do have one question regarding adding the code. I do have WP but under Apperance I do have also a point called CSS Stylesheet Editor. (In addition to the Editor. I do have in this CSS Stylesheet already the following codes which I received from the designer of my WP-Theme:
.entry-author, .list-authors {
display: none !important;
}
.flexslider .entry-date,
.flexslider .entry-author {
display: none !important;
}
@media screen and (min-width: 1000px) {
#site-title {
width: 100% !important;
}
}
Now, may I just add your codes in this CSS Stylesheet or do I have to go into Editor itself and change it? I think if there will be an update then it will overwrite again this codes.
Thanks for your help.
Hi Skye! I have not personally used a stylesheet editor, but it sounds like it is a perfect spot to put the CSS for your quotes and content boxes. If you want to send me an email with your URL, I can take a look at it for you!
Hi Kristie, very detailed instructions here. I have always been looking for adding some colours and style to my ‘quotes’. Shall try out those codes you gave above. Just a question, can I put these codes in the post ‘TEXT’ instead of the CSS stylesheet?
Thanks again for this very valuable post. Thanks Marianne for sharing too 🙂
To your Abundance, Sandy 🙂
Hi, the CSS for the quotes needs to go in the stylesheet. This will make it easy for your to us in the text section of your posts. Good luck, let me know if you have any other questions.
What an excellent post. So useful! I especially like the content boxes. I may try that. 🙂 Thank you for this, it’s awesome!
Oooh! Can’t wait to see how you use content boxes! Thanks for stopping by Erika!
Thank you for this post! And this tour! I am thinking in some new changes to my blog for 2015 and the post helped me pretty much <3
The new year is a great time for blog changes. I’m glad this post helped you!
This is such a great tutorial–I’ve wanted to learn how to add content boxes to my posts for awhile. Thanks!!
Let me know when you add and use them, I want to see! Good luck!
That was a lot of work on your part to show others how to improve their blogs! Great work!!
Thank you, that means a lot to me!
I’m so happy to have found this!
I never knew I could makes this changes, or, more specifically HOW to make these changes. Yay!
This comment made my day. I’m glad you found the tutorial useful and hopefully it will help you make changes to your blog!
Aww i am so honored that i was a motivator for you Kristie! And so glad we share the same goals too 🙂
Great post, i love using both content boxes and blockquotes, though I could stand to use the latter more often. I love how you provide a couple of different code examples too to make it easy, brilliant!
Thanks for being a part of the tour!!