Introduction | Removing the Frame | Simple Profile Backgrounds | Add a Banner or Two | Making a New Frame | Blog Style Backgrounds
So what are faux side frames? This is a way of using a background image with decorated edges in the profile area. You will need image or photo editing software to make your own profile background or a good friend to do one for you.
Let's go back to Callie Jean's lemonade page. We have the lemonade background with the lemon profile background. We also have her banner for lemonade, but it looks like it is floating on top of her page. Let's anchor that banner by giving it supports to make it look like a lemonade stand.
Our profile area is 644 pixels wide so the finished width of our background with border edges will also be 644 pixels. We also know from the first pages the frame sides are 22 pixels wide on the left and 20 pixels wide on the right. We want even sides so we will make both sides 20 pixels. This will leave us 604 pixels to fill in the middle. (644 - 20 - 20 = 604)
We have found this image which tiles for our profile background.
This image is 89 pixels wide by 125 pixels high, not the 604 pixels wide that we need so we will need to create the proper size image.
NOTE: Many image editors can create this tiling effect into a single image for you.
Be sure to check your editor out before going to the effort of doing your own tiling.
DIY tiling: Create a blank image that is 604 wide by 125 high, the same height as our image that tiles.
Next copy our original image and paste it into our blank starting on the left side.
Keep pasting the original image into our blank, butting the sides together until we fill up our blank.
We now have the start of our custom faux frame.
Time to put on our frame sides.
We are going to change the size of our image by adding 20 pixels on each side.
This is not a resize! (In Paint Shop Pro this is called "canvas size")
When we add this space we are going to fill it in with a color picked from our banner.
The resulting page will look like this with the images in the #contentTable ID tiling down the page and filling in the profile area.
NOTE: We made the footer transparent so you could see how this tiles all the way down the page.
The CSS code to make the footer transparent is #siteFooter { background: transparent !important; }
You are not limited to using just colors. You can fill in the edges with another image.
Here we remove the brown and use a picture of wood for the edge.
We added a top banner and a bottom banner edge to our page to complete it.
See Add a Banner or Two for details on banners.
Our finished page now looks like this:
By the way, this is a very popular method of decorating pages among several members of Dogster and Catster.
The full style sheet for the above page looks like this:
You are not limited to an image with predefined edge width of 20 pixels.
Sometimes the whole image can be used with modifications to the center so the text is readable.
This creates a look of the graphic edge blending into the center.
We did NOT change the color of the text in these examples so you could see what these look like without the added distraction of different fonts.
You can find information on fonts at Pawsome Pages.
[ Dogster link to Fonts thread ]
[ Catster link to Fonts thread ]
Take this image of a stone wall that is 644 pixels wide.
The notches where the stones meet were made transparent so the background would show up in those areas.
The center area of the image was faded so the text would show up better.
We made a Harry Potter page themed page with the stone wall profile...
Here are 2 other examples of what can be done with images made for the #contentTable...
This first one started out as a gingham print on the bias.
We placed a cream vertical gradient on top of the gingham print.
This gradient is a solid color in the center then fades out to the sides,
which made the following image for the #contentTable.
This background will make our text much more readable.
We used a simple one color line for the top frame on this page. Here is what our page looks like now.
The last example started out as a piece of parchment paper.
We aged it by adding an overlay of stains we had available with our image editing software.
We added another overlay of stain across the top and saved the top 34 pixels for our top banner.
This will look good with a number of backgrounds. We show it here with our HP background again.
Hope this gives you some ideas to start with and make your own creation!
<< Previous Next >> "Create Your Own Custom Frame (Method 3)- Make an Actual Frame"
