Welcome to Uber's Shop Layout Tutorial!

Here you will learn how to make a shop/gallery layout that looks like this:



CLICK HERE to see the sample gallery.
CLICK HERE to see the sample shop.

Images

You don't need images for a layout, but for this example I used these two - a banner and a background image:





How these are used (or not) will be explained in the next section...

Coding

Here is the entire code:


For galleries: copy and paste into the box HERE
For shops: copy and paste into the box HERE




Now let's look at it one piece at a time.
Anything not mentioned here does not need to be changed.

So don't worry about the giant block of gibberish at the beginning, you don't need to do anything to it so just leave it all alone.

Most sections have red to help you see what you can change and what you can ignore.

#main{text-align:center;width:720px;
border-left:2px solid #000000;border-right:2px solid #000000;
background-color:#FFFFFF;}

The width here should be at least 700 pixels or around there so that your items fit, and/or at least 20 pixels wider than your banner width. For this example, my banner was 700px, so my #main width is 720.

The border code can be divided into 3 parts: thickness, style (solid, dotted, dashed, double, etc.), and color.
For color codes to replace the ones here, see this petpage.

The background color here is the background color of the central area, where your items are.


#content, .content{width:720px;border:none;background:none;}

Make this width the same as the one above.


If you have a background image:
If you do not have a background image:

Replace the color code with your own, and then replace the URL in red here with the URL of your background image (if you have one). This is for the background on both sides of the center area where your items are.


#main, div{text-align:center;color:#1A3A20;}

a:link, a:visited, a:active{text-decoration:none;color:#29542F;}

a:hover{color:#6BA80F;}

These three color codes change the color of your text, links, and link hover, respectively.


Now find this:


Replace this URL with the URL of your banner. If you do not have an image, just delete this section of the code.


Now just replace "your text here" with your own content, and you're done!

Contact - Links - Affiliates

Questions, comments, suggestions?
Neomail me.

Link Back



My other petpages
Guide to Transmogrification

Affiliates
apply?






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