Introduction | Removing the Frame | Simple Profile Backgrounds | Add a Banner or Two | Faux Frame Style | Blog Style Backgrounds
You have had all of the instructions for removing the profile frame and creating backgrounds for the various container areas. You have also seen how to add a simple one color frame around the #profileContent by using borders. Now let's take a look at creating a frame with your choice of image to replace the one that was removed.
We are going use Callie Jean's lemonade page starting with this style sheet:
Now we are going to show the frame containers by filling in the background using this image of wood.
The code to place in our style sheet for this is...
#topFrame, #leftFrame, #rightFrame, #bottomFrame { background-image: url(http://my.photobucket.com/woodtile.jpg); }
The resulting page will look like this...
If you recall from earlier in the tutorial, we removed the original frame. That action also removed the height and width definitions for the frame. The top and bottom frames now have a default height of 1 pixel. The left frame is 22 pixels wide and the right frame is 20 pixels wide. Now take a close up look at this cross section of the result page.
The total width we are working with is 644 pixels. The width of the profile (600px) plus the width of the left frame (22px) plus the width of the right frame (20px) adds up to 642 pixels, uhm, that's 2 pixels less than the total size. The left over 2 pixels shows up as filler just to the left of the right frame.
Let's see what happens when we set the left frame to be the same width as the right frame.
This means we need to separate the top and bottom frame properties from the left and right frames.
Our code for the side frames is now this...
#leftFrame, #rightFrame {
background-image: url(http://my.photobucket.com/woodtile.jpg);
width: 20px;
}
This will give us 600 + 20 + 20 = 640. That means there are 4 pixels left over to do something with. As you can see in the next picture all 4 pixels show up as a space just to the left of the right frame again.
The good news is we can control where we want our filler and we do it using the same method as we did with the simple frame method.
We are going to add the "padding" property to the #profileContent and set it so the filler is 2 pixels on each side.
The code for that property will look almost like that for the simple frame except we aren't defining any borders.
The frames with the image backgrounds takes the place of the color borders. Here is the profileContent code for our example...
#profileContent {
background-color: transparent;
background-image: url(http://my.photobucket.com/lemon_bg.jpg);
padding: 2px;
}
Maximum width for the side frames is 22 pixels with no padding on the profileContent. You can use any combination of padding and side frame widths as long your total adds up to 22 pixels for each side.
Time to jazz up our frame! We are going to switch out the top and bottom frame parts with banners from the tutorial, Add A Banner or Two.
Here is the finished page for Callie Jean.
Here is the style sheet for our page.
This is the last page of the Customized Profile Decor tutorial. We hope this has been helpful.
