okay, I seem to have put this off for long enough, so here it is, the best lookup tutorial I can make that requires NO graphics program, unless you need to change the format of the picture using paint!
The following is a code that I have for one of my favorite Saiyuki lookups.
*****this is just the image, which I placed here for the heck of it since I like it!*****
<style type="text/css"> p img{filter:chroma(color=white)} </style>
<style type="text/css">
TABLE{background:transparent}
IMG{filter:chroma(color=#FFCC00) chroma(color=#F8FC60) chroma(color=#F8FC95) chroma(color=#FFFFFF) chroma(color=#F6EB69) chroma(color=#F2F054) chroma(color=#F8EC3C) chroma(color=#F8DC28) chroma(color=#F8AC40) chroma(color=#FFFF66) chroma(color=#C8CC50) chroma(color=#B8BC4E) chroma(color=#CAA100) chroma(color=#AC8B00) chroma(color=#FFCE00) chroma(color=#F7F7F7) chroma(color=#EFEFEF)}
</style>
<style type="text/css">
body {background: url('http://img51.photobucket.com/albums/v157/retrac/SAIYUKI.jpg') fixed}i.solookup}
td, p, body, A{COLOR:FF1493;FONT-FAMILY:verdana;FONT-SIZE:8pt;}
A:LINK{COLOR:FF1493;FONT-FAMILY:verdana;FONT-SIZE:8pt;}
A:VISITED{COLOR:FF69B4;FONT-FAMILY:verdana;FONT-SIZE:8pt;}
A:HOVER{COLOR:FF00FF;FONT-FAMILY:verdana;FONT-SIZE:8pt;TEXT-DECORATION:underline overline;}
p table {width:530;border:1px solid #FF1493}
b.sotableup {width:530;border:1px solid #FF1493}
i.return{width:510}
BODY{scrollbar-base-color:black ; scrollbar-arrow-color:FF1493; scrollbar-DarkShadow-Color:ffffff}
IMG{border-style: border: outset #2F4F4F 5px}
</style>
<body text="5" >
<font size="5">
<b style=position:absolute;left:10;top:2;ptsize:3pt;>[User Look-up by ~,*nightangelbsb*,~]</b><br>
A bit confusing? Well I shall explain in this wonderfully color coded tutorial!
This is the CSS code for filtering out the white space in the neopets images. It is not necessary, so you can take it out if you wish to leave the white space in.
This portion is the CSS code to take out all color from the neopets sidebar. I do not like the sidebar, and wish it to go away, but this is the best I could do. You can leave it in if you want to, or change it to suit your needs. There is more information on how to change it on CSShelp 's pet page.
This portion is the background URL, all you need to do to change the background is change the url to the one for the picture you want. The picture isn't on the internet? Well, upload it onto a free image host like photobucket.com they are great and it is where I keep all of mine!
This is the place where you can change your text color. Where it says A{color is the text color for the page. Remember when selecting a text color you neither want to blend it in with the background or have it so bright that it is hard to read. where it says A:LINK{color is the link color, I usually make this the same as the text color, but I always change it since I have that bright blue. A:VISTITED{color is the color of a link that you have clicked on, I usually make this the same color as the tex, but a different shade. Same with the A: HOVER{color. I make one lighter than the text color and one darker than the text color. Font Family tells teh font face used, and font size is the size. All these attributes can and should be changed so as to match your background. p.table and b.sotable are teh table attributes. The width of the table, the weight of teh line around the table and the color of that line. I usually change the color of the line to match the font color.
This is the scroll bar attributes. The scroll bar base should be made to best match your background to make it blend in, ot should be made to clash for a bit of pizazz. The scollbar arrows and shadow should also be take from shades of you backgound or other colors in your background, or other colors that look good together to get the desired effect.. My base color on this website is white (ffffff), the arrows are grey (696969), and the shadow is silver (c0c0c0).
This is the text size for the page, don't ask me why it is here twice, this is no guarantee, but one of them can probabl be removed... I must have been going a little crazy the day I made this one, and the worst part is is that I just copy the codes and change the attributes for all of my lookups! So they are all probably like this!!! This actually makes all the text HUGE so, take these out if you don't like it like that...
This is the code to position a message on your userlookup that says who made it. I have placed my username withing the brackets and just for the heck of it, added a bit of flowers. The only attribute I would ever change is the ptsize, which is the size of the text here, but it may also be affected by the font size codes above it as well... If things are weird, adjust both until you get the desired effect.
|
