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 or claiming ownership is forbidden. If a layout created by the owner of Whitespace isn't listed below, it is not available to use.

IV. Resources Backgrounds V. Grave Past Layouts

III. UPDATES

April 9th, 2019 A new rendition of Minimal has been added, Minimal Show Off. Same old minimal, now with a pets section oOoOoOo.

March 15th, 2019Over the years, I've had several request for a pet directory type layout. Your wish is my command! Directory has been added to the spotlight section. In addition I've noticed issues with the Moonglow pet lookup; I plan to fix it sometime this weekend.

March 2nd, 2019New 'Lookbook' layout — Photobooth IV has been added to the spotlight section.

February 25th, 2019I've re-coded my original portfolio layout from 5 or so years back. If you prefer the old one it's in the Grave. Additionally, I have added a 6 pet version of Minimal Squared. It is quite the popular layout still to this day, so thought I'd make it easier on my fellow premium members — enjoy! 'Chomp' is next on the revamp list.

February 8th, 2019I've added a card style layout called Queen of Hearts. I created this as I collect Grarrls, and wanted a page to display them. You can use it for pet collections, pet portfolios, and characters. Enjoy!

January 18th, 2019 I've added new pet lookup, Storybook II. As you can tell by the name, this is an update to Storybook.

January 7th, 2019 I've added a new layout, No. 2. This is the same layout as 'Sweet Spot' with minor tweaks. Enjoy! I was bored of my lookup and created this a couple weeks ago. I should have another version of my portfolio layout up in the next few days or so. I've been on a long stay-cation from work, hence the updates ;) HAPPY NEW YEAR!

December 16th, 2018Some userlookups were affected. If you were using Burnt Flesh, Ground Control, Starlight or Bloopity Oopity — grab fresh code. If you'd just like a quick fix, find #main { margin: value; } and track an !important on the end. ie. #main { margin: value !important; }

December 13th, 2018 Birdcage, Parallax, and Moonglow pet lookups were experiencing issues as TNT modified code. I have fixed these layouts. Feel free to grab fresh code!

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!

Spotlight

It's lit.

You may add additional pets to create a secondary row. To round pet images, add .pet a { border-radius: 1em; } before the closing /style tag. If you have less than five pets, add .bx-wrapper { margin: 0 auto; } before the closing /style tag. In addition, modify the number in #usernopets li { margin:## !important; } so your pets are spaced correctly.

Minimal Show Off

Rendition of Minimal Squared with additional pet display.

I. 5 pets

II. 6 pets

This layout is minimal, edit to your hearts desire! Leave all div's with the class LEAVETHISHERETOCLEAR after each type section, othterwise your layout may become wonky. You must change the square brackets to less than/greater than brackets in the textarea link back section.

Directory

For your pet directory needs!

I. One Size Fits All

You can adjust the position of the side navigation by changing the numbers in .nav { top: ###px; }. 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 at the end of the url (or it will be blurry).

Photobooth IV

The fourth rendition of the Photobooth Series

I. Light

II. Dark

Keep the div with the id 'LEAVE_THIS_AFTER_THREE_PETS' after each pet row. If your pet descriptions are different heights, you'll run into issues without it.

Queen of Hearts

A card style pet portfolio

I. Light

II. Dark

User Lookup

Lions, tigers & bears oh my!

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; }.

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

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: 14px !important; }. If you do not want two columns of text, simply remove the p tags.

No. 2

The second rendition of Sweet Spot

I. Black

III. Black (Background)

II. White

IV. White (Background)

Add #userinfo table table td td a { border-radius: 1em; } before the closing /style tag to slightly round #userinfo images like the preview. If you're premium with 6 pets, add the following snippet before the closing /style tag: #userneopets li { margin-right: 13px !important; }.

Burnt Flesh

The creators personal favourite

I. Light

I. Dark

If you have less than five pets, add .bx-wrapper { margin: 0 auto; } before the closing /style tag. In addition, modify the number in #usernopets li { margin-right:## !important; } so your pets are spaced correctly. 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.

Minimal Squared

The second rendition of the Minimal Series

I. 5 pets

II. 6 pets

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

Pet Description

All the pets are belong to me.

Add the following snippet of code before the closing /style tag to style your trophies: div[align=center] img { width: 30px; height: 30px; float: right; margin-top: -40px; padding: 5px; border: 1px solid #444; }

Slate

The plain Jane

I. Light

II. Dark

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)

Storybook II

The second rendition of Storybook

I. Light

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

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

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

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

Pet Page

P to the a to the g to the e.

Keep the div with the id 'LEAVE_THIS_AFTER_THREE_CARDS' after each card row. If you want equal heights for your boxes, add the following before the closing style tag: #trio { height: 150px; } #pet { height: 480px; } — Keep in mind, you'll have to adjust the heights depending on your content. Trio is for updates, goals and achievements while pet is for your pets.

Portfolio

A remastered version of the original portfolio layout

I. Full

II. Partial

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

I. Light

II. Dark

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

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

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

Come in Commander

A blank slate

I. One Size Fits All