Simpliciting's

Welcome.

I like simple, clean coding...and boxes. My goal is to provide elegant, simple, and easy to use coding for those of you who share my affinity for organization. As you can see, this page is devoid of fancy graphics, well, because like the name of this site, I like to keep things simple. Enjoy!

Ready.

Please don't take my css and claim it as your own.
I assume the users of my coding have basic grasp of html/css, and are able edit the colors to suit their own taste; but if you do not know how to change a layout's color, feel free to neomail me with a request.
I use FF/Chrome/Safari, and as far as I know, my coding works in all three browsers.
Click the dragon at the bottom-right of your screen to go back to the top at any time.

Set.

Leave credit, otherwise edit to your heart's content.

Go.

Userlookups Petlookups Sitely Credits

Questions?

If you have any difficulties figuring out how to edit any part of the coding, please do not hesitate to send me a neomail describing the situation. I will try my best to reply in a timely manner. I hardly ever play any more, but I check my mail about once a month?

Userlookups

Directions.

To preview: click and drag the image to your url box.
Pick a style you like and click here.
Copy the coding in the grey text area, and paste in the description box.
Edit colors/texts accordingly to suit your personal preferences.

Style 1.

simple.

<div align="right"><a href="/~Poleenie">credits*</a></div>
<style>
.sf, hr, .brand-mamabar, #habitarium, #right_of_trohpies {
	display: none;
}
a, font, p, td, table {
	font-size: 8pt;
}
a:active, a:link, a:visited {
	color: #000;
}
#main a:hover, a:hover b {
	color: #4D86BF;
}
#main {
	border: none;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}
.contentModuleHeader, .contentModuleHeaderAlt {
	background-color: #4D86BF;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 2px;
	color: #fff;
	text-align: right;
}
.contentModule {
	border: none;
}
.contentModuleTable {
	border: 1px solid #000;
	padding: 5px;
}
.contentModuleContent td {
	padding: 0px;
}
li:hover ul.dropdown a, li.over ul.dropdown a {
	font-weight: normal;
}
#userinfo .contentModuleTable, #usercollections .contentModuleTable, #usershop .contentModuleTable {
	height: 340px;
}
#usertrophies {
	width: 982px !important;
}
#userneopets img {
	margin-left: -35px;
	margin-top: -20px;
}
#userneopets a {
	margin-top: 10px;
	width: 75px;
	height: 105px;
	display: block;
	overflow: hidden;
}
</style>

Style 2.

pretty padding

<div align="right">
<a href="/~Poleenie">credits*</a>
</div>
<style>
#footer, #nst, .sf, hr, .user, .brand-mamabar, #ban, #userneohome, #habitarium, #ncmall, #right_of_trohpies {
	display: none;
}
b, font, p, .medText, td, a, a:active, a:visited, a:link, a b, #main a:hover, a:hover b {
	font-size: 10px;
	background: none;
	color: #000;
	font-weight: normal;
}
body {
	background-color: #3C6FA2;
}
#content {
	width: 742px;
}
#main {
	width: 742px;
	border: none;
	margin-top: 0px;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}
.contentModuleHeader, .contentModuleHeaderAlt {
	background-color: #4D86BF;
	text-transform: uppercase;
	font-family: tahoma;
	font-weight: normal;
	letter-spacing: 2px;
	color: #fff;
	text-align: right;
}
.contentModuleTable, .contentModule {
	border: none;
}
#header {
	background: none;
	border-bottom: 0px;
	margin-left: -205px;
}
#template_nav {
	margin-top: 8px;
	visibility: visible;
	background-color: #4D86BF;
	border: 1px solid #000;
	width: 725px;
}
ul.dropdown {
	background-color: #fff;
	border: 1px solid #000;
}
#header .dropdown a:hover {
	color: #4D86BF;
}
#userinfo, #usercollections, #usershop {
	overflow: hidden;
	height: 260px !important;
	border: 1px solid #000;
	padding: 5px;
}
#userinfo {
	left: 7px;
	top: 150px;
	width: 300px;
}
#userinfo a img {
	width: 30px;
	height: 30px;
}
#userinfo table {
	border: 0 !important;
}
#userinfo img {
	width: auto;
	height: 120px;
}
#usercollections {
	margin-left: 7px;
	width: 210px;
}
#usercollections img {
	width: auto;
	height: 30px;
}
#usershop {
	margin-left: 5px;
	width: 167px;
}
#usershop img {
	width: 120px;
	height: 120px;
}
#userneopets {
	height: 230px !important;
	border: 1px solid #000;
	padding: 5px;
	left: 7px;
	width: 715px;
}
#userneopets img {
	margin-left: -35px;
	margin-top: -20px;
}
#userneopets a {
	margin-top: 15px;
	width: 75px;
	height: 105px;
	display: block;
	overflow: hidden;
}
#usertrophies {
	margin-bottom: -35px;
	width: 715px;
	height: 230px !important;
	border: 1px solid #000;
	padding: 5px;
	overflow: auto;
}
#usertrophies img {
	width: 30px;
	height: 30px;
}
</style>

Style 3.

look ma, no lines!

<div align="right"><a href="/~Poleenie">credits*</a></div>
<style>
#footer, #nst, .sf, hr, .user, .brand-mamabar, #ban, #userneohome, #right_of_trohpies {
	display: none;
}
a, a:active, a:visited, a:link, a b, b, font, p, .medText, td {
	font-size: 9px;
	background: none;
	color: #000;
	font-weight: normal;
	font-family: tahoma;
	text-transform: lowercase;
}
#main a:hover, a:hover b {
	color: #000;
}
body {
	background-color: #000;
}
#content {
	width: 741px;
}
#main {
	background: #fff;
	border: none;
	width: 741px;
	margin-top: 0px;
}
#header {
	background: none;
	border-bottom: 0px;
	margin-left: -205px;
}
#template_nav {
	margin-top: 10px;
	visibility: visible;
	background-color: #fff;
	border: 0px;
	width: 725px;
}
ul.dropdown {
	background-color: #fff;
	border: none;
}
ul.dropdown a:hover {
	color: #fff !important;
}
#userinfo .contentModuleTable {
	width: 310px;
	padding-right: 3px;
}
#userinfo table {
	border: 0 !important;
}
#userinfo td td .medText {
	font-size: 0px;
}
#userinfo td td img {
	margin-top: 5px;
	height: 100px;
	width: auto;
}
#userinfo table table a img {
	height: 25px;
	width: auto;
}
#usercollections img {
	width: auto;
	height: 35px;
	padding: 10px;
}
#usercollections table table td, #usercollections b {
	font-size: 0;
}
#usercollections .contentModuleTable {
	padding-right: 2px;
}
#usershop img {
	width: auto;
	height: 90px;
}
#usertrophies {
	width: 727px;
}
#usertrophies img {
	width: auto;
	height: 40px;
}
#usertrophies b, #usertrophies table table td {
	font-size: 0px !important;
	padding-bottom: 10px;
}
#userneopets img {
	margin-left: -20px;
	margin-top: -15px;
	height: 110px;
	width: auto;
}
#userneopets a {
	margin-top: 5px;
	display: block;
	width: 70px;
	height: 70px;
	overflow: hidden;
}
.contentModuleHeader, .contentModuleHeaderAlt {
	background-color: #000;
	color: #fff;
	text-align: right;
	text-transform: uppercase;
	font-family: tahoma;
	letter-spacing: 2px;
	font-weight: normal;
	font-size: 10px;
}
.contentModuleTable {
	border: none;
}
.contentModule {
	border: 0px;
	background: #fff;
}
.contentModuleContent td {
	padding: 0px;
}
#icons img {
	padding: 3px;
	height: 35px;
	width: auto;
	border: 0px;
}
</style>

Style 4.

organized cri...boxes.

<style>
body {
	background: none;
}
#footer, hr, #ban, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay, #userneohome, #right_of_trohpies, .user {
	display: none;
}
.content div b, .content div a img {
	display: none;
}
#about a img {
	display: inline;
}
.contentModule div a img, .contentModule div b {
	display: inline;
}
#main {
	background: none;
	border: 1px solid #ccc;
	text-transform: lowercase;
	line-height: 14px;
	width: 998px;
}
.content, .medText, #header .medText, .sf {
	font-family: helvetica;
	font-size: 11px;
	color: #999;
}
.content b, .medText b, .content a {
	color: #569a45;
	font-weight: normal !important;
}
.contentModuleHeader, .contentModuleHeaderAlt {
	display: block;
	padding: 10px 5px 2px 5px;
	background-color: #569a45;
	color: #fff;
	border: 0;
	font-weight: normal;
	font-size: 12px;
}
.contentModule {
	background: #eee;
	border: 1px solid #ccc;
	height: 100%;
}
.contentModuleContent {
	background: none;
	padding-top: 10px !important;
	border: 0;
}
.content img {
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 5px;
}
.contentModuleTable {
	padding: 5px;
	border: 0;
}
#usertrophies {
	width: 983px;
}
#header {
	background: none;
}
#header .medText a, #header a b {
	color: #569a45;
	font-weight: normal !important;
}
#header .dropdown {
	background: #fff;
	border: 1px solid #ccc;
	font-size: 11px;
	font-family: helvetica;
}
#header .dropdown a {
	font-weight: normal;
}
#header .dropdown a:hover, .user medText a:hover {
	color: #569a45;
}
#template_nav, #header .medText, #nst {
	color: #000 !important;
	font-size: 11px !important;
	font-family: helvetica !important;
	font-weight: normal;
}
#template_nav {
	width: 725px;
	left: -30px;
}
#userinfo td td .medText {
	font-size: 0px;
}
#usertrophies td td .medText b {
	color: #999 !important;
}
#usercollections {
	height: 270px !important;
	overflow: hidden;
}
#usershop img {
	width: 120px;
	height: auto;
	margin-bottom: 10px;
}
#userinfo table {
	border: 0 !important;
}
#userinfo td td img {
	margin-right: 10px;
	height: 130px;
	width: auto;
}
#userinfo td td td img {
	margin-right: 17px;
	float: right;
	height: 35px !important;
	width: auto;
}
#about {
	background: #eee;
	border: 1px solid #ccc;
	width: 973px;
	float: left;
	padding: 5px;
	margin-bottom: 6px;
	overflow: hidden;
}
#such {
	float: left;
	width: 420px;
	height: 83px;
	margin-top: 5px;
	text-align: left;
	padding: 5px;
	color: #999;
}
#pic {
	border: 1px solid #999;
	float: left;
	margin-right: 5px;
	width: 70px;
	height: auto;
}
.links {
	float: left;
	text-align: left;
}
.links ul {
	margin-left: -15px;
}
#icons {
	float: left;
	width: 405px;
	margin: 5px 0 0 20px;
	padding: 5px;
	text-align: left;
	overflow: hidden;
}
#icons img {
	margin: 5px 5px 5px 0;
}
</style>
<div id="about">
<div class="contentModuleHeader">Dailies & Such</div>
<div id="such">
<img id="pic" src="http://images.neopets.com/items/foo_grundodisco_swirldessert.gif">
about yourself text and whatnot.<br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="links">
<ul>
<li><a href="/">link 1</a></li>
<li><a href="/">link 2</a></li>
<li><a href="/">link 3</a></li>
<li><a href="/">link 4</a></li>
<li><a href="/">link 5</a></li>
<li><a href="/~poleenie">credit</a></li>
</ul>
</div>
<div id="icons">
pet images or avatars and stuff; fits six 50x50 images<br><img src="http://images.neopets.com/neoboards/avatars/mathsbabaa.gif"><img src="http://images.neopets.com/neoboards/avatars/aishascalawag.gif"><img src="http://images.neopets.com/neoboards/avatars/jester.gif"><img src="http://images.neopets.com/neoboards/avatars/snowager.gif"><img src="http://images.neopets.com/neoboards/avatars/ntstar.gif"><img src="http://images.neopets.com/neoboards/avatars/rubbish.gif">
</div>
</div>

Petlookups

Directions.

To preview: click and drag the image to your url box.
Pick a style you like and click here.
Copy the coding in the grey text area, and paste in the description box.
Edit colors/texts accordingly to suit your personal preferences.

Style 1.

shades

<table border="0" width="100%" height="100%" cellpadding="10">
<tr valign="top">
<td align="left" width="400" colspan="2">
Write your pet's description/personality here.
<p></p>
</td>
<td align="center">
<font face="georgia" size="4">{ <b>Describe . Your . Pet </b>}</font><p>
<img src="http://images.neopets.com/items/boo_robotkacheek.gif"><img src="http://images.neopets.com/items/bbo_robot_rock.gif"><img src="http://images.neopets.com/items/toy_kacheekrobot_windup.gif"></p>
</td>
</tr>
<tr>
<td align="left" width="300">
<a href="/petlookup.phtml?pet=YOURPET">← back</a> ||</td>
<td align="center"><a href="/~Poleenie">credits</a></td>
<td align="right">|| <a href="/petlookup.phtml?pet=YOURPET">next →</a>
</td>
</tr>
</table>
<style>
.moreLink, .brand-mamabar, .adBox2, .footOverlay, #footer, hr, #nst, .user, .ad_wrapper_fixed, #ban_bottom, #ban, .sidebar, #pet_rating, .contentModuleHeader, .content div a img {
	display: none;
}
body {
	background: #4C9999;
}
#main {
	margin-top: 0px;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	width: 740px;
}
A, td, p, .medText {
	font-family: trebuchet ms;
	color: #000;
	font-size: 12px;
}
b {
	color: #4C9999;
}
a {
	font-weight: bold;
}
i {
	color: #999;
	font-weight: bold;
}
u {
	color: #666;
	font-weight: bold;
}
#content {
	width: 100%;
}
.content {
	background: #fff;
}
#content a, #content a b {
	color: #4C9999;
}
#content a:hover, #content a:hover b {
	color: #4C9999;
}
#header {
	background: none;
	border-bottom: 0px;
	margin-left: -206px;
}
#template_nav {
	visibility: visible;
	background-color: #66CCCC;
	width: 726px;
	margin-top: -30px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
ul.dropdown {
	border: 1px solid #000;
	background-color: #fff;
}
li:hover ul.dropdown a, li.over ul.dropdown a {
	color: #000;
	font-weight: normal;
}
li:hover ul.dropdown a:hover, li.over ul.dropdown a:hover {
	color: #4C9999;
}
.contentModule, td a img {
	border: 0px;
}
.contentModuleTable {
	border: 0px solid #000;
}
.contentModuleHeader, .contentModuleHeaderAlt {
	font: 13px tahoma;
	color: #000;
	text-transform: uppercase;
	background-color: #66CCCC;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
</style>

Style 2.

bright

<div align="center">
<font class="georgia">{ <b>Describe . Your . Pet</b> }</font>
<p><img src="http://images.neopets.com/items/flower_facepaint_80x80.gif"><img src="http://images.neopets.com/items/inst_eyrie_harp.gif"><img src="http://images.neopets.com/items/negg_blueswirls.gif"></p>
<p>Write your descriptions here.</p>
</div>
<table width="100%"><tr>
<td align="left">
<a href="/petlookup.phtml?pet=YOURPET">← back</a> ||</td>
<td align="center"><a href="/~Poleenie">credits</a></td>
<td align="right">|| <a href="/petlookup.phtml?pet=YOURPET">next →</a>
</td>
</tr></table>
<style>
.brand-mamabar, .adBox2, .footOverlay, #footer, hr, #nst, .user, .ad_wrapper_fixed, #ban_bottom, #ban, .sidebar, #pet_rating, #header, #template_nav, .contentModuleHeader, .contentModuleHeaderAlt, .contentModuleContent td img {
	display: none;
}
A, p, td {
	font-family: trebuchet ms;
	color: #000000;
	font-size: 11px;
}
body, #main {
	background: #61b6da;
}
#main {
	border: none;
	width: 620px;
	padding: 1px;
	margin-top: -1px;
}
#content {
	width: 620px;
}
.content {
	background: #fff;
}
.contentModuleTable {
	border: none;
}
a {
	font-weight: bold;
}
b {
	color: #463585;
}
#content a, #content a b {
	color: #61b6da;
}
#content a:hover, #content a:hover b {
	color: #61b6da;
}
.contentModule, td a img {
	border: none;
}
.contentModuleTable {
	border-top: 20px solid #E39F02;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 0px;
}
.georgia {
	font: normal 17px georgia;
	text-align: left;
}
</style>

Sitely

If you wish to list this page on your list, please let me know! I link back.

Listed at

directories

Credits

This page's layout and css/html contents were coded by me (tingtingwu).

The buttons below are made by a variety of lovely individuals. Click for credit!

Link back?