Home Shows & Regulars Pages, Sites & Teams Events & Results News Photos Videos Games & Contests Members & Bio Pages More     

Facebook Activity

5902 active RS users in the past hour
 

Featured Live Webcasts




Full Live Webcast Schedule

Featured Pages, Sites & Teams More

Who's currently hot on RunnerSpace.com Hover over an image for more information
 
You must be logged in to see this section

Featured Albums More

All the latest action in photo form Hover over an album
 

Recent Photos More

The latest photos uploaded to the site
Hover over a photo for more information

Arcade Leaders More

Scores are reset monthly
MemberPts
 

Popular Games More

What's hot in the arcade
Seal Bounce
Rally 2100
Roulette
Pingu Slap
Solitaire
Breakout
Minigolf
Penguin Bashing
Ron North's Jewels
Autobahn
 

Contests

Featured RunnerSpace Members Show All Members

Hover over a user for more information
Find Member: Find Athlete Bio:
 
You must be logged in to see this section
   
   
   

Member Login

Forgot your Password?
 
  
 
Upload a Photo Upload a Video Add a News article Write a Blog Add a Comment
Blog Feed News Feed Video Feed All Feeds

Folders

All (37)
 
-------

Videos

 

Custom Header Tutorial - RunnerSpace.com

Published by
ross   on Jul 16 2008, 12:57 AM
 

How to make a custom header for your profile with CSS
To see the rest of the video tutorials, please go to our RunnerSpace Help Center.
Submitted by Fast RunnerZ

Where To Go:
Go to "
My Account"
Click on "
Profile Design" below the Members tab on the navigation bar.
Scroll down to the bottom of the page to the CSS code box.

What To Do: Change Header Background to Picture
In the CSS code box copy and paste all of the following code:

/* This makes the RunnerSpace logo invisible */
#profile_photo {
/* for IE */
filter:alpha(opacity=0);
/* CSS3 standard */
opacity:0.0;
/* for Mozilla */
-moz-opacity:0.0;
}

/* This makes your display name invisible */
#displayname {
/* for IE */
filter:alpha(opacity=0);
/* CSS3 standard */
opacity:0.0;
/* for Mozilla */
-moz-opacity:0.0;
}

/* This makes the words "you RUN the place" invisible */
#catchphrase {
/* for IE */
filter:alpha(opacity=0);
/* CSS3 standard */
opacity:0.0;
/* for Mozilla */
-moz-opacity:0.0;
}

#header {
height: 170px;
background-image: url(http://i2.photobucket.com/albums/y36/floeckie/steensheader.jpg?t=1215571097);
background-position: top center;
background-repeat:no-repeat;
background-color: #ffffff;
padding-bottom: 0px;
}

**Change ONLY the red sections of the code to ensure that it works correctly.

To determine what picture you want as your header background, change the http://www.example.com/picture.jpg to the web address URL of the picture you want.

Next, make the width and height the same size as your picture by changing the 950 for the width and the 150 for the height.

Last, change your picture's location by changing top (use top or bottom) and left (use left right or center). Using top center would set your picture at the top and centered in the middle of the header.

Some example profiles:
http://www.runnerspace.com/profile.php?member_id=41
http://www.runnerspace.com/profile.php?member_id=133

If you have any trouble with this or have other questions, send us a message. We'd be happy to help you.

You may also like these tutorials:
-Custom Background Tutorial
-Custom Menu bar Tutorial
-Custom Mouse Cursor Tutorial
-Custom Blocks - Youtube example Tutorial

Post to:  
Post as: 
History for RunnerSpace.com/Help
YearVideosNewsPhotosBlogs
2013   38    
2012 4   105  
2011 4      
2010 20      
2008 13   1 2