Sidebar Tutorial (Paint)

1. Open Paint (Start > Programs > Accessories > Paint).

2. Go to Images > Attributes and in the height and width boxes type in "1" (pixel). This is to make sure there is no extra white space around your sidebar when you are done.

3. Right click on the sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_template_2.gif) and choose Copy. If you want to make a sidebar without a top bar, use this sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_side_template_2.gif).

4. Switch back to Paint and go to Edit > Paste.

5. Decorate the blue area with the Paint Can Tool, Airbrush Tool, etc. This will be the background of your sidebar.

6. Go to File > Save As and save your image. It doesn't matter what the file extension is because you won't be uploading this image to the internet.

7. Go to File > New.

8. Go to Images > Attributes and in the height and width boxes type in "1" (pixel). This is to make sure there is no extra white space around your sidebar when you are done.

9. Right click on the sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_template_1.gif) and choose Copy. If you are making a sidebar without a top bar, use this sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_side_template_1.gif).

10. Switch back to Paint and go to Edit > Paste.

11. Go to Image > Draw Opaque. Go back to the Image menu again and confirm that there is NO check mark beside Draw Opaque. If there is, click on Draw Opaque and it should go away.

12. Select the Text Tool.

13. Make a large text box in the big empty white space.

14. Select what font you want. Change the size to 16 - 20 (or whatever size will fit one line into one of the purple or green boxes).

15. Copy the words below:
Create
Central
Explore
Games
Neomail
Shops
Boards
News
Stuff
Help
Login
Logout

16. Go back to Paint and paste the words into the rectangle. You may have to make the rectangle bigger or the font smaller if the words don't fit.

17. Select the Selection Tool.

18. Make a box around "Create".

19. Move "Create" on to the first purple box.

20. Repeat steps 17 - 19 for each of the other words, make sure to keep them in order!

21. Select the Paint Can Tool.

22. Fill in all of the bright purple and bright green spaces (make sure to get spaces inside the letters) blue.

Note: If you want to add pictures beside your links and on top of the background image, now is the time to do it.

23. Go to File > Save As and save your image (with a different file name from the first one you saved). It doesn't matter what the file extension is because you won't be uploading this image to the internet.

24. Go to Edit > Select All.

25. Go to Edit > Copy.

26. Go to File > Open and open the first image (the background).

27. Right click on blue in the colour palette.

28. Go to the Image menu and check to make sure the Draw Opaque is still unchecked.

29. Go to Edit > Paste to paste your text on top of the sidebar.

30. Go to File > Save As and save your sidebar as a gif, jpg, or png (you can choose the file extension from the drop-down list below where you type the filename).

31. Right click on the transparent image below and choose Save Picture As.
http://usera.imagecave.com/sunshinejenny/templates/transparent_green.gif

32. Upload both images to the internet (the sidebar and the transparent image). Try http://www.imagecave.com/ or http://www.2and2.net/ for an image host.

33. Sidebar and topbar (regular sidebar):
<style> i.top, i.side { background-image: url(http://www.neopets.com/SIDEBAR.gif); } i.top { position: absolute; left: 0px; top: 00px; height: 042px; width: 728px; } i.side { position: absolute; left: 0px; top: 00px; height: 763px; width: 130px; } #navbar { position: absolute; left: 0px; top: 63px; height: 421px; width: 130px; z-index: 1; } table, td, #n, #tbg { background: transparent; } a div, #mb, #m, #ol { visibility: hidden; } .tt, #n { position: relative; z-index: 1; } #ban { display: none; background: transparent; } </style> <i class="top"></i> <i class="side"></i> <img src="http://www.neopets.com/BLANKURL.gif" border="0" id="navbar" usemap="#a">

Sidebar only:
<style> i.side { background-image: url(http://www.neopets.com/SIDEBAR.gif); position: absolute; left: 0px; top: 00px; height: 763px; width: 130px; } #navbar { position: absolute; left: 0px; top: 63px; height: 421px; width: 130px; z-index: 1; } table, td, #n, #tbg { background: transparent; } a div, #mb, #m, #ol { visibility: hidden; } .tt, #n { position: relative; z-index: 1; } #ban { display: none; background: transparent; } </style> <i class="side"></i> <img src="http://www.neopets.com/BLANKURL.gif" border="0" id="navbar" usemap="#a">

34. Replace http://www.neopets.com/SIDEBAR.gif with the address of the sidebar. Replace http://www.neopets.com/BLANKURL.gif with the address of the green image.

Sidebar Tutorial (Paint Shop Pro)

1. Open Paint Shop Pro.

2. Right click on the sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_template_2.gif) and choose Copy. If you want to make a sidebar without a top bar, use this sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_side_template_2.gif).

3. Switch back to Paint Shop Pro and go to Edit > Paste > As New Image.

4. Go to Image > Increase Color Depth > 16 million colors (24 bit). If you cannot select this option, the image is already 16 millions colors and you can still continue on with the tutorial.

5. Decorate the blue area with the Flood Fill Tool, Picture Tube Tool, Effects Menu, etc. This will be the background of your sidebar.

6. Right click on the sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_template_1.gif) and choose Copy. If you are making a sidebar without a top bar, use this sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_side_template_1.gif).

7. Switch back to Paint Shop Pro and go to Edit > Paste > As New Layer.

8. Go to Layers > Properties.

9. Change the layer name to "Nav Area" and click OK.

10. Go to Layers > New Raster Layer.

11. Select the Text Tool.

12. Select a font. Change the size to 16 - 20 (or whatever size will fit one line into one of the purple or green boxes).

13. Copy the words below:
Create
Central
Explore
Games
Neomail
Shops
Boards
News
Stuff
Help
Login
Logout

14. Go back to Paint Shop Pro and click on your image to bring up a text box.

15. Paste the words into the text box and click OK.

16. Go to Selection > Select None.

17. Select the Selection Tool.

18. Make a box around "Create".

19. Move "Create" on to the first purple box.

20. Repeat steps 17 - 19 for each of the other words, make sure to keep them in order!

21. Go to View > Palettes > Layers.

22. Right click on the "Nav Area" layer and choose "Delete".

Note: If you want to add pictures beside your links and on top of the background image, now is the time to do it.

23. Go to File > Save As and save your sidebar as a gif, jpg, or png (you can choose the file extension from the drop-down list below where you type the filename).

24. Go to File > New. Change the units to pixels. Change the width to 128 pixels and the height to 421 pixels. Change the background color to Transparent.

25. Go to File > Save As and save the blank image as a gif (you can choose the file extension from the drop-down list below where you type the filename).

26. Upload both images to the internet (the sidebar and the transparent image). Try http://www.imagecave.com/ or http://www.2and2.net/ for an image host.

27. Sidebar and topbar (regular sidebar):
<style> i.top, i.side { background-image: url(http://www.neopets.com/SIDEBAR.gif); } i.top { position: absolute; left: 0px; top: 00px; height: 042px; width: 728px; } i.side { position: absolute; left: 0px; top: 00px; height: 763px; width: 130px; } #navbar { position: absolute; left: 0px; top: 63px; height: 421px; width: 130px; z-index: 1; } table, td, #n, #tbg { background: transparent; } a div, #mb, #m, #ol { visibility: hidden; } .tt, #n { position: relative; z-index: 1; } #ban { display: none; background: transparent; } </style> <i class="top"></i> <i class="side"></i> <img src="http://www.neopets.com/BLANKURL.gif" border="0" id="navbar" usemap="#a">

Sidebar only:
<style> i.side { background-image: url(http://www.neopets.com/SIDEBAR.gif); position: absolute; left: 0px; top: 00px; height: 763px; width: 130px; } #navbar { position: absolute; left: 0px; top: 63px; height: 421px; width: 130px; z-index: 1; } table, td, #n, #tbg { background: transparent; } a div, #mb, #m, #ol { visibility: hidden; } .tt, #n { position: relative; z-index: 1; } #ban { display: none; background: transparent; } </style> <i class="side"></i> <img src="http://www.neopets.com/BLANKURL.gif" border="0" id="navbar" usemap="#a">

28. Replace http://www.neopets.com/SIDEBAR.gif with the address of the sidebar. Replace http://www.neopets.com/BLANKURL.gif with the address of the green image.

Sidebar Tutorial (Photoshop)

1. Open Photoshop.

2. Right click on the sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_template_2.gif) and choose Copy. If you want to make a sidebar without a top bar, use this sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_side_template_2.gif).

3. Switch back to Photoshop and go to File > Open and open the image.

4. Go to Image > Mode > RGB Color.

5. Decorate the blue area with the Flood Fill Tool, Brush Tool, Filter Menu, etc. This will be the background of your sidebar.

6. Right click on the sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_template_1.gif) and choose Copy. If you are making a sidebar without a top bar, use this sidebar template (http://usera.imagecave.com/sunshinejenny/templates/sidebar_side_template_1.gif).

7. Switch back to Photoshop and go to Layers > New > Layer. Change the name to "Nav Area". Click OK.

8. Go to Edit > Paste.

9. Go to to Layers > New > Layer.

10. Select the Text Tool.

11. Select a font. Change the size to 16 - 20 (or whatever size will fit one line into one of the purple or green boxes).

12. Copy the words below: (Note: You may have to make each word on a separate layer so that you can move them!)
Create
Central
Explore
Games
Neomail
Shops
Boards
News
Stuff
Help
Login
Logout

14. Go back to Photoshop and click on your image to bring up a flashing line.

15. Paste the words where the flashing line.

16. Click outside of the image so that the text is deselected.

17. Select the Selection Tool.

18. Make a box around "Create".

19. Move "Create" on to the first purple box.

20. Repeat steps 17 - 19 for each of the other words, make sure to keep them in order!

21. Go to Window > Layers.

22. Right click on the "Nav Area" layer and choose "Delete". Click OK.

Note: If you want to add pictures beside your links and on top of the background image, now is the time to do it.

23. Go to File > Save As and save your sidebar as a gif, jpg, or png (you can choose the file extension from the drop-down list below where you type the filename).

24. Go to File > New > Blank File. Change the height and width to pixels. Change the width to 128 pixels and the height to 421 pixels. Change the Background Contents to Transparent.

25. Go to File > Save As and save the blank image as a gif (you can choose the file extension from the drop-down list below where you type the filename).

26. Upload both images to the internet (the sidebar and the transparent image). Try http://www.imagecave.com/ or http://www.2and2.net/ for an image host..

27. Sidebar and topbar (regular sidebar):
<style> i.top, i.side { background-image: url(http://www.neopets.com/SIDEBAR.gif); } i.top { position: absolute; left: 0px; top: 00px; height: 042px; width: 728px; } i.side { position: absolute; left: 0px; top: 00px; height: 763px; width: 130px; } #navbar { position: absolute; left: 0px; top: 63px; height: 421px; width: 130px; z-index: 1; } table, td, #n, #tbg { background: transparent; } a div, #mb, #m, #ol { visibility: hidden; } .tt, #n { position: relative; z-index: 1; } #ban { display: none; background: transparent; } </style> <i class="top"></i> <i class="side"></i> <img src="http://www.neopets.com/BLANKURL.gif" border="0" id="navbar" usemap="#a">

Sidebar only:
<style> i.side { background-image: url(http://www.neopets.com/SIDEBAR.gif); position: absolute; left: 0px; top: 00px; height: 763px; width: 130px; } #navbar { position: absolute; left: 0px; top: 63px; height: 421px; width: 130px; z-index: 1; } table, td, #n, #tbg { background: transparent; } a div, #mb, #m, #ol { visibility: hidden; } .tt, #n { position: relative; z-index: 1; } #ban { display: none; background: transparent; } </style> <i class="side"></i> <img src="http://www.neopets.com/BLANKURL.gif" border="0" id="navbar" usemap="#a">

28. Replace http://www.neopets.com/SIDEBAR.gif with the address of the sidebar. Replace http://www.neopets.com/BLANKURL.gif with the address of the green image.

Common Problems

Green/white box covering sidebar or links are hidden
Change the BLANKURL to:
http://img.photobucket.com/albums/v37/sunshinejenny/transparent_green.gif

Sidebar repeats/resized/too small
1. If you uploaded the image to Photobucket, upload it somewhere else instead (http://www.imagecave.com). Photobucket resizes large images.
2. You might have the height and/or width wrong in the code. To find the correct height, right click on the image and choose Properties. Beside Dimensions is the width x height.
3. The last URL (BLANKURL, navbar URL) may be incorrect. The last URL in the code should be the link to the transparent or green image - not the sidebar image. Try changing the BLANKURL to http://img.photobucket.com/albums/v37/sunshinejenny/transparent_green.gif
4. If the sidebar repeats at the top left corner, make sure that the top number for i.side is 0px.
5. If the sidebar repeats at the bottom of the left side, make i.side's height smaller. If the sidebar is cut off and the bottom of the side, make i.side's height bigger.

Sidebar doesn't show up
1. Make sure you are using the correct address. An image's address looks like this:

http://www.neopets.com/image.gif

[img]http://www.neopets.com/image.gif[/img]
<img s r c="http://www.neopets.com/image.gif">

<style>
a:link { color: red; }
<style>
SIDEBAR CODE
</style>

url(YOURURLHERE)

url (YOURURLHERE)

Sidebar squished into left links area
You have the SIDEBARURL and the BLANKURL mixed up. Switch the addresses.

Sidebar in the wrong place
You're using an old sidebar code. The top number for i.top should be 0px. The top number for i.side should be 0px (or 42px if your sidebar uses two images, one top and one side). The top number for #navbar should be 63px.

Links lead to the wrong page
1. You have to use the sidebar template and put the text in the right box for them to work correctly.
2. If you're sure that the words are in the right boxes, try changing the top number for #navbar to 42px or 63px.

This operation could not be completed because the current layer does not contain any active data within the current selection area
Go to View > Palettes > Layers. When you hover over a layer's name, you'll see what's on the layer. Hover over each layer until you find the one with your text on it, then click on that layer. You should be able to move the text.

Adding a sidebar makes other things disappear
1. If blogs or table backgrounds disappear, find the part of the code that says "table, td, #n { background: transparent; }" and remove "table, td,".
2. If hyperlinks disappear, change both places that it says "linksbar" to "navbar".

Sidebar shows up, but links don't work
1. Change both places that say "linksbar" to "navbar".
2. Make sure you did not delete the navbar part of the code (the last line).