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. If you do, I have no choice but to report you.

» 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.

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 {
	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;
}
#userneopets img {
	margin-left: -40px;
	margin-top: -35px;
}
#userneopets a {
	width: 70px;
	height: 80px;
	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 {
	display: none;
}
a, a:active, a:visited, a:link, a b, b, font, p, .medText, td {
	font-size: 10px;
	background: none;
	color: #000;
	font-weight: normal;
}
#main a:hover, a:hover b {
	color: #3C6FA2;
}
body {
	background-color: #3C6FA2;
}
#content {
	width: 741px;
}
#main {
	border: none;
	width: 741px;
	margin-top: 0px;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}
.contentModuleHeader, .contentModuleHeaderAlt {
	background-color: #4D86BF;
	color: #fff;
	text-align: right;
	text-transform: uppercase;
	font-family: tahoma;
	font-weight: normal;
	letter-spacing: 2px;
}
.contentModuleTable {
	border: 1px solid #000;
	padding: 5px;
}
.contentModule {
	border: 0px;
}
.contentModuleContent td {
	padding: 0px;
}
#header {
	background: none;
	border-bottom: 0px;
	margin-left: -205px;
}
#template_nav {
	margin-top: 10px;
	visibility: visible;
	background-color: #4D86BF;
	border: 1px solid #000;
	width: 725px;
}
ul.dropdown {
	background-color: #fff;
	border: 1px solid #000;
}
#userinfo .contentModuleTable, #usercollections .contentModuleTable, #usershop .contentModuleTable {
	height: 300px;
}
#userinfo .contentModuleTable {
	width: 270px;
}
#userinfo a img {
	width: 30px;
	height: 30px;
}
#usercollections img {
	width: auto;
	height: 30px;
}
#usershop img {
	width: 120px;
	height: 120px;
}
#usertrophies img {
	width: 30px;
	height: 30px;
}
#usertrophies .contentModuleTable {
	height: 500px -blocked-;
	overflow: auto;
}
#ncmall img {
	width: 30px;
	height: 30px;
}
#userneopets img {
	margin-left: -35px;
	margin-top: -20px;
}
#userneopets a {
	width: 75px;
	height: 105px;
	display: block;
	overflow: hidden;
}
</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 {
	display: none;
}
a, a:active, a:visited, a:link, a b, b, font, p, .medText, td {
	font-size: 10px;
	background: none;
	color: #000;
	font-weight: normal;
}
#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;
}
#userinfo .contentModuleTable {
	width: 260px;
}
#userinfo a img {
	width: 30px;
	height: 30px;
}
#usercollections img {
	width: auto;
	height: 30px;
}
#usershop img {
	width: 120px;
	height: 120px;
}
#usertrophies img {
	width: 30px;
	height: 30px;
}
#ncmall img {
	width: 30px;
	height: 30px;
}
#userneopets img {
	margin-left: -35px;
	margin-top: -20px;
}
#userneopets a {
	width: 75px;
	height: 105px;
	display: block;
	overflow: hidden;
}
.contentModuleHeader, .contentModuleHeaderAlt {
	background-color: #000;
	color: #fff;
	text-align: right;
	text-transform: uppercase;
	font-family: tahoma;
	letter-spacing: 2px;
	font-weight: normal;
}
.contentModuleTable {
	border: none;
}
.contentModule {
	border: 0px;
	background: #fff;
}
.contentModuleContent td {
	padding: 0px;
}
</style>

Style 4.

organized cri...boxes.

<table cellpadding="3" cellspacing="0" border="0" style="margin-bottom: 7px;" class="contentModuleTable">
<tr><td colspan="3" class="contentModuleHeaderAlt">Information</td></tr>
<tr>
<td class="contentModuleContent"> 
<div style="overflow: auto; height: 210px; width: 350px;"> 
Welcome! 
<p>
This text area scrolls! Type as much as you want here :3
</p>
</div> 
</td>

<td class="contentModuleContent">
<div align="justify" style="height: 210px; width: 130px;">
Lists:

<ul>
<li>List</li>
<li>Whatever</li>
<li>You</li>
<li>Want</li>
<li>Like</li>
<li>Goals</li>
<li>Dailies</li>
<li><a href="/~Poleenie">Credits</a></li>
</ul>
</div>
</td>

<td class="contentModuleContent">
<div style="height: 210px; width: 210px;"> 
Stuff 
<p> 
Put stuff here...pet images, fun images, rants, etc. Becareful though, this area does not scroll.
</p>
<p>
<img src="http://images.neopets.com/template_images/drowsy_kacheek_baby.gif"></p>
</div> 
</td>
</tr>
</table>
<style>
#footer, #nst, .sf, hr, .user, .brand-mamabar, #ban {
	display: none;
}
a, a:active, a:visited, a:link, a b, b, font, p, .medText, td {
	font-size: 10px;
	background: none;
	color: #000;
	font-weight: normal;
}
#main a:hover, a:hover b {
	color: #999;
}
body {
	background-color: #999;
}
#content {
	width: 741px;
}
#main {
	border: none;
	width: 741px;
	margin-top: 0px;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}
ul {
	list-style-type: circle;
}
a:active, a:link, a:visited {
	color: #000;
}
a:hover {
	color: #000;
}
.contentModuleHeader, .contentModuleHeaderAlt {
	background-color: #999;
	color: #000;
	border: none;
	text-align: right;
	text-transform: uppercase;
	font-family: tahoma;
	letter-spacing: 4px;
	font-weight: normal;
}
.contentModuleTable {
	border: 1px solid #000;
	padding: 5px;
}
.contentModule {
	border: 0px;
}
.contentModuleContent td {
	padding: 0px;
}
#header {
	background: none;
	border-bottom: 0px;
	margin-left: -205px;
}
#template_nav {
	margin-top: 10px;
	visibility: visible;
	background-color: #999;
	border: 1px solid #000;
	width: 725px;
}
ul.dropdown {
	background-color: #fff;
	border: 1px solid #000;
}
#userinfo .contentModuleTable, #usercollections .contentModuleTable, #usershop .contentModuleTable {
	height: 300px;
}
#userinfo .contentModuleTable {
	width: 270px;
}
#userinfo a img {
	width: 30px;
	height: 30px;
}
#usercollections img {
	width: auto;
	height: 30px;
}
#usershop img {
	width: 120px;
	height: 120px;
}
#usertrophies img {
	width: 30px;
	height: 30px;
}
#ncmall img {
	width: 30px;
	height: 30px;
}
#userneopets img {
	margin-left: -35px;
	margin-top: -20px;
}
#userneopets a {
	width: 75px;
	height: 105px;
	display: block;
	overflow: hidden;
}
</style>

Petlookups

Directions.

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

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!

Simpliciting's

Welcome.

Ready.

Set.

Go.

Questions?

Userlookups

Directions.

Style 1.

simple.

Style 2.

pretty padding

Style 3.

look ma, no lines!

Style 4.

organized cri...boxes.

Petlookups

Directions.

Style 1.

shades

Style 2.

bright

Sitely

Listed at

directory

Credits

Link back?