Customized Profile Decor for Catster and Dogster

Introduction  |   Simple Profile Backgrounds  |   Add a Banner or Two  |   Faux Frame Style  |   Making a New Frame  |   Blog Style Backgrounds

Removing the Profile Frame and Background

The first thing you will need to do to customize your frame is to include a piece of javacript code for your page. This will do two things for you.

Copy and paste one of the following lines into one of your bio fields:

For Catster:

For Dogster:

The javascript will produced a page very similar to the following with the profile frame removed.
The light cream center which remains is our profile container. This has the ID of #profileContent assigned to it.

Please NOTE that the left edge of the profile area is right up against the pictures and the text.
The right side will have about 2 pixels between the edge the the right edge of the stats box.


Time to Create a Style Sheet

We are going to set up a cascading style sheet (CSS also call style sheet) for our page so we can start decorating it.
Don't let that term scare you. It's just the name. Think of it like a game or puzzle that becomes easier each time you play it.
For more detail on CSS please visit the Pawsome Pages forum => The Cascading Style Sheet ( Dogster link / Catster link )

THE FOLLOWING MESSAGE IS VERY IMPORTANT!!!
The first line of your style sheet must be <style type="text/css">.
The last line of your style sheet must be </style>.
ALL of your style code goodies will be placed between these two lines.

Here we go! This is the image we are going to use for our main background.

The name we use to identify the whole page background is "BODY". Now we are going to define how we want that section to look by adding "properties".

The property for a background image is "background-image" and the pointer to the location of your image is "url(your-image)".

NOTE: We recommend putting all of your images for your page in your personal account at http://www.Photobucket.com. Even the ones from sites that create backgrounds for Facebook and Myspace pages. Just download the image to your computer, then upload it to your Photobook account. Once you have your image uploaded, copy the "Direct Link" and put it in place of the "your-image" part of the URL.

We like the look of our background NOT scrolling with the text on our page, so we are going to add another property "background-attachment". There are 2 options which go with this property, "scroll" (which is the default) and "fixed". Anytime you want to use the default, you do not have to include that property and option in your style sheet.

The results of these changes will look something like this:

Add the following code to our style sheet to have the background show behind our profile information.

This look of the same background throughout maybe suitable for those who have large size items in their bio fields but do not like the look of going outside the frame.

Here's another reason to use "fixed" with your background image. If a piece of your text cannot be seen, the user can scroll it to a different position. The image not moving with the text allows the user a chance to view the text against a different part of the background.

Here is what the full cascading style sheet for the above sample looks like...

Here are some screen shots of pages with a transparent profile area so the background shows through. Click on a picture to see a larger view.

Self-portrait background by Sam

Beautiful sunset for Oly

Balster's sunflower with honey bee

Alexis's black rose

 

Want to create a blog style background? You now have the steps you need to remove frame and profile background.
Go HERE to learn more about blog style backgrounds.

 

<< Previous     Next >>   "Profile Backgrounds (Method 1) - Plus, A Simple, Simple Profile Frame"



To go to Pawsome Pages, click on the cat for the Catster side and on the dog for the Dogster side.