How to Change the Colors of Your Profile/Group/Event Menu Bar with CSS
To see the rest of the video tutorials, please go to our RunnerSpace Help Center.

*Note: This is a moderately advanced blog involving CSS code. If you have any trouble with changing these colors, please let us know and we will help you.

Where to Go:
Go to "My Account (or the Page Design bubble link in the Editor Options box on your profile/group/event homepage)

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:
In the CSS code box, copy and paste the following code

/* size and font weight "ie normal or bold" of the menu text */
#menu a div,#menu a:link div,#menu a:visited div,#menu a:active div {
font-weight:normal;
font-size: 14px;
}

/* color of the main part of the "non selected" tab backgrounds */
/* text color in the "non selected" tabs */
#menu a div,#menu a:link div,#menu a:visited div,#menu a:active div {
background-color:#FF0000;
color:#000000;
}

/* color of left side of each "non selected" tab */
#menu a,#menu a:link,#menu a:visited,#menu a:active {
background-color:#FF0000;
}

/* rollover color of the main part of "non selected" tab backgrounds */
/* rollover text color in the "non selected" tabs */
#menu a:hover div {
background-color:#666666;
color:#ffffff;
}

/* rollover color of left side of each "non selected" tab */
#menu a:hover {
background-color:#666666;
}

/* color of "selected" tab background */
/* color of "selected" tab text */
#menu .selected div,#menu .selected:link div,#menu .selected:visited div,#menu .selected:active div,#menu .selected:hover div {
background-color:#ffffff;
color:#000000;
}

/* color of the left side of "selected" tab background */
#menu .selected,#menu .selected:link,#menu .selected:visited,#menu .selected:active,#menu .selected:hover {
background-color:#ffffff;
}

Do Not change any of the green CSS. Only change the red CSS as directed below (click Save CSS to save your CSS code to your profile/event/group).

Change any of the red 6-digit codes to the colors you want. 6-digit codes for colors are called Hex Color Codes. Use the color code finder below to find virtually any color you want.

HEX Color Code Generator from http://www.2createawebsite.com/build/hex-colors.html

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