Monday, February 12, 2007

Linda's How-Do-I-Series? How Do I Change The Background Color Between The Borders Of My Pictures Or Banners?

In our Linda's How-Do-I Series? How Do I Add A Colored Border Around My Banners?, and our Linda's How-Do-I Series? How Do I Make My Banners With A Colored Border Clickable? articles we showed you how to add color to the borders around your banners and how to make those banners clickable back to your website or blog.

Now, let's say we want to change the background color around those banners just between the borders from say white to say - yellow? How would we do that? Well, here's how:

To review a little - last time we had two banners side by side. Here's the HTML coding for that (minus thee ***'s which are there so you can view the HTML in this article):

<***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" /><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" />

And, that produced this:



Last time we also had two banners that we wanted to show side by side, but we wanted some margins of 15 px (i.e. pixels) around them. Here's the HTML coding for that (minus the ***'s which are there so you can view the HTML in this article):

<***img style=***"MARGIN: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" /><***img style=***"MARGIN: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" />

And, that produced this:



Last time we also wanted to draw a blue rgb(0, 0, 105) border around those banners and we want our border to have a 4px (i.e. pixels) thickness and we want our line to be a solid line. Here's the HTML coding to do that (minus the ***'s which are there so you can view the HTML in this article):

<***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105);"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105);">

And that produced this:



And, last time we showed you how to make those banners clickable. Here's the HTML coding to do that (minus the ***'s which are there so you can view the HTML in this article):

<***a href="http://thebookreviewcorner.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105);"><***/a><***a href="http://lindawalshoriginals.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105);"><***/a>

And, that produced this:



And last time we wanted to have a little margin around the banners. Here's the HTML coding to do that (minus the ***'s which are there so you can view the HTML in this article):

<***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 15px;" /><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 15px;" />


And that produced this:




Now, let's say we want to add a yellow background color (#ffff00) between the borders of the banners and still keep them clickable back to our websites or blogs. Also, we want to change the color of the border lines from yellow to blue (IE: color #000069). Here's how we would do that (minus the ***'s which are there so you can view the HTML in this article):

<***a href="http://thebookreviewcorner.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 15px; background-color: yellow;" /><***/a><***a href="http://lindawalshoriginals.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 15px; background-color: yellow;" /><***/a>

And, that produces this:



I hope this helped to show you how to change the background color around clickable banners just between the borders.


Posted by Linda Walsh Originals - "Doll Patterns for Grown-up Girls!"

No comments:

Post a Comment