Thursday, February 24, 2011

How to Make Colored Boxes




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:




Step 4: Setting the Text


<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 

48 comments:

  1. 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.

    ReplyDelete
  2. Awesome Small! Thanks for this post. The blogger world needs more people like you! :-D

    ReplyDelete
  3. This 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 :)

    ReplyDelete
  4. To 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. :)

    ReplyDelete
  5. What 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.

    ReplyDelete
  6. Thank you so much! I always wanted to know how to do this!

    ReplyDelete
  7. Ooh, 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.

    ReplyDelete
  8. Wow! 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.

    Thanks for such a great post! Very helpful.

    ReplyDelete
  9. It always makes me nervous to go into try to manipulate the html coding stuff, so posts like this are really very helpful.

    ReplyDelete
  10. Great 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

    ReplyDelete
  11. Thank you for this! These posts are very helpful =)

    ReplyDelete
  12. This 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

    ReplyDelete
  13. This 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?

    I'm so demanding.

    ReplyDelete
  14. Logan you make me laugh! But, I'm with you Part II, please part II she chants!

    ReplyDelete
  15. You’re all very welcome! I’m glad this post was helpful to so many of you :)

    Leanna, 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. :)

    ReplyDelete
  16. Thanks for the tips, I might try this on my blog. I have zero html knowledge so this is very helpful.

    ReplyDelete
  17. I 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.

    ReplyDelete
  18. How do you put the image of the book with the box?

    ReplyDelete
  19. Great, 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!

    ReplyDelete
  20. Oh...I see about the picture. I totally skipped that when reading your answers to people's questions. LOL

    ReplyDelete
  21. Thank 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 :)

    ReplyDelete
  22. I 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!

    -Linds, bibliophile brouhaha

    ReplyDelete
  23. Oh, awesome! I always wanted to know how people did this. Thank you so much for sharing the tip. What a great feature :)

    ReplyDelete
  24. I did it! No hair pulling necessary! You're a genius!

    ReplyDelete
  25. Linds, You're so welcome! I'm so glad you found my instructions easy to follow!

    A Backwards Story, You're very welcome!

    Rubita, Yay for no hair pulling!! :) I'm glad I could help!

    ReplyDelete
  26. Small-

    You're awesome! This worked so great for my whole post! Just what I wanted. Thanks for all the great things you do!!

    Heather

    ReplyDelete
  27. Thank you! Ruby sent me to your blog to learn how to do this!

    Angie

    XOXO Angela's Anxious Life

    ReplyDelete
  28. I just tried this for my review post tomorrow. If it looks bad I'm blaming you. ;)

    ReplyDelete
  29. 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!

    ReplyDelete
  30. I 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? :)

    ReplyDelete
    Replies
    1. I don't mind trying :) Can you copy and paste your code into the comment box?

      Please 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

      Delete
  31. This was so helpful, thank you very much!!!

    I 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!!! :)

    ReplyDelete
    Replies
    1. You're so welcome!

      Yes, 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!

      Delete
    2. 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?

      Thank you again so much! You're a genius!!! :D

      Delete
  32. Thanks so much for this great tutorial! It was so helpful.

    ReplyDelete
  33. This comment has been removed by the author.

    ReplyDelete
  34. Thank 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.

    ReplyDelete
  35. Your tutorial was the first I found that actually worked! Thank you :)

    ReplyDelete
  36. I 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.

    ReplyDelete
  37. Thank you! I have been looking all over for this!

    Cucie @ Cucie reads

    ReplyDelete
  38. 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!

    ReplyDelete
    Replies
    1. Check 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

It's all about friendly conversation here at Small Review :) I'd love to hear your thoughts!

Be sure to check back again because I do make every effort to reply to your comments here.

Because I am absolutely terrible about following through with blog awards, I can't in good conscience accept any more. Thank you very much for thinking of me though!

Spam WILL be deleted. Attacks on myself or other comments WILL be deleted.

Related Posts Plugin for WordPress, Blogger...