[CapnStank]

CapnStank's Brigade CSS Tutorial

UPDATE 10/20/2009
Oh my, I wrote this WAY too long ago. I'm now a university student who actually knows how to code stuff! I don't just look at hex code and go.... hmmmmmm. If you have serious questions regarding this content please send me a PM, as long as I'm not preoccupied I'll do my absolute best to help you out. I don't intend to code entire files for people though! Please see my page, or my team's page for a couple examples that I've done for what this CSS can do for you.

I warn you that you cannot replace the default orange images used by SpecOps so if you're going to edit your page's CSS you should keep it to a scheme that compliments the orange. I used red on mine and black/gray on my team's.

Yes it may seem a little confusing but this is only v1.0 and I put it together in about an hour. CSS editing is actually very simple even if I made it sound confusing here. If you want me to tidy it up in any way just post and I'll edit.

I've recieved a few PM's recently requesting knowledge as to how I modified my Brigade page to have the different colours that it does. See it hereSo here's a small tutorial I've conjured which details fully how to modify the colours on your Brigade page to anything that you want. Note that many aspects of the brigade page are pictures and those cannot be changed at all.

You are able to customize as much or as little as you really want to so I'll break it down segment by segment showing you what each part of the CSS code effects what. If you have any further questions feel free to PM me, post, e-mail or anything else in between.

The Tutorial
Step 1:
The first step is always the same copy & paste this code into a blank text file and name it anything you want as long is it is recognized as a css file. (Basically it should look along the lines of words.css)

Step 2
Now that you have the base code you are free to edit it how you wish. For easy understanding please look at this picture and match up the numbers with the code to change it. For example:

body  { color: #e6e6e6; font-size: 11px; background-color: #333333; font-family: Arial, Helvetica, sans-serif }

This is the 1st line of code in the CSS style sheet and it effects the part of the page indicated by the #1 bubble within the picture.

A few things to note
There is primarily only a few lines which you are concerned about within this code and they repeat themselves over and over. Here's the basics behind them:
color: #321321 <--This refers to the color of text for that block of code. It may also refer to boarder colors for a table. Remember to look at the code to understand what you're changing.
background-color: #321321 <--Much like it says, it is the background color for this area of your page.
All color things are done in the RGB method using Hex code. If you don't know how to convert base 10 numbers to hex use this converter.
font-size: ##px. <--Refers to font size in pixels.
text-decoration: underline (etc.) <--Use to add underlines and other things.
margin-top: 0px <--Creates a margin for the specified area
padding: <-- adds margins to all sides

Ok here we go... I will simply state the first word of the block to save time and space. A few comments may be added after each line for clarification if needed.

1) body - Only the background-color has an effect
2) td - Effects a large % of text on your page
3) a - Changes font of the SpecOps links at bottom as well.
4) form - If you have any forms on your page (my Google bar) it adds margins
5) input - Changes colors/behavior of any input fields you may have (not included by default)
6) textarea - No change
7) select - No change
8) ul - No change
9) ol - No change
10) .home
11) .home02 - No change
12) .sidepad2 - *This only effects the left & right margins
13) .pad3 - **This effects the margins around ALL borders. Changing can have some drastic effects
14) .ltorangebg - All light orange backgrounds are changed here
15) .ltorangepad5 - Somewhat odd, effects only 3 sections
16) .ltgearlist - Effects odd numbered sections of gear, buddy, & game lists
17) .membername - add color: #123123 for another effect
18) .ltorangetxt - No change
19) .mdorangebg - See #14 (effects other sections of those lists)
20) .mdorangepad5 - Changes last name & ID # section's backgrounds
21) .mdgearlist - See #16
22) .mdorangetxt - No change
23) .dkorangebg - See #14 or #16
24) .dkorangepad5 - ..you get the idea...
25) .dkorangetxt - ...tralalala...
26) .title_bar - Effects "My Brigade Home" & "Points" area
27) a.title_bar - See below
28) a.title_bar:hover - Effects the "Points" text link. :hover is for when mouse hovers over link
29) .toplogin - No change (??)
30) .errortable - No change
31) .errortd - No change
32) .blacklink - No change
33) .member - No change
34) .popup - No change
35) .whitetxt - No change
36) h1 - No change
37) h2 - No change
38) .header1 - No change
39) .header2 - No change
40) .copyrite - DO NOT CHANGE for SpecOp's sake. Reducing the size of this can hide the copyrite and that is just wrong. They're giving you free stuff so post their copywrite for them PLEASE.
41) .info - No change
42) .dark_red - Changes colors of the []'s in "[ADD]" you see all over
43) .dark_red9 - No change (i think)
44) a.dark_red9 - Changes color of ADD in "[ADD]"
45) a.dark_red9:hover - When mouse hovering over ADD

Step 3:
Find a file host for your now freshly modified CSS style sheet. [Suggestions anyone?]
I use freewebs (http://www.freewebs.com/)
Suggestion from RaveExcaliber:
Geocities

Step 4:
Edit your Player description adding the line:

<link href="<URL>" type="text/css" rel="stylesheet">

Note: change <URL> to the URL of your CSS file you uploaded in step 3.

Step 5:
Refresh your Brigade page and enjoy!

Conclusion:
Note that these changes only work on your brigade main page since the code to modify is only included in your player description.
Please give credit to me if you're using this tutorial to spiffy your page as well .

-Capn

EDIT. If you would like to try a sample add this line to your Player Description:

<link href="http://www.freewebs.com/wiseguysenterprise/css/hittmann.css" type="text/css" rel="stylesheet">

It's a black/gray background with red text originally requested by The Hittmann.

This post has been edited by CapnStank: 20 October 2009 - 09:18 AM

[oxiclean]

This helped me out alot. I think it deserves a Sticky.

[Sarcon]

thanks for the help i'll start editing using this info

[SMEVIN]

i got all the way to step 3 im a little technologicly challanged so could i get a little help?

SMEVIN

[CapnStank]

Step 3 means that you have to save the file as a .css file either A) By saving it as .css or by changing the file type afterwards to read .css instead of .txt. Once you do that you have to upload it to the internet one way or another. I use my website (www.freewebs.com) but there's others out there to do it to.

NOTE: I've recently found out that if you have a large amount of text in your Player's Description you may run into errors while adding this code. Simply cut back on what you've said and the error should go away.

[CapnStank]

Another one I've designed....

http://www.specialopspaintball.com/brigade...ew.asp?id=91756

[beaker]

How do you get the breaks in your paragraphs? Mine wont, and it just looks like a long blurb.

[CapnStank]

Add <BR><BR> where you want the spaces added. This is covered in Tyger's thread below...

[RaveExcalibur]

I used yahoo geocities to host my .css file.

[CapnStank]

Edited my original post to add that (thanks) and also added some sample code if you really want to see what it does.

[EruIthildur]

Hmm... That orange doesn't really go with most designs... Has anyone experiemented with layers and/or JS to fix the orange sections of the brigade pages?

[CapnStank]

Not yet, but it is worth a shot. Maybe I'll do that over the break I'm getting at the end of the month.

[RaveExcalibur]

You can do the same thing with the new team link pages. Here's mine:

Team Kill Chain

EDIT:
I just designed this one for my other team.

Team Stupify


Another good hosting site: la.gg

This post has been edited by RaveExcalibur: 27 June 2007 - 08:14 AM

[Cheif Crazy Wombat]

Is there ay you just add a background and not change any thing else?

[DFRESH]

Ok, I am a total moron when it comes to designing anything web or computer related. In the past I have just copied and pasted things onto myspace and what not. Is there anyone who can tell me how or where I can get a simple camo background? I would try and do it myself, but I fear for the life of my laptop that I might throw out the window because of frustration