26 October 2012

How to create colored boxes with image or text inside

26 October 2012
Here's another one of my favorites--colored boxes, which I use all the time when making something stand out in a post or on my sidebar. I usually use this code to feature the book summaries or synopsis of my book reviews on WSP.

Yay for colored boxes!


Here's the code for a simple colored box with text inside.

<div style="background-color: #FFF8C6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">
</a><b>This is a colored box</b><br/>
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.
</div>

This is how it looks:

This is a colored box.
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.

To change the color of the background, simply edit background-color (red text). You can refer to this page for HTML color codes and names.

You can adjust the padding (blue text) according to your preference. Padding refers to how near/far you want your text to be from the edges of the box. For example, a 20px padding will make it look like this:

This is a colored box.
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.

If you want the box to be as wide as your post, simple remove the margin codes: margin-left: 20px; margin-right: 20px; or if you just want to adjust the margins, just edit the measurements (pink text).

If you remove the margin codes, it will look like this:

This is a colored box.
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.

To edit the text alignment, you can just use the alignment tool.



Here's how the code looks if you have an image inside.

For me, the easiest way to do it is to just insert an image using the Insert Image icon on the toolbar and then just copy the HTML code for the image and insert it inside the code for the colored box.

See where I inserted the code for the image?

<div style="background-color: #FFF8C6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">

<a href="YOUR IMAGE URL" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="100"/></a>

<b>This is a colored box</b><br/>
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.
</div>

I have my image aligned to the left, so it will look something like this:

This is a colored box
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.


If you want your image to go outside the colored box, simply insert the code for the image before the code for the colored box and add a couple of line break tags (green text) to bring the colored box lower.

<a href="YOUR IMAGE URL" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="100"/></a><br/><br/>
<div style="background-color: #FFF8C6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">
<b>This is a colored box</b><br/>
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.
</div>

It will look something like this:


This is a colored box
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.


Keep adding a line break tag if needed to get the format you want.

Experiment with the margins, padding, with line breaks, and with your image size to get the look you want. :)

13 comments:

  1. Thank you for this post! I have a question about adding the image. When I add the image, my words are right next to the edge of the image. I've tried changing the padding, etc to get the text to move away from the image but nothing is working. Help!

    ReplyDelete
    Replies
    1. Have you tried fixing the margins for the image? (See 'margin-bottom' and 'margin-right' in the image html.)

      Delete
  2. This is fantastic, just what I was looking for, I also love your about the author box and was wondering can this be embedded into the html of the blog so that it is in every post? My current subscribe button looks terrible and I want something more professional. I am not that html savvy. How did you get a lemon yellow background and then grey? that looks fab

    ReplyDelete
    Replies
    1. Thanks! Yes, my author box shows up in every post. You can find the tutorial here: http://colorityou.blogspot.com/2012/10/how-to-add-author-box-at-bottom-of-your.html.

      To do the two-color background, I just added a second colored box with a different background below the first one. Let me know if you need help! :)

      Delete
    2. Thanks so much Leah, I really appreciate your help, I have not implemented it yet but it is on my list to do. Your blog looks great.

      Delete
  3. Thanks a lot! Very clear explanation and easy to implement - a real time saver.

    ReplyDelete
  4. Thanks a lot! Very clear explanation and easy to implement - a real time saver.

    ReplyDelete
  5. Great post! Thank you very much. this post would really helping me to customize my post appearance. really loves it!

    ReplyDelete
  6. This is exactly what I have been looking for. I can't believe it took me so long to find it. Thanks!

    ReplyDelete
  7. What if I want a text box to be a fixed size? Fx the height I want to be fixed, so it doesn't change with more then one box next to each other??

    ReplyDelete
  8. What is the code for making the texbox size fixed???

    ReplyDelete
  9. Hey there. This was really helpful. I just need to know how we make the picture of the book come out of the box from the LEFT side of the colored box? I tried a lot of stuff but I simply can't understand how to do it.

    ReplyDelete
  10. I know you posted this sometime ago but i'm sure it's still helping people, works a treat for me, very clear and easy to understand. Thanks

    ReplyDelete

Thanks for dropping by! :)

© 2014 Color It YOU - Blog Design and Tips. Powered by Blogger.
Legal terms and disclaimers here.