First off, this is the “BASE” code for using CSS. All the effects that you want to add to your page goes inside this base code.

<STYLE TYPE="text/css"> YOUR CSS EFFECTS CODES GO HERE </STYLE>

---

The following are all the different effects that you can use to change your user lookup. Just copy what is in the text box below the effect you want and place that code inside the base code provided above. The areas in CAPS are things you need to change to your own preference.


BACKGROUNDS

• Adding a solid background color:

  body{background:COLOR NAME OR #;}

• Changing text color:
  

  td,p,body {color:COLOR NAME OR #}

• Centering your text:
  

  p table {text-align:center;}

• Changing your font type:
  

  font {font-family: YOUR FONT TYPE;font-size: 1-50pt}

Font size is 1 being the smallest to 50 being the LARGEST!
Font family recommended is: verdana, arial, times new roman since those can be seen on all browsers.
• Making text glow:
  

  td,p{ filter:glow(color=red,strength=2)

• Adding borders around your lookup profile:
  

  p table {border: 1-10px COLOR BORDERSTYLE}

• Adding a border to your user lookup page:
  

  body{border-bottom:COLOR 10px BORDERSTYLE;border-left:COLOR 10px BORDERSTYLE;border-right:COLOR 10px BORDERSTYLE;border-top:COLOR 10px BORDERSTYLE;color:blue;overflow:auto;clip:rect( )}


Border Styles
dotted, dashed, solid, double, groove, ridge, inset, outset

• Adding a fading effect to your table backgrounds:
  

  table{background:transparent}

• Adding a fading effect to your images:
  

  img {filter: alpha(opacity=60)}

Opacity= can be a number between 0 and 100.
Style= 1 for a right hand side fade. 2 for circular fade. 3 for rectangular fade.
• Removing the white around your items:
  

  p img{ filter:chroma(color=white)}

• Adding a glowing effect around your images:
  

  img{ filter:glow(color=COLORNAME OR #,strength=2)}

Strength = You can increase the strength number for a more dramatic effect.

• Colored Scrollbars:
  

  body {scrollbar-face-color:COLOR; scrollbar-arrow-color:COLOR; scrollbar-track-color:COLOR; scrollbar-shadow-color:COLOR; scrollbar-highlight-color:COLOR; scrollbar-3dlight-color:COLOR; scrollbar-darkshadow-color:COLOR;}


NOTE: Alternatively you can use our Scrollbar Generator to create your scroll bar codes.
• Changing your link colors:
  

  A{colour:COLOR} A:link {color:COLOR} A:hover {color:COLOR} A:visited {color:COLOR}

• Changing the search box colors:
  

  input,textarea,select{border:1-10px BORDERSTYLE;color:COLOR; background-color:COLOR);}

• Adding a background image to the searchbox:
  

  input,textarea,select{border:1-10px BORDERSTYLE;color:COLOR; background-image: url(YOUR BACKGROUND URL);}

• Changing your mouse cousor:
  

  p, td {cursor:CURSOR OPTION;}

Cursor Options
crosshair,s-resize, sw-resize, se-resize, hand,help, w-resize, move,e-resize, ne-resize, text, n-resize, nw-resize, ne-resize, wait
• Adding a space between sentences/paragraphs:
  

  i.return{width:530} </style> And add this whenever you need a line between your sentences or parageaphs. <i class="return"> </i>

• Adding an image/banner to your user lookup:
  

  <STYLE TYPE="text/css"> <style type="text/css"> i.mypic{background:url(YOUR IMAGE URL);height:80;width:80}</style> <i class="mypic"> </i>

This code in complete with opening and closing style tags and should be used separately from your main body code.
You will need to change the height and width to match the height and width of your image.
• Adding an image where your name is:

  First you need to go to your User Preferences and change the Full Name text box to <u></u>.
  
  Then scroll down and add the following in the "About Me" text box:
  <STYLE TYPE="text/css"> <style type="text/css">u{background:url(YOUR IMAGE URL); height:60;width:110;text-decoration:none}</style>

This code in complete with opening and closing style tags and should be used separately from your main body code.
You will need to change the height and width to match the height and width of your image.
• Adding a top banner:
  

  <STYLE TYPE="text/css"> i.topbanner{ background:url(YOUR BANNER URL); height:80;width:500;position:absolute;top:35;left:200} </style> <i class="topbanner"> </i>

Again, you will need to change the height and width to the height and width of your banner. Also change the "position" left and top numbers to position it. The position of the code here is set for the top right hand banner. NOTE: Your top banner should be at least 480 width and 62 height to match the space on the user lookup page.