Alula
CSS premades & resources

October 19, 2016: Sorry for the absence! Some things came up in real life, but now that it's mostly settled I plan to go back to maintaining Alula. Expect more content soon!

August 3, 2016: +1 new anchored layout (2 color schemes) and +4 new full backgrounds

August 2, 2016: +1 new scrolling layout

July 11, 2016: +2 new pet lookups

July 6, 2016: Alula has its twelfth affiliate, Aurum. This site has lovely shop and gallery layouts, so be sure to take a look! All affiliate spots are now filled.

July 5, 2016: +1 new anchored layout and +1 new tiled background

July 1, 2016: +1 new scrolling layout and +7 new full backgrounds. We're also now affiliated with Pascal, which offers gorgeous CSS premades!

June 28, 2016: Alula is now affiliated with Colored Wishes and Queen Graphics. Apologies for the lack of updates, it's been busy and I just came back from a trip. I am working on a new scrolling layout however!

June 14, 2016: We are now affiliated with Beetle, a great site for layouts and coding help.

June 9, 2016: 2 new affies: Bejeweled and Augment!

May 31, 2016: +1 new tiled background and 2 new affiliates: Quartz and Krazy Kute Kreations!

May 23, 2016: +1 new scrolling layout, anchored layout, pet lookup, and full background

May 16, 2016: +1 new pet lookup, +1 new code snippet

May 15, 2016: Our newest affiliate is Silent Serenity. It's one of the best premades sites out there today, so you should definitely take a look.

May 12, 2016: We're now affiliated with Coding Revolution, a brand new site that offers useful and gorgeous CSS layouts!

May 7, 2016: We're officially open! Our first affiliate is Pebble, a site that provides lovely resources.

  1. 1. Editing is fine, but don't claim you made anything here.
  2. 2. Credit is not required, but appreciated.
  3. 3. If a layout includes content from other sites, such as adoptables, follow their rules.
Scrolling Anchored Pet lookups
  • Coded for characters, but still versatile
  • Floating header
  • Smaller scroll box feature
  • Quote feature
  • Versatile
  • Floating navigation bar
  • Sub-headers
  • Smaller scroll box feature
  • Versatile
  • Thin column
  • Two floating images
  • Versatile
  • Centered floating sidebar with cropped background image
  • Percentage-based; will change size depending on the screen size
  • Perfect for art/graphic portfolios and moodboards
  • Not recommended for beginners in CSS
  • Grid boxes can be rearranged
  • Cropped image boxes, quote boxes, and text boxes of different sizes
  • Art page layout
  • Hovering over a thumbnail reveals a bigger image
  • Percentage-based; will change size depending on the screen size
  • Text bar is fixed and has a hidden scrollbar
Scrolling Anchored Pet lookups
  • Versatile
  • 9 pages
  • Centered vertically and horizontally
  • Both dark and light versions to choose from
  • Full wallpaper background
  • Coded for character portfolios, but still versatile
  • 21 pages
  • Full-screen anchored pages
  • Hover navigation
  • Cropped profile image code
  • Versatile
  • 5 pages, but more can easily be added
  • Centered both horizontally and vertically
  • Babaa image can be changed
  • Intro screen + exactly 4 pages
  • Patterned borders
  • Centered both vertically and horizontally
  • Versatile
  • 4 pages; more can be easily added
  • Full-height anchored pages
  • Percentage-based; will change size depending on the screen size
  • Scrolling sidebar
  • Versatile
  • Full-screen pages
  • 7 pages; more can easily be added
  • Full wallpaper background
  • Both light and dark versions to choose from
Scrolling Anchored Pet lookups
  • ~1600 characters
  • Pet image and stats in a single column
  • Description box appears on hover
  • *Ctrl+f (style) and (/style) and replace the parentheses with pointy carrot brackets before using.
  • ~1800 characters
  • Perfect for showcasing an art piece
  • 3 anchored pages: Image, stats/customization, description.
  • Image is centered vertically and horizontally
  • *Ctrl+f (style) and (/style) and replace the parentheses with pointy carrot brackets before using.
  • ~1900 characters
  • 4 blocks: pet, stats, description, image/quote.
  • Petpet and P3 appear when hovering over the customization
  • Hides trophies (the next layout displays them)
  • *Before using, Ctrl+f EVERY INSTANCE of a @ and replace it with a less than sign, then ctrl+f and replace every instance of a % with a greater than sign.
  • ~2100 characters
  • Same as the previous layout, but with trophies
  • Only works for pets with trophies
  • *Before using, Ctrl+f EVERY INSTANCE of a @ and replace it with a less than sign, then ctrl+f and replace every instance of a % with a greater than sign.
  • ~1900 characters
  • Full-height fixed pet image
  • Replaceable image
  • Scrolling
  • *Ctrl+f (style) and ( /style) and replace the parentheses with pointy carrot brackets before using. NOTE THE SPACE in ( /style)
  • ~2100 characters
  • Centered vertically and horizontally
  • Scrolling description box
  • Full-screen background
  • *Ctrl+f (style) and ( /style) and replace the parentheses with pointy carrot brackets before using. NOTE THE SPACE in ( /style)
Full Backgrounds Tiled Backgrounds Code Snippets

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash

From Unsplash
Full Backgrounds Tiled Backgrounds Code Snippets


Semi-transparent Backgrounds: You can make the backgrounds below any color by setting a background color in addition to the image. For instance, you could use something like background:#888888 url('http://i.imgur.com/18IaUlX.png');.

Full Backgrounds Tiled Backgrounds Code Snippets
Full Backgrounds Tiled Backgrounds Code Snippets

Customizing your pet's gender

Disclaimer: I have not contacted TNT to see whether customizing your pet's gender with CSS is within the rules. Do so at your own risk.

The easiest way to customize your pet's gender on their lookup is to simply remove it. This method should work with any layout. Just copy the appropriate CSS below and paste it between style tags:

If your pet's lookup currently says "Female":
If your pet's lookup currently says "Male":


The second method takes a bit of work in an image editing program, such as Photoshop or GIMP, but allows for more customization. The idea behind this method is to replace your pet's displayed gender with an image of text. First you'll need to make an image that will fit into the space, depending on your layout. It can say whatever you like (except for male and female, since you can already get those genders through normal means). Then, upload your image to an image host and use the appropriate CSS below as a base code. Replace http://i.imgur.com/z6v0drv.png with your image URL, and replace 39px with the width of your image.

If your pet's lookup currently says "Female":
If your pet's lookup currently says "Male":

As a default, the snippets above will change your pet's gender to "Other" on a normal layout, so if that suits your needs you don't need to make any changes.

Full Backgrounds Tiled Backgrounds Code Snippets

Using full-screen backgrounds on pet pages

In any of these codes, you'll need to replace http://images.neopets.com/images/htmltonu.gif with your image's URL.

The following code will stretch your image to 100% of the screen's width and 100% of the screen's height. This will give the background full coverage on any screen, but may distort the image.

The following code only stretches one dimension to 100% of the screen. The other dimension is stretched based on the first one, so that the image does not get distorted. However, this means that the image may not cover the whole screen on certain resolutions. Choose your code wisely, as different codes may be better for different images.

Stretches the width to 100%:
Stretches the height to 100%:
Full Backgrounds Tiled Backgrounds Code Snippets

Code for character statistics

This code will work on most layouts. It is very basic, so you're encouraged to style it and make it as pretty as you please. This is what the code gives you:

Name: Mariquita
Nickname: Mari
Gender: Female
Species: Pteri
Brush: Yellow
Full Backgrounds Tiled Backgrounds Code Snippets

Forward/back links for pet lookups

This goes anywhere outside your style tags:
This goes anywhere within your style tags:

Make sure you get both pieces of the code above. This will give you left and right arrows on the sides of the screen. They have fixed positioning, so they stay in place even if you scroll.

The code will work on most layouts. It is very basic, so you're encouraged to style it and make it as pretty as you please.

Updates & Rules Scrolling Anchored Pet Lookups Full Backgrounds Tiled Backgrounds Code Snippets
Affiliates: (12/12)



Listers:



Alula is operated and coded by Finchia. Anyone else claiming to have coded any of this CSS will be reported.
Background photo is by Patryk Sobczak from Unsplash.

NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2016. ® denotes Reg. US Pat. & TM Office. All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the
Terms and Conditions



Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2017.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions