Get Linked!
Contact me

Hi welcome to Liam's Lab, a beginers guide to basic css. Here you will learn how to use css (cascading style sheets) and beautify your userlookup! If you cant find what you are looking for here then neomail me with your question!If you are looking for HTML help then you should try out funkychickens.com I learnt all of my HTML from there! Also please could you take the time to vist Lady's Lab It's great!! Anyway on with the css!

Adding pictures
Back to top
To get a picture in your lookup you need to use this code... you can change the height and width values to the size of your picture. To have more than one picture in your lookup change all the mypic's to mypic2.
<style type="text/css"> i.mypic{background:url(http://www.geocities.com/livin_it_up150/URL%20HERE);height:80;width:80} </style> <i class="mypic"></i>

If you want to put a picture anywhere in your user lookup use this code...Change the height and width values to the height and width of your picture. For more than one picture, change all anypic1 to anypic2. To position it, change the left and top values, left=0 and top=0 would be the top lefthand corner.
<style type="text/css"> i.anypic1{background:url(http://www.geocities.com/livin_it_up150/URL%20HERE);height:80;width:80;position:absolute;top:200;left:300} </style> <i class="anypic1"> </i>

To change your top banner you need this code... again to change the heightand width values to the height and width of your picture. To position it, change the left and top values, left=0 and top=0 would be the top lefthand corner. You can get top banners at Peachienu designs!
<style type="text/css"> i.topbanner{background:url(http://www.geocities.com/livin_it_up150/URL%20HERE); height:80;width:500;position:absolute;top:35;left:200} </style> <i class="topbanner"> </i>

To replace your shield use this code. Remember to keep the height and width values on this code only replace the url.
<style type="text/css"> i.shield{background:url(http://www.geocities.com/livin_it_up150/URL%20HERE);height:221;width:100;position:absolute;top:360;left:596} </style> <i class="shield"> </i>

Backgrounds
Back to top

to get a background for your userlookup copy this code and add the url of your background where it says 'URL HERE'
<style type="text/css"> body{background:url(http://www.geocities.com/livin_it_up150/URL%20HERE)} </style>

To make it fixed use this code...
<style type="text/css"> body{background:url(http://www.geocities.com/livin_it_up150/URL%20HERE) fixed} </style>

Want a solid color? this is the code to use just change the color to suit you...
<style type="text/css"> body{background:blue} </style>

If you have a picture background and don't want it repeating just use this code...
<style type="text/css"> body{background:#ffffff url(http://www.geocities.com/livin_it_up150/URL%20HERE) no-repeat center} </style>

Curser change
Back to top
To change your curser into a crosshair you need to use this code...
change crosshair to hand,e-resize,n-resize,sw-resize etc. For mouse over change body to a:hover
<style type="text/css"> body{cursor:crosshair}</style>

Font change
Back to top
To change your font type or size you need to use this code...
10pt is the size it can be changed to 13pt , 14pt you can change the font to any name e.g cursive,arial etc...
<style type="text/css"> td,p,body{color:deepskyblue;font:10pt impact} </style>

To make text glow you need this code...
<style type="text/css"> td,p{filter:glow(color=red,strength=2)} </style>

To make your font centered you need this code...
You can also use this code to make it to the left or right just change 'center' to left or right.
<style type="text/css"> p table{text-align:center} </style>

Links
Back to top
To change the color and font of your links you need this code...
<style type="text/css"> a:link,a:visited{color:red;font:9pt inpact} a:active{color:silver;font:9pt impact} </style>

To make the text turn into CAPITALS when you mouse-over them you need this code...
<style type="text/css"> a:hover{text-transform:uppercase} </style>

To get a border around your links when you mouse-over them you need this code...
5px:- is the size, can be any number .... dashed:- can be solid,dotted,ridge ... gold:- is the colour...
<style type="text/css"> a:hover{border:5px dashed gold} </style>

Scroll bars
Back to top
To change the color of your scrollbar use this code...
btw this only works on Internet Explorer web browser IE5.5 or above... Change colors to suit
<style type="text/css"> body{scrollbar-face-color:red;scrollbar-shadow-color:gold; scrollbar-highlight-color:gold;scrollbar-3dlight-color:gold; scrollbar-darkshadow-color:gold;scrollbar-track-color:gold; scrollbar-arrow-color:black;} </style>

Image change , filters , fade etc...
Back to top
To make images glow use this code...
<style type="text/css"> img{filter:glow(color=red,strength=2)} </style>

To invert your userlookup you need this code you can also use xray instead of invert for a different result...
<style type="text/css"> IMG{filter:invert} </style>

To get rid of the white stuff around your trophy etc use this code...
<style type="text/css"> p img{filter:chroma(color=white)} </style>

To make your pictures fade you need to use this code...
Opacity=60 - can be a number between 0 and 100 ; Style=1 for a right hand side fade; Style=2 for circular fade; Style=3 - for rectangular fade; remove xray if you want to keep the yellow colour...
<style type="text/css"> table{background:transparent} img{filter:xray alpha(Opacity=60, FinishOpacity=1, Style=3, StartX=0, FinishX=80, StartY=0, FinishY=80)} </style>

To make your table background transparent use this code...
<style type="text/css"> table{background:transparent} </style>

To make pictures transparent use this code...
To preserve the origanal colors remove xray...
<style type="text/css"> table{background:transparent} img{filter:alpha(Opacity=40) xray} </style>

Textareas
Back to top
To put a border around a textarea you need to use this code...
4px:- is the size, can be any number .... dotted:- can be solid,dashed,ridge ... red:- is the colour...
<style type="text/css"> TEXTAREA,input{border:4px dotted red} </style>

To put a different background into textareas you need this code...
<style type="text/css"> TEXTAREA,input{background:purple)} </style>

To make a textarea transparent use this code...
<style type="text/css"> TEXTAREA{background:purple;filter:alpha(opacity=50)} </style>

To change the color and size of the text in your text area use this code...
<style type="text/css"> TEXTAREA{color:hotpink;font:9pt verdana} </style>

Tables
Back to top
To put the words in your userlookup in a table you need this code... filter:alpha(opacity=60) makes it transparent (so you can still see the background behind...)
<style type="text/css"> b.tabledesc{width:530;border:1px solid deepskyblue;background:lightskyblue;filter:alpha(opacity=60)} </style> This part will be above your table <b class="tabledesc"> This part will be inside the table. </b>

To put your own backgrund in the neopets menu use this code...
This will also put tables around your lookup stats/trophies etc you need to use this code...
You can change the colors etc to your liking...
<style type="text/css"> td table{background:url(http://www.geocities.com/livin_it_up150/URL%20HERE) repeat-y right} img{filter:chroma(color=#FFCC00) chroma(color=#FFCE00) red} p img,a img{filter:chroma(color=white)} p table{width:530;border:1px solid red;background:purple;filter:alpha(opacity=60)} </style>

to have a background in the neopets menu but not have the tables around your stats etc... use this code instead.
<style type="text/css"> td table{background:url(http://www.geocities.com/livin_it_up150/URL%20HERE) repeat-y right} img{filter:chroma(color=#FFCC00) chroma(color=#FFCE00) red} p img,a img{filter:chroma(color=white)} p table{background:transparent} </style>

Paragraphing
Back to top
To add spaces in your userlookup (basically the same as < br >) you need to use this code...
You may need to change 600 to a bigger number if you have a smaller font or a smaller number if you have a larger font
<style type="text/css"> i.return{width:600} </style>

Then put this code wherever you need a space...
<i class="return"> </i>

There are LOTS of other css codes these are only the main ones you may want for your lookup...
If you want more css codes then a great place to go is csshelp's home page!

Finally I would like to ask you to join my guild here! It is called Angels of Fallen Stars Guild and it is great!

Back to top

© 2005 NeoPets.com, Inc. All Rights Reserved. Used With Permission + © Liam Elliott 2005