Special Ops Paintball: Complete CSS Editting Tutorial - Special Ops Paintball

Jump to content


  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

Complete CSS Editting Tutorial If you really want to... Rate Topic: ***** 1 Votes

#1 User is offline   CapnStank 

  • Sophomore Member
  • PipPipPip
  • Group: Members
  • Posts: 606
  • Joined: 04-September 06
  • Gender:Male
  • Location:Regina Saskatchewan
  • Brigade Name:CapnStank

Posted 16 January 2007 - 10:12 AM

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 :dry:.

-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

"Watch out for the guy with the pump, they tend to hit their target."
My BST Feedback: +3/0
0

#2 User is offline   oxiclean 

  • Sophomore Member
  • PipPipPip
  • Group: Retired/Inactive Moderator
  • Posts: 438
  • Joined: 22-September 06
  • Brigade Name:OXICLEAN

Posted 17 January 2007 - 09:58 PM

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

"In the end only the fittest survive in this world. If your strong you live, If your weak you die."
0

#3 User is offline   Sarcon 

  • Forum Newbie
  • Pip
  • Group: Members
  • Posts: 25
  • Joined: 16-January 07
  • Gender:Male
  • Location:San Jose, California
  • Brigade Name:Sarcon

Posted 18 January 2007 - 04:20 PM

thanks for the help i'll start editing using this info
Pain is weakness leaving your body.

Glory.. Sacrafice.. the will to make the impossable possable... daggers just another day at the field
0

#4 User is offline   SMEVIN 

  • the next click click boom entourage
  • PipPip
  • Group: Members
  • Posts: 151
  • Joined: 12-February 06
  • Location:calhoun, GA
  • Brigade Name:SMEVIN

Posted 18 January 2007 - 04:38 PM

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

SMEVIN
The signature in this location has been removed due to FORUM RULES VIOLATIONS. Please check this link : FORUM SIGNATURE RULES AND REGS and feel free to repost your signature according to the guidelines set by this forum.
0

#5 User is offline   CapnStank 

  • Sophomore Member
  • PipPipPip
  • Group: Members
  • Posts: 606
  • Joined: 04-September 06
  • Gender:Male
  • Location:Regina Saskatchewan
  • Brigade Name:CapnStank

Posted 21 January 2007 - 03:46 PM

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.
"Watch out for the guy with the pump, they tend to hit their target."
My BST Feedback: +3/0
0

#6 User is offline   CapnStank 

  • Sophomore Member
  • PipPipPip
  • Group: Members
  • Posts: 606
  • Joined: 04-September 06
  • Gender:Male
  • Location:Regina Saskatchewan
  • Brigade Name:CapnStank

Posted 23 January 2007 - 08:27 PM

Another one I've designed....

http://www.specialopspaintball.com/brigade...ew.asp?id=91756
"Watch out for the guy with the pump, they tend to hit their target."
My BST Feedback: +3/0
0

#7 User is offline   beaker 

  • GLR Demolitions Expert
  • PipPip
  • Group: Members
  • Posts: 215
  • Joined: 03-June 05
  • Gender:Male
  • Location:Middleville, MI
  • Brigade Name:Beaker

Posted 31 January 2007 - 04:12 AM

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



0

#8 User is offline   CapnStank 

  • Sophomore Member
  • PipPipPip
  • Group: Members
  • Posts: 606
  • Joined: 04-September 06
  • Gender:Male
  • Location:Regina Saskatchewan
  • Brigade Name:CapnStank

Posted 31 January 2007 - 09:29 AM

Add <BR><BR> where you want the spaces added. This is covered in Tyger's thread below...
"Watch out for the guy with the pump, they tend to hit their target."
My BST Feedback: +3/0
0

#9 User is offline   RaveExcalibur 

  • First Recon Battalion
  • Pip
  • Group: Members
  • Posts: 47
  • Joined: 05-October 06
  • Gender:Male
  • Location:MI
  • Brigade Name:RaveExcalibur

Posted 21 February 2007 - 02:40 PM

I used yahoo geocities to host my .css file.
My Ion and A-5

→ The Challenge is Waiting, Will You Accept? Join First Recon - Oakland County, MI ←
0

#10 User is offline   CapnStank 

  • Sophomore Member
  • PipPipPip
  • Group: Members
  • Posts: 606
  • Joined: 04-September 06
  • Gender:Male
  • Location:Regina Saskatchewan
  • Brigade Name:CapnStank

Posted 25 February 2007 - 04:29 PM

Edited my original post to add that (thanks) and also added some sample code if you really want to see what it does.
"Watch out for the guy with the pump, they tend to hit their target."
My BST Feedback: +3/0
0

#11 User is offline   EruIthildur 

  • Forum Newbie
  • Pip
  • Group: Members
  • Posts: 23
  • Joined: 20-February 07
  • Brigade Name:Christian Matthew Grupp

Posted 12 March 2007 - 01:24 PM

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?
0

#12 User is offline   CapnStank 

  • Sophomore Member
  • PipPipPip
  • Group: Members
  • Posts: 606
  • Joined: 04-September 06
  • Gender:Male
  • Location:Regina Saskatchewan
  • Brigade Name:CapnStank

Posted 04 April 2007 - 12:41 AM

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.
"Watch out for the guy with the pump, they tend to hit their target."
My BST Feedback: +3/0
0

#13 User is offline   RaveExcalibur 

  • First Recon Battalion
  • Pip
  • Group: Members
  • Posts: 47
  • Joined: 05-October 06
  • Gender:Male
  • Location:MI
  • Brigade Name:RaveExcalibur

Posted 08 April 2007 - 04:54 PM

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

My Ion and A-5

→ The Challenge is Waiting, Will You Accept? Join First Recon - Oakland County, MI ←
0

#14 User is offline   Cheif Crazy Wombat 

  • Crazy Wombat
  • PipPipPip
  • Group: Members
  • Posts: 382
  • Joined: 13-June 06
  • Gender:Male
  • Location:Kentucky
  • Brigade Name:Cheif Crazy Wombat

Posted 16 December 2007 - 01:00 PM

Is there ay you just add a background and not change any thing else?
Tippmann Owners Club #6 | SPPL 2nd Place Rookie Division 2008 @ Bearclaw with Underground Mod Shop Special Operations Guerrillas U.M.S.S.O.G. Now playing for:Team Saturday Night Special!!
SPPL 2nd Place Rookie Division 2008 @ Bearclaw with U.M.S.S.O.G.| I am proudly individually sponsored by:SFDClothing |O'Neal|Tooks|Wreckage ClothingRockwell
Posted Image
0

#15 User is offline   DFRESH 

  • Forum Member
  • PipPip
  • Group: Members
  • Posts: 71
  • Joined: 09-June 07
  • Gender:Male
  • Location:michigan

Post icon  Posted 08 February 2008 - 03:37 PM

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
The world has achieved brilliance without wisdom, power without conscience. Ours is a world of nuclear giants and ethical infants. We know more about war that we know about peace, more about killing that we know about living. -Omar Bradley

0

Share this topic:


  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users