Welcome guest

Hi guest! So you've stumbled accross my Extras? This page is a division of Nienke's Premades where I, Nienke, post all my extra content. This extra content will be requests (both layouts and buttons), some extra info about me and the site and maybe some graphics and/or layout reviews.

If you know what else I could post here, please send me a neomail! If I like your idea, I might actually use it ;)

Button pickup


<a href="/~peace_lily_45"> <img src="http://i1116.photobucket.com/albums/k573/nienkju4/gaby.gif" border="0"></a>	<a href="/~Amasielle"><img src="http://i1116.photobucket.com/albums/k573/nienkju4/liz.gif" border="0"></a>	<a href="/~carolan"><img src="http://i1116.photobucket.com/albums/k573/nienkju4/taryn.gif" border="0"></a>	<a href="/~angalisa"> <img src="http://i1116.photobucket.com/albums/k573/nienkju4/cookies3.gif" border="0"></a>

<a href="/~Hurshie"> <img src="http://i1116.photobucket.com/albums/k573/nienkju4/dee.gif" border="0"></a>	<a href="/~DottyHatter"> <img src="http://i1116.photobucket.com/albums/k573/nienkju4/stephanie3-1.gif" border="0"></a>	<a href="/~VanityandCo"> <img src="http://i1116.photobucket.com/albums/k573/nienkju4/vanity2.gif" border="0"></a>	<a href="/~Ressalis"> <img src="http://i1116.photobucket.com/albums/k573/nienkju4/alice2.gif" border="0"></a>

<a href="/~asintia"> <img src="http://i1116.photobucket.com/albums/k573/nienkju4/Ree3-1.gif" border="0"></a>

The older buttons have been moved to my portfolio.

Rules!

Here are some petpage layout templates I've made for you to use. They are very simple, they're only layout bases of course! Please read these rules and notes on the templates before proceeding:

Leave the credit on the template on all times.

You are not allowed to use these templates for premades or for layout requests (when you own a layout requests site). I believe that when you want to make these, you should be able to code your own layouts.

You are not allowed to redistribute any of these templates.

Read the instructions on the template itself before neomailing me with any question about the template.

Of course you are allowed to change the template in any way you wish, you can even edit the banners I've made, as long as you keep the credit. But you can also decide to change nothing and just use it the way it is.

I make sure all the templates work in FireFox, Internet Explorer, Google Chrome, Safari and Opera. Also the layouts are no wider than 1000px to work with all screen resolutions (the ones that neopets supports).

The textarea's on the left provide the codes for the templates and those on the right provide the URLs for a blank versions of the banners I've used in the templates.

Proceed to the templates!

Petpage layout templates

Centered and Continuous

</div>

<img src="http://img35.imageshack.us/img35/1021/faerielenny.jpg" style="margin-bottom: 10px;"><h1>Header</h1>

<b>Bold</b>. <i>Italic</i>. <a href="#a">Hyperlink</a>. Cleaner Code, Better Browsing and A Safer Neopia! All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia! All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h1>Layout instructions</h1>

<b>Creating your own banner.</b> My banner is 700x198px. Your banner should be 700px wide, the height is up to you, though I wouldn't make it much more or less than 200px. When you've finished your banner, upload it and replace my URL with yours. If you can't find the URL you have to replace, look for <i>faerielenny</i> in the code.

<br><br><b>The navigation bar.</b> First change the background color for <i>#nav</i> to a color that matches your banner, I suggest you use a light color. Then change the color for the border of the navigationbar. Look for <i>border-bottom</i> and change the color to a color a few shades lighter or darker than the color of your navigation bar. Now let's move on to the link hover (<i>.nav a:hover</i>). Choose a color a few shades darker than the background color of your navigation bar. Make sure the text is readable when you hover it.

<br><br><b>The headers.</b> You can change the background color of the headers to a color that matches your layout, make sure the text is still readable. To do this, look in the code for <i>h1</i> (between the style tags) and change the background.

<br><br><b>Changing the text colors.</b> For the main text I suggest you use black, a dark shade of grey or a very dark shade of any color. To change the color of the main text, look in the code for <i>#container, table, td, tr</i> and change the color. DO NOT use any light shades because this will be very very hard to read. For the bolded text I suggest you use a color that really pops or appears a lot in your banner. Bolded text needs to stand out. To change the bold text look for <i>b</i> in the code (between the style tags). To change the colors of the italics, look in the text for <i>i</i> (between the style tags). For the normal links look for <i>a:link, a:visited</i> and for the links when hovered look for <i>a:hover</i> (don't confuse this with the navigation at the top, it doesn't have .nav in front of it). For the link hover I mostly choose a color that's a few shades darker or lighter than the normal link color. Make sure that everything is readable!

<br><br><b>The background and container border.</b> You can choose a solid color as your background. Make sure this color matches your banner and that it doesn't hurt on the eyes. You can also use a tiled background, in this case you really have to be careful because not everything works well. In all cases you have to remember that a background is just a background, the focal point is your banner. Don't make the background too busy or too bright and don't let it take away the attention from your banner. To change the background, look for <i>body</i> in the code. I suggest you make the container border a few shades lighter or darker than your background color. This way it blends in really nicely with your background. To change this border, look in the code for <i>#container</i> and change the color of the <i>border</i>.

<br><br><b>Saving the page.</b> To save the page you can scroll to the bottom of the page and click at the very end of the textbox. Then use the <i>tab</i>key to select the save button and hit the enter key to save. You can also put a lot of spaces (br) at the very end of the code, keep adding them until you can click the save button (it will appear at the bottom of the page, beneath your textbox).

<br><br><div style="text-align: right; font: 6pt verdana; text-transform: uppercase;">Template by <a href="/userlookup.phtml?user=nienkju">Nienke</a>.</div>
</div></div>
</center></div>

Centered and Anchored

<b>Bold</b>. <i>Italic</i>. <a href="#a">Hyperlink</a>. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h2>Layout instructions</h2>
<b>Creating your own icon.</b> My icon is 145x145px. Don't make yours larger than this, if you do this, you'll get a horizontal scrollbar. If you want to place a lot of text on the sidebar (so you get a scrollbar), make the icon 125x125. If you don't want to place much text there (so you won't get a scrollbar), then make the icon 145x145. When you've finished your icon, upload it and replace my URL with yours. If you can't find the URL you have to replace, look for <i>ona</i> in the code.

<br><br><b>The navigation bar and the box border.</b> First change the background color for <i>#nav</i> to a color that matches your icon, I suggest you don't use any overwhelming colors. Then change the color for the border of the navigationbar (<i>#nav</i>) and the text box (<i>#box</i>) to that same color. You should look for <i>border</i> in both cases. Now let's move on to the link hover (<i>.nav a:hover</i>). Choose a bright and bold color, but make sure the text is readable when you hover it.

<br><br><b>The headers.</b> First the large headers (<i>h1</i>). The text color should be a bold and outstanding color. The border (<i>border-bottom</i>) should be a really light color. Then the smaller headers. Change the background color to a color that matches your layout. I suggest using a lighter color, but make sure the text is still readable. To do this, look in the code for <i>h2</i> (between the style tags) and change the background.

<br><br><b>Changing the text colors.</b> For the main text I suggest you use black, a dark shade of grey or a very dark shade of any color. To change the color of the main text, look in the code for <i>#box, table, tr, td</i> and change the color. DO NOT use any light shades because this will be very very hard to read. For the bolded text I suggest you use a color that really pops or appears a lot in your banner. Bolded text needs to stand out. To change the bold text look for <i>b</i> in the code (between the style tags). To change the colors of the italics, look in the text for <i>i</i> (between the style tags). For the normal links look for <i>a:link, a:visited</i> and for the links when hovered look for <i>a:hover</i> (don't confuse this with the navigation at the top, it doesn't have .nav in front of it). For the link hover I mostly choose a color that's a few shades darker or lighter than the normal link color. Make sure that everything is readable!

<br><br><b>The background.</b> You can choose a solid color as your background. Make sure this color matches your banner and that it doesn't hurt on the eyes. You can also use a tiled background, in this case you really have to be careful because not everything works well. In all cases you have to remember that a background is just a background, the focal point is your banner. Don't make the background too busy or too bright and don't let it take away the attention from your banner. To change the background, look for <i>body</i> in the code.

Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h2>Header 2</h2>
Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<h1>Page three</h1>

Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h2>Header 2</h2>
Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h2>Header 2</h2>

Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h2>Header 2</h2>
Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h2>Header 2</h2>
Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<h1>Page seven</h1>

Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h2>Header 2</h2>
Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<h1>Page eight</h1>

Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h2>Header 2</h2>
Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h2>Header 2</h2>
Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h2>Credits</h2>

<b>+</b> Template by <a href="/userlookup.phtml?user=nienkju">Nienke</a>.

</div>

</div>
</div>

SIDE BAR!! Cleaner Code, Better Browsing and A Safer Neopia!All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

</div></center>

</div>
<div id="nav"></div>

<div style="position: relative; top: -32px; width: 700px; text-align: center;" class="nav">
<a href="#a">Page one</a>
<a href="#b">Page two</a>
<a href="#c">Page three</a>
<a href="#d">Page four</a>

<a href="#e">Page five</a>
<a href="#g">Page six</a>
<a href="#h">Page seven</a>
<a href="#i">Page eight</a>
<a href="#j">Page nine</a>
<a href="#k">Page ten</a>
<br><br>
</div>

</center>

Continuous with fixed navigation

Navigation title
<a href="#a">Link here</a>
<a href="#a">Link here</a>
<a href="#a">Link here</a>
<a href="#a">Link here</a>

<br>Navigation title
<a href="#a">Link here</a>
<a href="#a">Link here</a>
<a href="#a">Link here</a>
<a href="#a">Link here</a>

<br>Navigation title
<a href="#a">Link here</a>
<a href="#a">Link here</a>
<a href="#a">Link here</a>
<a href="/~ylsya">CSS</a>

</div>
<div id="box" style="position: absolute;">
<div id="container" style="position: absolute;"><div style="margin: 0px 10px 10px 10px; width: 677px;">

<img src="http://img197.imageshack.us/img197/8587/dreamerb.jpg" style="margin-bottom: 10px;"><h1>Header</h1>

<b>Bold</b>. <i>Italic</i>. <a href="#a">Hyperlink</a>. Cleaner Code, Better Browsing and A Safer Neopia! All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here. Cleaner Code, Better Browsing and A Safer Neopia! All HTML and Stylesheets must be recognized as safe by our filter and all code must be properly formatted. This will protect you and your Neopets from deranged code Mynci. You will receive an error notice if the Filter finds a problem, otherwise it simply accepts it. Learn more about the hows and the whys here.

<br><br><h1>Layout instructions</h1>

<b>Creating your own banner.</b> My banner is 677x151px. Your banner should be 677px wide, the height is up to you, though I wouldn't make it much more or less than 200px. When you've finished your banner, upload it and replace my URL with yours. If you can't find the URL you have to replace, look for <i>dreamer</i> in the code.

<br><br><b>The navigation bar.</b> To change the Navigation title, you have to look for <i>#nav</i> in the code. Then look for <i>color</i> (for #nav of course). Now let's move on to the links (<i>.nav a:link, .nav a:visited</i>). Change the colors to a color that is readable against your background. Change the colors of the borders (<i>border-bottom</i>) to a color a few shades darker or ligther than your background. For the hovers (<i>.nav a:hover</i>) use colors that are a few shades darker or lighter than the original colors. 
<br>The links are supposed to be anchors. These are links that direct you to somewhere within the same page. If you click on of the links you will be directed to this<a name="a"></a>. You can read more on page anchors <a href="/~Narcissistiic">here</a>. I think you really should use these anchors because they're very convenient for the visitor :) Also, don't put too many links on the navigation bar, because then people with smaller screen resolutions won't be able to see the whole thing. Try not to make the bar larger than 500px (you can check how large it is in paint).

<br><br><b>The headers.</b> You can change the background color of the headers to a color that matches your layout, make sure the text is still readable. To do this, look in the code for <i>h1</i> (between the style tags) and change the background.

<br><br><b>Changing the text colors.</b> For the main text I suggest you use black, a dark shade of grey or a very dark shade of any color. To change the color of the main text, look in the code for <i>#box, table, td, tr</i> and change the color. DO NOT use any very light shades because this will be very very hard to read. For the bolded text I suggest you use a color that really pops or appears a lot in your banner. Bolded text needs to stand out. To change the bold text look for <i>b</i> in the code (between the style tags). To change the colors of the italics, look in the text for <i>i</i> (between the style tags). For the normal links look for <i>a:link, a:visited</i> and for the links when hovered look for <i>a:hover</i> (don't confuse this with the navigation at the top, it doesn't have .nav in front of it). For the link hover I mostly choose a color that's a few shades darker or lighter than the normal link color. Make sure that everything is readable!

<br><br><b>The background and container border.</b> You can choose a solid color as your background. Make sure this color matches your banner and that it doesn't hurt on the eyes. You can also use a tiled background, in this case you really have to be careful because not everything works well. In all cases you have to remember that a background is just a background, the focal point is your banner. Don't make the background too busy or too bright and don't let it take away the attention from your banner. To change the background, look for <i>body</i> in the code. I suggest you make the container border a few shades lighter or darker than your background color. This way it blends in really nicely with your background. To change this border, look in the code for <i>#container</i> and change the color of the <i>border</i>.

<br><br><b>Saving the page.</b> To save the page you can scroll to the bottom of the page and click at the very end of the textbox. Then use the <i>tab</i>key to select the save button and hit the enter key to save. You can also put a lot of spaces (br) at the very end of the code, keep adding them until you can click the save button (it will appear at the bottom of the page, beneath your textbox).

<br><br><div style="text-align: right; font: 6pt verdana; text-transform: uppercase;">Template by <a href="/userlookup.phtml?user=nienkju">Nienke</a>.</div>
</div></div>
</div>

Extended FAQ

I get asked a lot of questions, but placing this complete FAQ on my the main page would be a waste of space. So I've decided to extend my FAQ and put the complete FAQ here.

Request related

Do you take requests?
Sometimes! But only when the signs on this page says requests are open. Otherwise I do not take requests.

Do you want to inform me when requests are open?
No. I believe that's unfair to other people. Also, I can't neomail everyone who asks this, that's just crazy!

Do you also take requests for lookups, guild layouts or pet lookups?
No. I only take petpage layout requests, because I like making petpages best!

I know requests are closed, but will you make an exception for me.
No, I do not make exceptions.

Why don't you open a request site?!
Because I don't have the time to do that. I wish I could, but then I wouldn't have time to make premades or resources. And I also have a complete tutorial page to finish.

Coding related

I want to change something to your layout/I have a coding question about one of your layouts.
Try this page first. If that doesn't solve it, you can always neomail me. Please be specific, tell me what's wrong and which browser you use (this makes it easier for me to find the problem).

I have a coding question/problem, but it's not related to your layouts, can you help me?
Of course! State clearly what the problem is, what browser you're using and I'll see what I can do ;)

Can I use your codes for my own layout?
Only if the layout is for personal use, so no premades! Also, please leave the credit. Of course, you do not have to worry about the credit on the image. If you change the image, you don't have to credit for that, but you do have to leave a link back to this page.

I can't seem to find/click the save button on the petpage layout ...
If the button's just covered by the text or an image, try to zoom out. If that doesn't work, use the tab button to find it. You'll notice when the save button is selected and then you can hit enter to save the page.

Can you teach me how you make/code your layouts?
No, that's way too complicated. But I'm working on some tutorials!

Graphic related

Where do you find the pictures you use in your layouts?
All over the site! But mostly here and here. You can also use images from plots (The Curse of Maraqua, The Faeries' Ruin and The Tale of Woe are my favorites!) the advent calendar, wearables (If you're too lazy to look for them yourself, this is a great page with all backgrounds) and caption contests.

Where do you find your backgrounds?
The patterns I use for my backgrounds are, as you can see in the credits section, from 77words at livejournal.

Could you put your backgrounds up on your resources page?
No. I did not make these myself, I just recolored them and I find it unfair to the actual maker to claim these as mine. When I see people do this, it makes me cringe...

What programs do you use?
I use Photoshop 7.0 for the graphics. I use ImageReady for animating my buttons. And for finding coordinates I use Paint.

What fonts do you use for your buttons?
The pixel fonts are:

The non-pixel fonts are:

How do you create the glossy/shiny effect on your buttons?
Here's a mini tutorial! It's something I made really quickly because quite some people wanted to know this, so it's not really finished.

Personal

Do you want to work for my site?
No, I already work for SunnyNeo and I find that enough.

How did you learn to code layouts?
I think I learned the basics with the help from l00kuphelp's guide, which has closed sadly. I learned the rest myself. A lot of trial and error.

How did you learn how to make graphics?
This is mostly self self-taught. My first lookups were really ugly, but with a lot of practice I got better at making graphics and layouts. I have learned some techniques from swimchick though. I really like her tutorials!

Shiny button tutorial

This is a short button tutorial in which I'm going to explain how I create my shiny button effect. To follow this tutorial you should already know how to create a normal button and how Photoshop ImageReady works. So this is how it looks:

I have already created most of my button. Again, I'm only going to explain how to create the effect! This is what I've got so far:

I've made this entirely in Photoshop. Make a new layer completely on top. Then select the Gradient Tool (G) and match your settings to mine:

Drag and drop for full size!

Also, make sure your foreground color is white or a very very light color. Now create a small gradient on your button, like this:

For people trying to follow this tutorial but use a program that doesn't has a gradient option, you can also use a soft round brush to create a gradient like this. You only have to make sure it's one straight line. I've set this layer opacity to 85%, because I found it a bit to light on 100%. You can also try to set it to soft ligt. Now go to your base layer in your layer window and CTRL+Click on the layer. Go back to your gradient layer and add a layer mask. This is very important if your button, like mine, has some edges cut of. You of course don't have to do this when you don't have any transparant parts on your button. You can also use this to make the gradient only cover text. Then you have to go to your text layer, CTRL+click it and then make the layer mask. Then make sure your layer is not linked to the layer mask. You can do this by clicking on this

between the layer and your layer mask. It will dissapear after you've clicked it. This means you can move your layer around, without moving the layer mask.

Now make sure the gradient layer is selected, but NOT the layer mask and nudge your gradient all over to the left so it isn't visible anymore. The tric is that when you nudge it one pixel to the right, it will become visible. I always zoom in when I do this, so you can see easier where the gradient ends.

We're now going to work in ImageReady. Click the "Jump to ImageReady" button in the toolbar. The first thing I do is zooming in by pressing "Fit on Screen". Select the Move Tool (V) and make sure your gradient layer is still selected (but again, not the layer mask).

Click the "Duplicates Current Frame" in the animation window and nudge the gradient 5 pixels to the right. The more pixels you'll nudge the gradient, the faster your glow will be. Repeat this step until the gradient has reached the right side of the button and isn't visible anymore. Make sure the delay of all the frames is 0 seconds except for the first one. I've set the delay for the first frame to 1,5 seconds. You don't want the button too become to busy.

Go to File » Save Optimized As... and save your button as a gif. This is my final result:

About Nienke

I'm quite flattered that you actually came here to learn more about me. Well, I'll tell something about me.

Real-life

My name is Nienke (which is a Dutch name!). I'm an 18-year-old girl from the Netherlands and to be honest, my English could be better. I've finished my English classes with a 7, which is not bad but not great either. That's why grammar is bit off every now and then. Also, I'm not that good in writing about me's, so I'll keep it short ;)

As you may have already noticed, I LOVE making layouts and graphics. I've always enjoyed making pretty stuff, from drawings and paintings to site layouts. That's why I took extra art classes in my last two years of high school. This is one of the drawings I've made there:

As you can see, it's a still life. I had to rush it a little, I managed to miss half of the lessons when we made this. It turned out pretty nice though. I've finished these classes with a 9 :D So I got a really nice certificate.

Talking about school. I just finished high school, or VWO (voorbereidend wetenschappelijk onderwijs wich means pre-university education). And now I'll be going to university to study biology. I actually enjoy subjects like maths and chemnistry, he he. *cough cough* nerd *cough*

I don't really have hobbies, because I'm way too indecisive to decide what they are. I just like a lot of things! What I like most is hanging out with friends and doing random stuff. But I also like cooking and baking, listening to music (The Script, Keane, Imogen Heap), talking, shopping (I confess), drawing, painting and things like that. Oh! I also follow quite a lot of tv series. I always record the programs I want to watch and then watch them during breakfast. When that's possible that is... I watch NCIS (LA), Bones, Criminal Minds, The Mentalist, Castle, House, Glee, Modern Family (= hilarious), The Big Bang theory and probably more.

I have two little guinea-pigs I love to death. They're really, really stupid, but so sweet and cute.

The one on the left is called Elmo and the one on the right Puk.

If you really want to annoy me you have to ask me how to save the petpage layout you're using or if I want to make you a layout while I'm not taking requests. Some other things that really annoy me are: People who don't give credit for the resources they've used, people who don't read my FAQ, people who are arrogant or just really annoying and when I have to get somewhere on my bike and it freezes outside and you can literally ice skate on the streets. Good thing I'm really patient, haha.

On neo

I made my first account, jallientj ages ago (about 5 years). The name's really weird, I know. It's actually some sort of inspired by my little brother. His name is Jelle, sometimes we call him Jallie and... yeah. This was before I made my current main account. That's why I've played some games on that account, it was my main back then, but I really did not like the account name, so I made a new account. I've got three other sides: Menyialuna, Latiska and Betweenourhearts. Poetic, right?

The first thing I do when I come online is checking my mail. I read all of them and then I only answer the easy ones. Then I check Soroptimist (the sitely news of course), SunnyNeo, the neopets news and my guild. Then I don't know what to do, so I check all my active affiliates. At that time I'm really bored, so I go back to my mail and answer the mails that are a bit less easy to answer. Then I mostly have to go to school or have to eat breakfast.

When I get back online_ I decide to make some layouts/buttons. When I've got some button requests to finish, I mostly start with those (all the easy things first right?!). What I'll make next depends on how I feel. I might go trought my suggestions and make a layout. Or I just go trough my files and finish an unfinished layout. Or I finish a request. Of course I update the homepage about 5 times, because I'm a bit chaotic. I often just skip the layout making part, when I'm busy.

In the evening I check Soroptimist, SunnyNeo and all my affiliates again. I'm a bit of a stalker, I guess. When I've done that, I go answer the rest of my mails. This is also why I forget to neomail back so often. My neomail routine is a bit chaotic and sometimes I think I've mailed someone back, while I haven't. So sorry if that ever happens to you!

So, well, I think that's all about me. I couldn't think of anything else you possibly would like to know. But if you do (I have no idea why you would), you can always drop me a neomail.

Old layouts

I've made quite some layouts for Nienke's Premades and of course, I've kept the code of all of them. So here are all the layouts I've made for my site with a little comment from me. (Drag and drop for full view)

I'M A WINNER This is the layout I made during my hiatus. This is the first layout for the site I still like. It's pretty simple, the main page didn't really have any content on it back then, so I didn't need more than this. I should have recolored it a bit though...	DANCE THE NIGHT AWAY I made this layout when I decided I was going to work on my site again. It was way more proffesional than all my previous layouts and I was so proud of it. I used the pen tool to make the kyriis (the original image is very small), which took me ages. What I like most about this layout is the color scheme.
LET GO This layout is very similar to a layout I made for my guild. I liked the idea so much that I wanted to use it again for my site. I love how the main image turned out, it has so much movement. I'm not a big fan of the css though. It was a bit to white. But I still like it, it's a bit different from everything else you see.	ALL THE RIGHT MOVES I'm still pretty much in love with this layout. Again, there was a lot of movement, but I also like the textures. The whole layout had this old look, but it didn't look dirty. I also think it looked very classy. This definitely one of my favorites.
MEMORIES Even though this layout was very pink, I really liked it. What I liked most about is, is how the image fitted around the textboxes. The css was a bit boring, but the imagery made up for that.	LAST MAN STANDING This is one of my least layouts. It just didn't fit my site. I still really like the imagery, all the motion and effects. The box was just to small for my site and it didn't feel like... a proper welcome.
SOMEWHERE ONLY WE KNOW This layout was really peaceful, with the blue colors (yes, blue colors work relaxing, it's true) and the meditating nimmo. I really liked the lillies at the bottom, they made the layout instantly more interesting. The textures also worked great.	SUNSHINE It took me ages to come up with this layout. I wanted to make a new layout before Rika started to review my site, but nothing worked out the way I wanted it to. After a whole day making layouts, I came up with this one. I still love it. The bright colors make the layout so happy and sunny and shiny.
COLORDROPS The PNG I used for this layout was a PAIN to make. Especially since this was the second time I made it (my computer crashed the first time). It took me about 3 to 4 hours. This was about the time I discovered the Gradient Map Adjustment layers. I really love the coloring, it's very different from the original image, but it still looks natural.	DREAMER I really wanted to use the background image, but I figured it was to blank to function as the main image of the layout. So I found the coloring page of this sleeping air faerie. I really loved the soft colors and how dreamy the whole layout was. I was a bit lazy when I coded the layout, so that was a bit of a shame. It could have been a better layout.
THE DARKEST FAERIE It took me really long to make this layout. I really loved the base image, but I didn't like how the layout as a whole turned out. I thing it was a bit too purple for my taste. Since I really liked the imagery, I turned it into a guild layout.	FIRE I really disliked the previous layout, so I felt like I had to make a new one. I wanted to make something simple, but not plain and boring. I really like this layout, the only thing I didn't like was the navigation.
TROUBLE This layout took me ages to make. I just couldn't figure out where I was going to leave all the modules. I think it turned out pretty good, though the placement of the modules started to bug me after a while. Also, some of the text was quite hard to read because of the text...

Old buttons

Achievements

I'm not really a bragger, but when someone takes the time to make me an award or write something special, I can't let that go unnoticed. So this is a little place I've made for the things I've "achieved". I won't put up any rankings though.

Awards

Featured