CSSHelp: How to Replace a Sidebar on Neopets
Neopets is an online virtual pet game that allows members to feed, clothe and house their pets, as well as to play and explore with them. The site is also extremely customizable. Each member receives a website for each of his pets and may customize his user look-up, shops and guilds using CSS. The sidebar on Neopets is one of many customizable items. You change the sidebar through account settings or with CSS on a guild layout, user look-up or shop. Changing a Neopets sidebar with CSS takes a few simple steps.
Other People Are Reading
Instructions
-
-
1
Open an image-editing program like Microsoft Paint or Adobe Photoshop.
-
2
Find a Neopets sidebar template (see Resources 1) and copy it. Paste the sidebar template to your image-editing program.
-
-
3
Paint the background area of the sidebar (the blue area on the template). You may choose any color that you wish. Save the image as a .jpg or .png file.
-
4
Paint the rectangles in the image whatever color you would like. These will be the link buttons for the Neopets links.
-
5
Select the text tool, choose a font and in the white area of the image, type out the following words: Create, Central, Explore, Games, Neomail, Shops, Boards, News, Stuff, Help, Login and Logout.
-
6
Use the selection tool to select each word one by one and drag it to each box, keeping them in order from top to bottom.
-
7
Add images to the sidebar, if desired, from Neopets' side. Copy and paste them onto the image, re-size if needed and place them where you would like them on the sidebar.
-
8
Save the image as a .gif, .jpg or .png file. Upload the image to an image-hosting site. Save the image (in Resources 3) to your computer and upload it to an image-hosting site as well.
-
9
Add the following code to your User Lookup, Guild Layout or Pet Lookup:
<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"> -
10
Replace the "http://www.neopets.com/SIDEBAR.gif" with the direct link of your new sidebar. Replace "http://www.neopets.com/BLANKURL.gif" with the direct link to the green image found in Resources 3.
-
11
Save your work and preview.
-
1
