![]() |
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>
</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.
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.
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.
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>
<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.
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>
<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.
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. :)
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!
ReplyDeleteHave you tried fixing the margins for the image? (See 'margin-bottom' and 'margin-right' in the image html.)
DeleteThis 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
ReplyDeleteThanks! 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.
DeleteTo 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! :)
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.
DeleteThanks a lot! Very clear explanation and easy to implement - a real time saver.
ReplyDeleteThanks a lot! Very clear explanation and easy to implement - a real time saver.
ReplyDeleteGreat post! Thank you very much. this post would really helping me to customize my post appearance. really loves it!
ReplyDeleteThis is exactly what I have been looking for. I can't believe it took me so long to find it. Thanks!
ReplyDeleteWhat 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??
ReplyDeleteWhat is the code for making the texbox size fixed???
ReplyDeleteHey 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.
ReplyDeleteI 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