Have you always wanted to make a awesome shop or gallery layout, but not sure how to?
This is a simple step by step code to making an easy, already put together layout for you!
The code works for both gallery and shop.
Beginning
First off, open paint and copy and paste this image into a new document.
OR you can design it yourself by using this template.
If you are designing it yourself, please remember to put credit towards neopetsguide.com for coding, and skip the next step.
Fill in the grey and white colours to the colours you want. After that is done, add a title (optional) and save. Please do not remove the neopetsguide.com credit already on the template.
You can see mine here, I've done mine in 2 pink shades.
From your image, creating a repeating background. I just take the bottom couple of px’s from the header image we created before. See my background here.
Upload both images.
The code
The code is divided into 4 sections.
Before I explain how it all works, copy the code below here (gallery) or here (shop).
Step 1 of the code
As you can see, the code is divided into 4 sections. The first section is Body background and colour. As you have already done and uploaded the repeating background, paste the image url where it 'background image url goes here'.
Once you have done that, where it says 'background-color:#F4A3DA;', change the 6 numbers/letters to the colour of your choice. Go here for colour codes.
Step 2 of the code
This is the navigation. All you need to do is change the colour codes of 'background-color:#E580C2;' to your choice. To do this, replace the 6 numbers/letters to another colour code. Go here to pick your colours.
Step 3 of the code
You have done now the first section of the code. The second section of the code is also straight forward. All you need to do is change the colour codes to your choice. B = Bold, I = Italics, U = underline, and title = the header displayed on the side bar of the layout. Remember to change the blockquote colour too. =D
Step 4 of the code
Then as it states, ignore the rest of the codes in the style section. Scroll down to where it says, 'top image url goes here'. Replace that with the image url of the image you made and uploaded at the very start. As a reminder, mine is here.
Finished
Your shop or gallery layout is all done! I hope this guide helps, and if you have any questions about it, neomail or email me. This is what it will look like in the end, only different colours.
Credit
Credit should already be on the layout, but you will notice a blinkie that is linking to the NG petpage, also with the layout when you first copied it. Please keep the blinkie there too. You may if you wish change it to another coloured blinkie, instead of having the pink one there. Here are the other colours available, just copy the image url and replace the pink blinkie.
-Viv