How to Make Colored Boxes
What You Will Learn
You will learn how to put a box of color around text like in the header above or like this:
Let's Do This!
Step 1: Getting the Code
Copy the following code:
<div style="background: none repeat scroll 0% 0% rgb(244, 240, 236); padding: 5px 8px; text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><b>Your Text Here</b></span></div>
</div>
Step 2: Setting the Color
<div style="background: none repeat scroll 0% 0% rgb(244, 240, 236); padding: 5px 8px; text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><b>Your Text Here</b></span></div>
</div>
The highlighted part of the code sets the color of your box. Refer to a chart like this RGB and Hex Values chart and select the numbers that correspond to the color you want to use.
Step 3: Setting the Padding
<div style="background: none repeat scroll 0% 0% rgb(244, 240, 236); padding: 5px 8px; text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><b>Your Text Here</b></span></div>
</div>
The number highlighted in pink sets the top and bottom margins (or "padding").
The number set in red sets the left and right margins (or "padding").
The following pictures show what happens when you adjust the numbers:
<div style="background: none repeat scroll 0% 0% rgb(244, 240, 236); padding: 5px 8px; text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><b>Your Text Here</b></span></div>
</div>
This code is set for centered, large, and bolded text. You can adjust these features as you like.
Step 5: Setting the Borders
The code above does not currently have any borders set. If you would like borders, then copy and past the following code:
<div style="background: none repeat scroll 0% 0% rgb(244, 240, 236); border:3px solid #000000; padding: 5px 8px; text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><b>Dotted</b></span></div>
</div>
The part highlighted in pink sets the width of the borders. You can adjust this number to make the borders wider or narrower.
The part highlighted in blue sets the color of the borders. The code above has the borders set for black. You can refer to the RGB and Hex Values chart to select a new color.
The part highlighted in red sets the type of border. You can change this word to any of the following to get a different type of border:
I like to keep a draft document with the code saved in Blogger. That way whenever I want to use a colored box, I just open the file and copy and paste the code. You can also make a template draft document if you use the same code on all of your review posts, etc.
The form is anonymous, so please don't feel shy at all!
I'm certainly not an expert, but I'll try my hardest to explain what I do know and research what I don't know.
Click here to read previous Tips & Tricks Posts
Tweet
Click here to read previous Tips & Tricks Posts
Oh!! I've always wondered about this!! Thanks so much!! :) I've always wanted to be able to do this but never had an idea of how! *jumps up and down* I need to try it soon.
ReplyDeleteAwesome Small! Thanks for this post. The blogger world needs more people like you! :-D
ReplyDeleteThis is so helpful. I had no idea how to do any of this. I was always wondering how do all the bloggers do that. Thanks :)
ReplyDeleteTo do this on my posts I just highlight the text and press the blockquote button. I think it's pretty much the same thing - not sure, though. :)
ReplyDeleteWhat a great tip! I'd never even thought about this one, but I can see how useful it would be. It will fit perfectly into my reviews. I'll definitely try this one out.
ReplyDeleteThank you so much! I always wanted to know how to do this!
ReplyDeleteOoh, I'm glad you did this one because I've been wanting to figure out how to highlight book descriptions and other Important Things. My old blog (on Wordpress) had a theme that did this automatically. I can't wait to try it out. Though, I'm computerally impaired and it will take me several tries and cost a lot of hair.
ReplyDeleteWow! Very informative. I don't understand it 100% but I will mess around with it and if I run into problems, I'll come back and post my questions here.
ReplyDeleteThanks for such a great post! Very helpful.
It always makes me nervous to go into try to manipulate the html coding stuff, so posts like this are really very helpful.
ReplyDeleteGreat stuff! I tried to do this a few weeks ago but couldn't work it out. I wish I'd read this first. Danny from The Bewitched Bookworms ended up doing it for me :D
ReplyDeleteThank you for this! These posts are very helpful =)
ReplyDeleteThis topic would have been my submission request! I was actually going to email you and be all whiny and say "please show me how to do stuff that I could look up without bothering you but I am too lazy to actually do!" But then you wouldn't have liked me anymore so thankfully you saved us both. :D
ReplyDeleteThis is step one, so now can step two be how to offset it from the picture like I've seen? How do you make it go around the picture, say, in a corner?
ReplyDeleteI'm so demanding.
Logan you make me laugh! But, I'm with you Part II, please part II she chants!
ReplyDeleteYou’re all very welcome! I’m glad this post was helpful to so many of you :)
ReplyDeleteLeanna, Yes, it can do the same thing as long as you have the blockquote code set how you want it. I have my blockquote set for one color, but sometimes I like to use a different color or offset so then I use these tags.
Rubita, Aw, if you have any trouble with it you can always email me and I’ll try to help as best I can :)
Gina, Definitely post your questions here, or email me. :)
Missie, I always get so nervous too. I’m afraid I’m going to break my whole blog :P Luckily these codes just go in your post, so the worst damage you can do is mess up a single post.
The Slowest Bookworm, You were probably in far better hands with Danny! She’s wonderful.
Logan, Pfft, don’t worry! You can always email me whenever. Or, if you want anonymity you can submit a request in the new form I finally figured out how to make :P It’s linked in this post, will be linked in all future posts, and can also be found in the Blogging Tips and Tricks page (left sidebar).
Logan and Gina, It’s actually a lot easier than it seems. I was ready to tear my hair out and then I figured it out and couldn’t believe how simple it was. All you do is put the picture where you want it. The text automatically wraps around it. That’s it! I actually figured it out accidentally. Let me know if you can’t get it to work. :)
Thanks for the tips, I might try this on my blog. I have zero html knowledge so this is very helpful.
ReplyDeleteI love these posts! Thanks so much for teaching us stuff. I'm going to try this out. I usually do mine in Powerpoint or Publisher.
ReplyDeleteHow do you put the image of the book with the box?
ReplyDeleteGreat, thanks a lot! I can't wait to put this in action, hopefully for my next review. My second question was the same as Gina's and Logan's with the image in the corner which you already answered. Definitely bookmarking this now!
ReplyDeleteOh...I see about the picture. I totally skipped that when reading your answers to people's questions. LOL
ReplyDeleteThank you so much,I've been wanting to know this for ages! You're brilliant with HTML and all the technical side of blogging and it's so nice of you to share what you know to help other people. I'll have a go at this soon :)
ReplyDeleteYou're all so welcome :)
ReplyDeleteI love you forever and always for this post! I have seen directions for this from a few different bloggers, but yours look to be the most easy-to-follow! Thanks so much, SR - I am going to try this out on my post tomorrow!
ReplyDelete-Linds, bibliophile brouhaha
Oh, awesome! I always wanted to know how people did this. Thank you so much for sharing the tip. What a great feature :)
ReplyDeleteI did it! No hair pulling necessary! You're a genius!
ReplyDeleteLinds, You're so welcome! I'm so glad you found my instructions easy to follow!
ReplyDeleteA Backwards Story, You're very welcome!
Rubita, Yay for no hair pulling!! :) I'm glad I could help!
I think I love you.
ReplyDeleteI know I love you! :D
ReplyDelete~Kelsa
Small-
ReplyDeleteYou're awesome! This worked so great for my whole post! Just what I wanted. Thanks for all the great things you do!!
Heather
Aw, you’re all so welcome!
ReplyDeleteThank you! Ruby sent me to your blog to learn how to do this!
ReplyDeleteAngie
XOXO Angela's Anxious Life
I just tried this for my review post tomorrow. If it looks bad I'm blaming you. ;)
ReplyDeleteThank you so much! Great post!
ReplyDelete-Michelle
great post! How can I change the size of the colored box and/or make two of them side-by-side on a page? Thanks for the help!
ReplyDeleteI feel a little silly asking for help, but I've been waiting to learn how to do this for quite some time now, and I'm following your instructions and everything, but all that shows up is the code, like I've done something wrong, so would you mind helping? :)
ReplyDeleteI don't mind trying :) Can you copy and paste your code into the comment box?
DeletePlease don't feel silly at all. Code for me is like banging my head against a wall until all of a sudden something clicks and it works :P
This was so helpful, thank you very much!!!
ReplyDeleteI have another question. Is there any way I could change the width of the box, so that it's not as wide as the rest of my post? Is that possible?
Thank you so, so much for your help!!! :)
You're so welcome!
DeleteYes, you can change the width! See in the code where it says padding: 5px 8px;? Right after that, write: width: 100px; and adjust the number to whatever you want. Hope that helps :) Let me know if you have any other questions!
Yay, that worked!!! You're so awesome!!! I'm sorry to be a pain, but may I ask you another question? When I change the width like that it automatically aligns on the left. Is there a way to center the whole box?
DeleteThank you again so much! You're a genius!!! :D
Thanks so much for this great tutorial! It was so helpful.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you SO much for posting this. I have a basic template now and will refine it, but that basic things is something I have wanted to be able to do for a very long time.
ReplyDeleteYour tutorial was the first I found that actually worked! Thank you :)
ReplyDeleteI LOVE this tutorial!! I have been looking for a way to do this better on my blog...and you just answered my question that I have had for years!! Thanks a bunch!! Definitely will be looking through your other tutorials. Thanks for sharing.
ReplyDeleteThank you! I have been looking all over for this!
ReplyDeleteCucie @ Cucie reads
Oh, dear..now the lower edge of the colored box just keeps expanding to include all further text that I add. I just wanted to have it work as a heading . I know I must have missed something!
ReplyDeleteCheck your code for < backslash div > (but with the actual / ) or a typo in that part of the code. This will be toward the end of your code AFTER the text you want to include in the color box. :)
Delete