Custom CSS Styles for your profile on CustomFighters.com - Part 1

So... you just can't bear to use a style that someone else might be using... now what?

Make your own fully custom profile using CSS!

In this first part, we will go over a few of the basics, to get your custom profile started right away!

The Before Shot:

To edit your profile, once you are logged in, click on "UserCP" in the navigation bar of the forum. Then, on the left, click "Edit Profile."

Scroll all the way to the bottom, make sure there is nothing in the Profile Style drop-down box, as this overrides the CSS box! If there is, simply click on the drop down box, and select the empty space at the top.

Now, click in the CSS box, and you're ready to start designing!

Step 1: The Background
This is the very background of the whole page, it must be set to an image, but I will show you how to trick it into displaying a solid shape later...

The code to set the background image should look like this:

body {
background-image : url(http://www.url.com/yourimage.gif);
}

(replace the web address for the URL to your image)

Hit "Save Changes" and go check out your profile!

By default, it will set the image to a fixed position (it will not move when you scroll) and it will repeat it in both directions.

Example:

I set the background to use this image:

And this is what my profile looked like with no other modifications:

You can also set the background image to move with the page when you scroll by adding this into your code:

background-attachment : scroll;

So, now your code should look like:

body {
background-image : url(http://www.url.com/yourimage.gif);
background-attachment : scroll;
}

There are many more things you can do that alter the way the background is displayed: you can make it not repeat, or only repeat in one direction, you can change its position, and much more. See the link below for more CSS background style options:
http://www.w3schools.com/css/css_background.asp

Set a solid color background:

The profiles are set up to use a background image, however, you can tell it not to use a background image by using this code:

body {
background-image : none);
}

That will leave it with a black background, but you can specify a different color by adding in this line:

background-color : #ff0000;

The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#FF0000)

So, now your code should look like:

body {
background-image : none);
background-color : #ff0000;
}

Then, instead of a background image, you would just have a solid color!

Continued on Next Page