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
