I. What is Whitespace?

Whitespace is a minimal premade css directory that strives to bring creativity & simplicity together.

II. Terms

Editing is encouraged, credit must remain visible. Redistribution & the claiming of rights is forbidden.

IV. Resources Backgrounds V. Grave Past Layouts

III. I BID THEE FAREWELL

November 23nd, 2018 I have moved 10 layouts to the Grave to assist with load time. The most popular layouts will remain on Whitespace's main page. Can't find the layout you're looking for? Head on over.

October 22nd, 2018 Neopets made adjustments to pet areas after my mass update, I've fixed misc little bugs in all lookups. If yours looks a touch weird, re-grab the code.

June 21st, 2018 Happy 2k18! I've added a new layout, Sweet Spot. This is a merger of Minimal Squared and Halloween Treat (so not really new...LEL). Enjoy! While I seldom update Whitespace and still have no real plans to create new layouts, feel free to ask me questions.

October 7th, 2017 (SURPRISE!) It's been a little over a year since I've last made an update. As a special Halloween treat, I have added a Halloween-inspired lookup to Whitespace (yes, the bottom is burnt flesh - you caught me!). Sadly, I am very much still closed — this will not be a regular occurrence. Until next Halloween, friends! ;)

September 16th, 2016 (WHITESPACE IS CLOSED) With a heavy heart I have decided to close this chapter in my life. I have no future plans to update Whitespace or create new layouts. In a nutshell, I have moved on. Thank you for the vast amount of support over the last three+ years. I will leave Whitespace (and resources) up for you to continue using. Stay happy, friends!

New

Newest Content

If you have more than 6 pets you'd like to display at the top, tweak the %'s in .pet a { } and .pet a img { }. If you're premium with 6 pets, add the following snippet before the closing /style tag: #userneopets li { margin-right: 15px !important; }. Nov 10 2018 - I have updated the code so pets are always centre.

Sweet Spot

A mashup of Minimal Squared & Halloween Treat

I. Light

II. DARK

Add .lead img { border-radius: 99em; } #userinfo table table td td a { border-radius: 1em; } before the closing /style tag to round your images like the preview. If your #userinfo content is overlapping your #userneopets section, reduce the margin-top within #userinfo { }. To accommodate 6 pets, locate .lead a { } and change margin: 0 -1%; to margin: 0 -3%; after adding a 6th pet next to the 5th. Additionally, add the following code before your ending /style tag: #userneopets li { margin-right: 15px !important; }

Halloween Treat

Get your designer ToT bag ready.

I. Dark

II. Light

Slate

The plain Jane.

I. Light

II. Dark

Minimal

White, Positive & Negative Space

Add #userinfo table table td td a { border-radius: 1em; } before the closing /style tag to slightly round #userinfo images like the preview.

Burnt Flesh

The creators personal favourite

I. Light

I. Dark

You can modify the color of the background by changing the hex value in body { }

Apocalypse

A vertical pet description partnered with Burnt Flesh

I. Light

II. Dark

If you change the shop image, try and find a transparent png. You can find several neopets related images on Dr. Sloth's Image Emporium. Do you have less than 5 pets? Remove completely or adjust the number inside #userneopets li { margin-right: -## !important; }

Minimal Squared

The second rendition of the Minimal Series

I. One size fits all

The current layout displays 10 pets. To display a different number modify the percentage (width) in .pet a { } as follows: 12 pets - 14.6% | 8 pets - 23%. For one row of pets, change the percentages to the following: 6 pets - 14.6% | 8 pets - 10.5% . You must also change #userinfo, #usercollections, #usershop { } margin-top to 430px (rather than 520px).

Minimal Spaced

The newest rendition of the Minimal Series

I. Original

II. Additional Pets

This layout has four options: Light and dark with a solid color or a background behind the text box. If you do not have Helvetica Neue your typography may not look as pristine, but the fallbacks should suffice.

Storybook

For long pet descriptions and those who desire simplicity

I. Light

II. Dark

III. Light (Background)

IV. Dark (Background)

You can list ten pets in this layout. Simply replace the colored blocks (listed as spans) with your pet. Unsure of what to do? Copy paste the anchor below or above the span (within .double), modify the pet name, & replace the original span. If ten pets it not enough, keep adding .long and .double blocks for your desired number within and outside .main-left-block.

Masonry

In spirit of the newest facelift

I. Light

II. Dark

Transparent neopet images can be found on Dr. Sloth's Image Emporium. For trophies, use this snippet so they match your petpet/p3: #content table tr td.content div:nth-child(5) img { width: 50px; height: auto; padding: 5px; border: 1px solid #ddd; }

Minimal Squared (Pet Description)

Pet description counterpart to Minimal Squared

I. One Size Fits All

User shop image is optional, change #usershop img { margin: 2em 0; } to #usershop img { display: none; } if you'd like to remove. Additional Pets: To display a different number modify the percentage (width) in .pet a { } as follows: 10 pets - 18% | 8 pets - 31.3%. For one row of pets, change the percentages to the following: 6 pets - 14.6% | 5 pets - 18% | 4 pets - 23% . You must also change #userinfo, #usercollections, #usershop { } margin-top to 27em (rather than 52em). *If you have one row of six pets, add .pet a img { margin-left: -3em; } before your closing /style tag. This will center them more (you can tweak this number).

Minimal Maximus

Mininal spaced enlarged

I. Light

II. Additional Pets

How to add a customization: 1. On your userlookup hover your mouse over the pet you want to use 2. Right click & select copy image url/address. 3. In the img src tag replace the previous image url with your copied one. 5. Replace /1/2.png with /1/5.png at the end of the url (or it will be blurry).

Lookbook

A refreshed version of the original Lookbook II from many moons ago

I. Light

II. Dark

How to add a customization: 1. On your userlookup hover your mouse over the pet you want to use 2. Right click & select copy image url/address. 3. In the img src tag replace the previous image url with your copied one. 5. Replace /1/2.png with /1/4.png (or /1/5.png if fluid) at the end of the url (or it will be blurry).

Photobooth I & II

The original (contained) and second (fluid) photobooth

I. Original

Pet urls need to contain 1/4.png at the end

II. Fluid

Pet urls need to contain 1/5.png at the end — This theme contains the black sidebar

You can showcase your favourite gif, pet, or image at the top. The image you choose may not fit properly, to adjust this simply tweak the margins in span.img img { }. The first 0 is top, second is right, third is bottom, and last is left. Play around with those four numbers until you find what works. The number can be negative or regular (aka no minus symbol).

Adventurous

A simple pet page layout for whatever your heart desires

I. One Size Fits All

Hero

Lions, Tigers & Backgrounds Oh My

To edit the background, edit the image url in #bg { } — You can find interchangeable backgrounds within Resources. To round your images like the preview, add #userneopets img, #userinfo table table td td a, #usershop img { border-radius: 99em; } before the closing /style tag.

Graveyard

The original Graveyard

I. Dark

II. Light

Many of the sections of this layout are adaptive, they can change size depending on resolution and content amount. If you are not a fan of this - simply set a height in the css to these elements (ie. .list li, .box, and so on). If your pet descriptions are too long, add .pet { font-size: 10pt; line-height: 140%; } before the closing style tags.

Embarks II

The second rendition of Embarks

I. One Size Fits All

To change the background image, modify the image src url at the very top of the code with the class .wsbg — pet lookups also accept opacity. Add opacity: 0.7; to the style section of the image for this effect.

Moonglow

Calm yourself with large hero backgrounds

I. One Size Fits All

How to add a customization: 1. On your userlookup hover your mouse over the pet you want to use 2. Right click & select copy image url/address. 3. In the img src tag replace the previous image url with your copied one. 5. Replace /1/2.png with /1/5.png at the end of the url (or it will be blurry).

Photobooth III

The third rendition of the Photobooth Series

I. One Size Fits All

You can showcase your favourite gif, pet, or image at the top. The image you choose may not fit properly, to adjust this simply tweak the margins in span.img img { }. The first 0 is top, second is right, third is bottom, and last is left. Play around with those four numbers until you find what works. The number can be negative or regular (aka no minus symbol).

Embarks

The original Embarks; This happens to be inspired by a real world client project

I. One Size Fits All

To change the background image, change the url in the FIRST image tag at the very top of the code. For right aligned sections, make the div class colorblock-right rather than just colorblock.

Character

A layout for character or story based pages

I. Calm Tree

II. Outerspace

To edit the background, simply edit the url in the div called #bg { } located at the top of your style tags. The dimensions of the image in this layout are 2000 by 980 pixels.

Follow You

For my fellow deathcab-ians.

I. One Size Fits All

Halfway

Links Between Minimalism & Imagery

To edit the background, edit the image url in .head, .blurb { } — You can find a different background within Resources.

Cemetery

Bare bones with a dark twist

I. Light

II. Dark

To change the background image, locate the classes .colorblock-image or .colorblock-image-dark and modify the image urls within.

Colorblocked

A layout where you're the creator

I. One Size Fits All

You can make your background image slide on hover by adding .circle:hover { transition: 3s; } before the closing /style tag. Wow so fancy, put that monocle on.

Birdcage

Highlight your pets memoir

I. Light

II. Dark

Classics

The Classics & Favourites Collection

To round your images like the review, add #userneopets li a, #userneopets img, #userinfo table table td td a { border-radius: 99em; } .navi a { border-radius: 5px; } to your closing /style tags. Do you have less than 5 pets? Change #userneopets li { margin-right: 25px !important; } to #userneopets li { margin-right: 52px !important; }

Ground Control

Can you hear me Major Tom?

I. One Size Fits All

This layout is flexible; you can move, add, duplicate and remove sections.

Portfolio I

An ancient yet ever popular portfolio layout

I. One Size Fits All

Does your pet have trophies? If so, your pet description won't be aligned properly — find the div with the class pet (i.e. div class="pet") and add the id trophies. (i.e. div class="pet" id="trophies")

Chomp

Ever-lasting favourite

I. One Size Fits All

Come in Commander

A blank slate

I. One Size Fits All