have you come to serve the horde?

Ohai, this is my template page.
Don't confuse these with premades.
These are base codes you can alter and customize for yourself.
These codes were my own personal codes, made by me, for me.
But people kept asking for them so here they are.

Art • FAQ • Art Requests • Lookup

Rules & Terms of use 1. Leave the credit link. 2. You can change literally anything else. 3. Don't use my personal counters. It messes with MY stats. 4. That's it! *gasp* Any codes of "yours" that you "base" off of mine still require credit. Theft is dealt with through a single warning neomail and then a report if the neomail hasn't received an adequate response. Updates & News Though theft has been down for me personally, I've been concerned about other CSS theft going around that many other of my fellow designers are both aware and victims of. Please bear in mind that stealing someone's code is both illegal and reportable. Please refer to Editorials 250, 308, AND 533. 2.18.11 - Added my not UFT/UFA banners in a new section. 10.7.11 - Oh look, a new layout and a new userlookup code!

Ctrl + A inside the textboxes to highlight the CSS.

mini faq

Can I change the colors?
Yes, of course, you can change anything.

Can I change the background?
Yes, of course, you can change anything.

Can I change the links?
Yes, of course, you can change anything.

How do I get a counter?
The regular counter is from boingdragon. The active user counter (the one with the little person on it) is from whos amung us.

Why can't I use your counter?
Because it will mess with both of our stats, and that doesn't provide either of us with accurate information. xD

How do I get the little images of my pets?
*In order to find your pets' avatar images just use:
http://pets.neopets.com/cpn/PETNAME/1/1.png
And obviously change petname to your pet's name. The link will change when you save I think.
I will mention that they probably won't all be positioned perfectly in the center because all species are positioned differently; which is I specifically centered mine. I still suggest that you make and crop your own images if it really matters that much to you. But the code has been updated for lazy people.

before mailing me...

It is not my problem if you don't read the suggestions and notes given on this page.
I will be more than happy to help you if you can't get something to work or your code broke for some unknown reason - that is totally fine to mail me about. But if you mail about something like.. how to add a background, or how to add your pet's images to the lookup, I'm sorry, I just, won't... CAN'T reply to you.
I don't want to be a huge butt about this, but I seriously can't differentiate between trolls and people that actually need help anymore.

There are sites linked to the bottom of the page that explain basic CSS.

sleek original *Please see the read me for how to get your mini pet images. Clean and skinny version of my original lookup below. Doesn't show your shop, gallery, ncmall, neohome or habitarium. I've included a link to the shop and gallery, just put in your username. The links and line colors you can change are up towards the top of the code for your convenience. <style> #footer, hr, #userneohome, .sf, #nst, .brand-mamabar, #ban, #habitarium, #usershop, #ncmall, .contentModuleHeader, .contentModuleHeaderAlt { display: none; } #x a { font-style: normal; color: #77C6FD; } h1 { text-align: right; font: 9pt "georgia"; font-style: italic; margin: 10px; border-bottom: 3px solid #A9D04D; } #header { visibility: hidden; z-index: 2; } #navigation { visibility: visible; } #template_nav { margin-top: -35px; margin-left: -150px; } LI.nav_image { margin-left: -15px; } UL.dropdown { background: #fff; border: 1px solid #efefef; } #b { background: #fff; border: 1px solid #dadada; margin: 7px; } #userinfo table { border: none !important; } #content { width: 500px; margin-top: -70px; } #main { float: left; width: 590px; margin: 10px; border: 1px solid #dadada; text-align: left; left: 0px; } .contentModule, .contentModuleTable, .contentModuleContent { border: none; background: none; } body, td, p, .content, .medText { font: 7pt "verdana"; color: #333; } body { background: #efefef; } b { text-transform: lowercase; } a:link, a:active, a:visited, a b, #navigation a { color: #727272; font-weight: normal; font-style: italic; } a:hover, a b:hover, #navigation a:hover { color: #c0c0c0 !important; font-weight: normal; } .trophy_cell, #usertrophies b { padding: 0px; font-weight: normal; } #usertrophies img { width: 60px; height: auto; } #usercollections { width: 250px; } #userinfo { width: 340px; } #userneopets, #userneopets b { width: 580px; text-transform: capitalize; } #userneopets img { margin-left: -25px; } #userneopets a { display: block; overflow: hidden; padding: 3px; width: 100px; border: 1px solid #efefef; } #side { left: 590px; top: -8px; width: 160px; } #side b { text-transform: none; } #b { text-align: left; padding: 5px; } #l a, .l, #x { font: 18pt "century gothic"; letter-spacing: -1px; } .l { color: #dadada; } p { margin: 5px; } #p img { background: #fff; padding: 3px; margin-left: -15px; height: 50px; border: none; } #p a { display: inline-block; overflow: hidden; margin: 3px; padding: 2px; width: 25px; background: #fff; border: 1px solid #dadada; } </style> <div id="side" style="position: absolute;"> <div id="b"> <center> <p id="x"> <font class="l">1</font> <a href="/userlookup.phtml?user=USERNAME">2</a> <a href="/userlookup.phtml?user=USERNAME">3</a> <a href="/userlookup.phtml?user=USERNAME">4</a></p> <a href="/browseshop.phtml?owner=USERNAME">shop</a> / <a href="/gallery/index.phtml?gu=USERNAME">gallery</a> </center> <h1>Info</h1>Write a bit here or something. c: <h1>Status</h1> <b>Neomail: </b>Closed<br><b>Neofriends: Open</b><br><br><center>Lookup by <a href="/~orgrimmar">l3lo0!</a> </center> </div> <div id="p"> <a href="/petlookup.phtml?pet=PETNAME"><img src="http://pets.neopets.com/cpn/PETNAME/1/1.png"></a><a href="/petlookup.phtml?pet=PETNAME"><img src="http://pets.neopets.com/cpn/PETNAME/1/1.png"></a><a href="/petlookup.phtml?pet=PETNAME"><img src="http://pets.neopets.com/cpn/PETNAME/1/1.png"></a><a href="/petlookup.phtml?pet=PETNAME"><img src="http://pets.neopets.com/cpn/PETNAME/1/1.png"></a> </div> </div> Words if you want them! ^^

original condensed *Please see the read me for how to get your mini pet images. Doesn't show your shop, gallery, ncmall, neohome or habitarium. Be sure to include a link to at least your shop somewhere. If you really want to ruin the positioning and include your habitarium and ncmall thing, just remove: #habitarium and #ncmall at the top of the code. <style> #footer, hr, #userneohome, .sf, #nst, .brand-mamabar, #ban, #habitarium, #usershop, #ncmall, .contentModuleHeader, .contentModuleHeaderAlt { display: none; } #header { visibility: hidden; z-index: 2; } #navigation { visibility: visible; } #template_nav { margin-top: -25px; margin-left: -150px; } LI.nav_image { margin-left: -15px; } UL.dropdown { background: #fff; border: 1px solid #efefef; } #b, #r, #l { background: #fff; border: 1px solid #dadada; margin: 7px; } #userinfo table { border: none !important; } #content { width: 500px; margin-top: -70px; } #main { float: left; width: 590px; margin: 10px; border: 1px solid #dadada; text-align: left; left: 0px; } .contentModule, .contentModuleTable, .contentModuleContent { border: none; background: none; } body, td, p, .content, .medText { font: 7pt "verdana"; color: #333; } body { background: #efefef; } b { text-transform: lowercase; } a:link, a:active, a:visited, a b, #navigation a { color: #727272; font-weight: normal; font-style: italic; } a:hover, a b:hover, #navigation a:hover { color: #c0c0c0; font-weight: normal; } .trophy_cell, #usertrophies b { padding: 0px; font-weight: normal; } #usertrophies img { width: 60px; height: auto; } #usercollections { width: 250px; } #userinfo { width: 340px; } #userneopets, #userneopets b { width: 580px; text-transform: capitalize; } #userneopets img { margin-left: -25px; } #userneopets a { display: block; overflow: hidden; padding: 3px; width: 100px; border: 1px solid #efefef; } #side { left: 590px; top: -8px; width: 160px; } #side b { text-transform: none; } #b { text-align: left; padding: 2px; } #l a, .l { font: 20pt "georgia"; } .l { color: #dadada; } #m { margin-bottom: 2px; } h1 { text-align: right; font: 9pt "tahoma"; font-weight: bold; margin: 0px; border-bottom: 1px dotted #dadada; } #r { text-align: right; padding: 2px; } #p img { padding: 3px; margin-left: -15px; height: 50px; border: none; } #p a { display: inline-block; overflow: hidden; margin: 2px; padding: 2px; width: 25px; background: #fff; border: 1px solid #dadada; } </style> <div id="side" style="position: absolute;"> <div id="l"><a href="/~raggles">Link <i>!</i></a></div> <div id="l"><a href="/~ekiahru">Link <i>!</i></a></div> <div id="l"> <a href="/userlookup.phtml?user=ACCOUNTNAMEHERE">1</a> <a href="/userlookup.phtml?user=ACCOUNTNAMEHERE">2</a> <a href="/userlookup.phtml?user=ACCOUNTNAMEHERE">3</a> </div> <div id="b"> <h1>Info</h1>Type stuff.<br> </div> <div id="b"> <h1>Status</h1> <b>Neomail:</b> Open<br><b>Neofriends:</b> Open<br><b>Guilds:</b> Open<br> </div> <div id="b"> <h1>Working On</h1>- Add a goal!<br>- Or something.<br>- Or delete this box?</div> <div id="l">Counters/Trackers go here.</div> <div id="p"> <a href="/petlookup.phtml?pet=Anteaq"><img src="http://pets.neopets.com/cp/w6kl48vj/1/1.png"></a> <a href="/petlookup.phtml?pet=Altalena"><img src="http://pets.neopets.com/cp/mn8bojx2/1/1.png"></a> </div> <div id="b">Lookup by <a href="/userlookup.phtml?user=l3lo0">l3lo0</a>! Get it <a href="/~Orgrimmar">here!</a> </div> </div>

original lookup *Please see the read me for how to get your mini pet images. This doesn't show your Habitarium. If you have a lot of trophies I highly suggest removing the NC Mall module they just added. Add #ncmall to the list of things by display:none; at the top of the CSS. <style> #footer, hr, #userneohome, .sf, #nst, .brand-mamabar, #ban, #habitarium { display: none; } #header { visibility: hidden; z-index: 2; } #template_nav { margin-top: -25px; } #navigation { visibility: visible; } LI.nav_image { margin-left: -10px; } UL.dropdown { background: #fff; border: none; border-bottom: 4px solid #979797; } .trophy_cell, #usertrophies b { padding: 0px; } .contentModuleTable, #main, .contentModuleContent { border: none; background: none; margin-top: 0px; } .contentModule, #b, #r, #l { background: #fff; border: 1px solid #dadada; margin: 7px; } #content { margin-left: 170px; width: 650px; margin-top: -73px; } #main { float: left; width: 590px; margin: 10px; left: 0px; } .contentModuleHeader, .contentModuleHeaderAlt { background: none; font: 15pt "franklin gothic medium"; color: #555555; height: 22px; font-weight: normal; } body, td, p, .content, .medText { font: 8pt "franklin gothic medium"; color: #7C7C7C; font-weight: normal; } body { background: #efefef; } b, #b a { color: #555555; font: 7.5pt "georgia"; font-weight: bold; } .medText b, #b a { font-weight: normal; } #side { left: 5px; top: 56px; width: 175px; } #b, #l img { text-align: left; padding: 2px; } #l a { font: 20pt "georgia"; } #m { margin-bottom: 2px; } #h { text-align: right; font: 10pt "tahoma"; font-weight: bold; border-bottom: 1px dotted #dadada; } #r { text-align: right; padding: 2px; } #p img { padding: 3px; margin-left: -15px; height: 50px; border: none; } #p a { display: inline-block; overflow: hidden; margin: 2px; padding: 2px; width: 25px; background: #fff; border: 1px solid #dadada; } a:link, a:active, a:visited, a b, #navigation a { color: #727272; font-weight: normal; } a:hover, a b:hover, #navigation a:hover { color: #c0c0c0; font-weight: normal; } </style> <div id="side" style="position: absolute;"> <div id="l"><a href="/~raggles">Link <i>!</i></a></div> <div id="l"><a href="/~ekiahru">Link <i>!</i></a></div> <div id="l"> <a href="/userlookup.phtml?user=ACCOUNTNAMEHERE">1</a> <a href="/userlookup.phtml?user=ACCOUNTNAMEHERE">2</a> <a href="/userlookup.phtml?user=ACCOUNTNAMEHERE">3</a> </div> <div id="b"> <div id="h">Info</div>Type stuff.<br> </div> <div id="b"> <div id="h">Status</div> <b>Neomail:</b> Open<br><b>Neofriends:</b> Open<br><b>Guilds:</b> Open<br> </div> <div id="b"> <div id="h">Working On</div>- Add a goal!<br>- Or something.<br>- Or delete this box?</div> <div id="l">Counters/Trackers go here.</div> <div id="p"> <a href="/petlookup.phtml?pet=Anteaq"><img src="http://pets.neopets.com/cp/w6kl48vj/1/1.png"></a> <a href="/petlookup.phtml?pet=Altalena"><img src="http://pets.neopets.com/cp/mn8bojx2/1/1.png"></a> </div> <div id="b">Lookup by <a href="/userlookup.phtml?user=l3lo0">l3lo0</a>! Get it <a href="/~Orgrimmar">here!</a> </div> </div>

notes on lookups

These apply to pretty much all of my lookups:

• *Please see the read me for how to get your mini pet images.
• The 1 2 3 up top are meant to be links to your side accounts. It says ACCOUNTNAMEHERE, put your side account names there.
• You.. can change those links at the top you know; not that I'm complaining lulz. Or just remove them.
• If you want to add a background image in like the bottom right of the page all you have to do is the following:
  Find: body{background:#efefef;}
  Change it to: body{background:#efefef url(IMG HERE) bottom right fixed no-repeat;}
• Hex codes (the 6 digits with the # sign) are what you change to change colors of things. Anywhere there's a hex code, there's a color you can change.

single flip box

This code is down for editing. LOL NOT HERE~

individual boxes All of the things you can change the colors of are separated at the very top of the style sheet. Because I removed the petpage and neomail icons, you have to add that info yourself. It's at the very bottom of the code. This userlookup does not show trophies. You have to add them yourself. Neopets does not allow you to omit information about your pets, trophies included. Also don't ADD trophies, lol, also against the rules. To add an image that floats like mine do you can do [img src="IMAGELINK.PNG" style="float:left;"]with normal brackets. <style> body { background: #efefef; } body, table, tr, td, div, font, p, .medText { font: 7.5pt tahoma; color: #656565; } a, ALink, .user ALink, LI:hover UL.dropdown A { font-weight: bold; color: #89CFBE !important; } a:hover, a:hover b, .user AHover, LI:hover UL.dropdown AHover { color: #E8ADAB !important; } b { font: 7.5pt tahoma; font-weight: bold; color: #89CFBE; } i { font: 7.5pt georgia; font-weight: bold; font-style: italic; color: #E8ADAB; } h1 { font: 16pt georgia; font-weight: bold; color: #fff; background-color: #89CFBE; margin: 0px 0px 5px; } #ban, #footer, .brand-mamabar, hr, .sidebar, .adbox, #nst, .contentModuleHeader, .contentModuleHeaderAlt, .contentModuleContent table img, .content div { display: none; } #main { margin-top: 0px; } #header { background: none; height: 40px; width: 625px; border: none; } #template_nav { margin-left: -170px; margin-top: -25px; } LI.nav_image, #nst { margin-left: -10px; } UL.dropdown { border: 1px solid #333; background: #fff; } .content .contentModule, .contentModuleTable { border: 0px; } .content div div, .content .contentModule { display: block; } .contentModuleContent, .contentModule { background: #fff; } #main { background: none; border: 0px; width: 700px; } #content { width: 625px; border: none; } #pet_rating { height: 158px; } #rightio { text-align: right; font: 12pt "georgia"; } </style> <div align="center"> <div id="rightio"><i>Came home MM.DD.YY</i></div> <h1>PETNAME</h1> <i>[trait] // [trait] // [trait]</i> </div> <br><br><br><br><br><div id="rightio"> <a href="http://www.neopets.com/neomessages.phtml?type=send">neomail</a> | <a href="http://www.neopets.com/~PETNAME">petpage</a> | <a href="http://www.neopets.com/~Orgrimmar">credit</a> </div>

rainbow pop ups

My retired FAQ page. Cause people asked me for it a lot. Feel free to use it for whatever else you want: trading, applications, etcetc. If you have a bunch of content on one "page" and want one of the boxes to scroll add this within the box that you want to scroll add with normal brackets: [div class="scroll"] CONTENT [/div] As in... write all yer stuff for that "page" where it says CONTENT. All mine are defaulted that way personally though. <style> div table img { visibility: visible; } table img { visibility: hidden; } table { background: none; } body { background-repeat: repeat-y; background-attachment: fixed; background-color: #efefef; font: 8pt "franklin gothic medium"; color: #646464; list-style: circle outside; } #list b { font-weight: bold; color: #FFAF3D; } #list { margin-left: 20px; } li { font: 7.8pt "georgia"; margin-top: 0; } table, td, tr { background: none; text-align: left; color: #5B5C67; border: none; font: 7pt tahoma; } table { width: 100%; } td { width: 25%; } .ca, .c1, .c2, .c3, .c4, .c5 { padding: 2px; background: #fff; border: 1px solid #dadada; display: block; } .ca { border-left: #6CD0FF solid 10px; } .c1 { border-left: #B6F744 solid 10px; } .c2 { border-left: #FFF944 solid 10px; } .c3 { border-left: #FFAF3D solid 10px; } .c4 { border-left: #FF85B5 solid 10px; } .c5 { border-left: #CF5FE7 solid 10px; } .c3 i { color: #FF85B5; } #side a { text-align: right; margin-bottom: 3px; } #side a:hover { letter-spacing: 1px; } #side { left: 10px; top: 0px; width: 185px; height: 100%; text-align: justify; } #main { left: 220px; top: 0px; height: 600px; width: 500px; overflow: hidden; margin-top: 20px; } #wishes { height: 500px; overflow: auto; } b { font: 8pt "tahoma"; color: #979797; text-decoration: none; } a { font: 8pt "tahoma"; color: #979797; text-decoration: none; } a:hover { color: #646464; } h1 { border-bottom: 1px dotted #dadada; margin: 2px; font: 8pt "verdana"; font-weight: bold; } h2 { color: #CF5FE7; margin: 2px; font: 12pt "georgia"; font-weight: bold; text-align: center; } h3 { color: #CF5FE7; margin: 2px; font: 12pt "georgia"; font-weight: bold; text-align: center; } .scroll { overflow: auto; height: 95%; width: auto; } </style> <div id="side" style="position: absolute;"> <br>IMAGE HERE<br><a href="#t1" class="ca">Topic 1</a> <a href="#t2" class="c1">Topic 2</a> <a href="#t3" class="c2">Topic 3</a> <a href="#t4" class="c3">Topic 4</a> <a href="#t5" class="c4">Topic 5</a> <a href="#t6" class="c5">Topic 6</a> css from <a href="/~Orgrimmar">here!</a> </div> <div id="main" style="position: absolute;"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="t1"></a> <div class="ca"> <h1>Question</h1> Answer <br><br><h1>Question</h1> Answer<br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer <br><br> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="t2"></a> <div class="c1"> <h1>Question</h1> Answer <br><br><h1>Question</h1> Answer<br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer<br><br> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="t3"></a> <div class="c2"> <h1>Question</h1> Answer <br><br><h1>Question</h1> Answer<br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer<br><br> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="t4"></a> <div class="c3"> <h1>Question</h1> Answer <br><br><h1>Question</h1> Answer<br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer<br><br> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="t5"></a> <div class="c4"> <h1>Question</h1> Answer <br><br><h1>Question</h1> Answer<br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer<br><br> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="t6"></a> <div class="c5"> <h1>Question</h1> Answer <br><br><h1>Question</h1> Answer<br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer <br><br><h1>Question</h1> Answer<br><br> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div>

other goodies

I've gotten some requests from people to use my nifty not UFT/UFA banner. You can see it in action here. I may make a few variations in the future. *Remember you only need ONE set of style tags on any one page! This, the not UFT/UFA banner, is the only resource of mine that I ever will allow you to remove credit from if you choose to. Leaving it would be great, but you know it's not that big a deal as long as you don't claim it as your own. <style> #nft { top: 0px; left: 0px; display: inline; } </style> <a href="/~Orgrimmar#other"> <img src="http://i.imgur.com/7aR7f.png" id="nft" style="position: fixed;" border="0"></a>

links & fine print

If you have any problems at all, you are of course free to mail my main for help!
I will try to explain and solve your issue in simple language.

You need to know basic coding to customize these lookups.
If you're asking how to add an image or something equally as basic, please go here instead of mailing me.

Because I made these for me personally, you may have to edit things depending on your own stats etc. Please keep this in mind, basic CSS/HTML knowledge is helpful.
You're on the internet, learning it is not a waste of time. c:

<a href="http://www.neopets.com/~Orgrimmar"><img src="http://i.imgur.com/D5Pkp.png" border="0"></a>	<a href="http://www.neopets.com/~Orgrimmar"><img src="http://i.imgur.com/lJPU4.png" border="0"></a>

Listed at


Helpful/Suggested Sites

If you still have a question or something just isn't working right for you, title your mail with CSS HELPIES in caps, and you will get absolute priority response for reading this and I will work with you until your code works.