Indroduction

Welcome to Vivienne's step by step Neopets shop and or gallery layout tutorial. This tutorial will provide you with a template, and each step will explain each code. The code will contain a navigation, side bar for your own personal text, blockquote, extra simple features and the codes to turn it into a neo shop/gallery layout. All labeled to make it easier for you to use the code again. This is how my basic example turned out like.




Step 1 - The Design

First you need to design your layout using this template.

Keep your design the exact size as the template. A small preview of my example is below.

From your image, create a repeating background. The easiest way is to take a couple of px's from the bottom of your header image you made. Again, a mini-example of mine is below.

Upload both images, and keep the image links of both of them for later in the tutorial.

Step 2 - Body Background/Color

Note: remember to start off with the style tag.

The code below consists of your body background, which is your repeating px's, and the background color/font of your page.

Currently, your background color is white, which #FFFFFF. If you wish to have it another color, replace it with another hex color.

If you are unsure, a hex color is a code started with #, and is a 6 digit number making up a color.

You can also change your font size and name. All you do is change the 8pt to a higher or lower number, depending if you want your font bigger or smaller, and you can change the font verdana to another one. I recommend you change it to a default font, as special downloaded fonts may not show up for everyone.

body,td,div,a,p{font: 8pt verdana;}
body {background-color:#FFFFFF;
background-image: url
(IMAGE URL);
background-repeat: repeat-y;}

Replace 'IMAGE URL' with the image link of your repeating background.

Your body background and color is now done.

Step 3 - navigation

The navigation will appear in the space of your personal text, later to be explained. The whole code is this:

#nav a {
font: 8pt verdana;
color:#000000;
display: block;
padding: 4px;
width: 165px;
background-color:#FFFFFF;
border-color: #000000;
border: 1px solid;
text-decoration: none;}

#nav a:hover {
color:#000000;
background-color:#E580C2;
border-color: #000000; }

I will now break it down for you.

#nav a {

This is how you start the navigation code.

font: 8pt verdana;
color:#000000;

This is simply the font size, font name and the font color. All you need to do is change the number, name and hex color to your liking. At the moment, it is size 8, verdana, and the font color is black.

display: block;
padding: 4px;
width: 165px;

This part is to be ignored, but the code tells it to display the navigation as a block - straight edges - a box. Padding gives the text extra space, and the width is how wide each link would be displayed as.

background-color:#FFFFFF;
border-color: #000000;
border: 1px solid;
text-decoration: none; }

The background color is the color of your nav, and the border is the border color/thickness of the nav. All you need to do is change the hex colors. At the moment, it is white with a black border. If you want the border of your nav thicker, change the 1px to a higher number. I recommend you do not do this though, as 1px looks best in this kind of layout. text-decoration simply means having your link text bold, italics, and underlined. As links are originally underlined, 'none' causes the underlining to go away.

#nav a:hover {
This code is starting off the hover part of your navigation. This part of the code is what happens when people hover over the navigation with their mouse.
color:#000000;
background-color:#E580C2;
border-color: #000000; }

Again, all you do is change the hex colors. If you do not want to change a certain thing, get rid of that part of the code.

COLOR is the font color.
BACKGROUND-COLOR is the color of your background when hovered over.
BORDER-COLOR is the color of the border when hovered over.

Step 4 - Neocodes

All the codes I will explain are to make it work as a neopets shop/gallery layout.

.sf {display: none;}
.ad_wrapper_fixed, #ban_bottom{display:none;}
#header, #footer, #ban, .key {display:none;}
.sidebar {background:none; display:none; }

These codes get rid of the neo advertisements, the sidebar, neo navigation and most of the parts of the neo layout. There is nothing you need to do with these codes.

#main {background: none; border: none;}
#main {position:absolute;width:560px;left:217px;top:212px;}
#content {width:560px;}

The positioning of your shop/gallery items consist of this code. As you can see, I've already positioned it in the correct area for you, and the content width is how wide your content will expand to. I've made it so it fits in your layout.

You will also notice I've put the code as no background and border color. This is because the layout does not need or suit with a background color/border. So there is nothing you need to do with this code.

Step 5 - Extra Features

You do not have to do these codes, but they give the page more of a special effect.

u {
font-size: 10px;
color: #000000;
border-bottom: 1px dashed #DB51AC;
font-family: arial;}

b
{font-size: 10px;
color: #DB51AC;
font-family: arial;}

i {
font-size: 10px;
color: #000000;
text-decoration: italic;
font-family: arial;}

Again, all you need to do is change the colors and font (size, color and name). U stands for underline, B stands for bold, and I stands for italics.

The code simply makes them show up differently when they are used, according to the codes here. It will give your page a better effect.

blockquote {
color:#000000;
background-color:#FFFFFF;
font-size:11px;
text-align: justify;
BORDER: #000000 1px solid;
padding:4px;}
A blockquote is simply a block - box, displayed like your navigation. But it is not designed for linking, and I've given it a different effect.

Again, all you do is change the hex colors, and the blockquote will be used further down in the page.

Step 6 - Positioning/Headers

As you did in step 1, you made your design. This is the code to get the positioning of your design in place.
#top{position: absolute; left:-217px; top:-213px; }

This code is the code to position your sidebar which will display your navigation and text, nothing is to be changed in the code. More about it coming up in the next step.
#sidebar {position: absolute; top: -70px; left: -191px; width: 174px;}

There is nothing you need to do with this code either.
.title{color: #000000; font-family: verdana; font-size: 12pt;}
This is your title header. It will be displayed as a different size/font as you set it, so it will stand out as a title. Again, you just need to change the size, font and font color.

Now you must close your style tag.


The next part of the step is a code to place your image header so it shows up on the page.
Remember, this goes after you've closed your style tag.
Replace the /.jpg with the image url of your top header (your design which was uploaded in the first step)



Step 7 - sidebar

As told in the previous step, The sidebar is where you will place your own personal text and will consist of your navigation.

This ends your sidebar. Anything typed after this will not be displayed in your sidebar area, but above all your shop/gallery items. You MUST put this code in.

So I suggest this is where you put your blockquote. Below everything, being your style code, sidebar etc, place this, either keeping the same sentence there, or changing it to your liking.

Welcome to my gallery/shop!


Extra Notes

Do you spell color as colour? Note when your typing codes, to spell it as 'color' instead of 'colour'. Otherwise the code will not work properly.

Also remember when using style tags, that you must add a space at the end of them, otherwise the coding will not pass through the neofilters.

(style ) and (/style )

End

Well, I hope you found this tutorial useful. If you have any questions, comments or suggestions, feel free to neomail me @ girls_818. I would love to hear them, so I'll be happy to read and reply to any questions or comments neomailed.

Crediting

If you used most or all of the codes directly from this tutorial, you must have a visible link back to this page (this still applies if you used the codes and edited it), especially if you used my lookup template, regardless if you made it for yourself or someone else. If you are unsure if you require to credit or not, feel free to drop me a neomail asking.

Or, if you only used a few codes such as codes to get rid of the advertisements and coded the rest of the layout yourself, a link back is not required but would be nice =)

-Viv

Coding/Layout by Vivienne - stealing is reportable




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-2014.
® 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