Karotene got their homepage at Neopets.com

Welcome guest to Wizzney's Help Page. I will attempt to answer some of the HTML questions that I receive neomails about most frequently.

*NOTE: TNT has made a lot of coding changes to the site in April. I will be updating this page as time permits. There will be a *NEW* symbol beside all working updates.

Please click here to neomail me if you have any additional questions

Navigation
Adding A Background to Shop/Gallery

Tables

Editing your shop/gallery

Adding Images and linking to other Neopet pages

Text Boxes

Other Useful Codes

Recommended Pet Pages

Link Back To Me

Below are a few tips to keep in mind when creating your shop/gallery:

Keep it neat. A lot of extra pictures can take away from the overall look. Also, moving graphics tend to slow down the shop/gallery loading. Keep graphics limited to those that really relate to your theme.
Music adds a nice touch to the theme. However, it can also slow your shop/gallery loading. Therefore, I would not recommend music in a shop where you want to make sales as people cannot shop as quickly. Also, many people like to listen to their own music while playing neopets.
Always keep your prices visible. Use a good contrast colour to your background. The code for changing the colour is located below.

In order to change your graphics:

Edit your user lookup - click here
Edit your gallery - click here
Edit your shop - click here
Edit your Neopet's description - click here

*Adding A Background to your shop or gallery*

*NEW* Add a background to your shop. The image will be tiled (repeated) over the entire page. Replace the graphic with your own
<style> .content{background-image: url('http://pets.neopets.com/cp/xnsb2m89/1/2.png'); background-repeat: repeat; } </style>

*NEW* Keep your background in one spot in order to keep it from scrolling (moving) with your items. You will use EITHER this code or the code immediately above
<style> .content{background-image: url('http://pets.neopets.com/cp/xnsb2m89/1/2.png'); background-attachment: fixed; background-repeat: repeat;} </style>

*NEW* Add a non repeated image to the right side of your screen
<style> BODY {background: #ead5ff url(http://images.neopets.com/new_shopkeepers/t_1267.gif) ; background-attachment: fixed; background-position:right; background-repeat: no-repeat;} #main {background:none; border:1px;} #content {width:800px;}.contentModuleHeader {background:#9731fd;} .contentModuleHeaderAlt {background:#9731fd;}.content </i><br clear=all></style>

*Tables*

*NEW* Basic table for your shop or gallery. You can select your own colours for the border, background and font

The table will look like the table in my gallery here

*NEW*Add a transparent table around your items. The number of the opacity of the table pictured below is 70. Decreasing this number will make the background more opaque (ie you will be able to see more of your background through the table)
<center> <div style="width:600; height:height; overflow: auto ;border-color: #add5f5; border-style: solid;border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; background-color: #ebd5d6; filter: alpha(opacity=70);"></i></i></a><p><p> <br><br><center><Table border=0 Cellpadding=0 Cellspacing=0>

*Additional Tables*

This table is useful at the beginning of your shop/gallery if you do not have a blog

The width is currently 500...You can increase or decrease this number
Change the border colour and background colour to match your theme

YOUR TEXT GOES HERE

YOUR TEXT OR IMAGE HERE

YOUR TEXT OR IMAGE HERE YOUR TEXT OR IMAGE HERE

YOUR TEXT OR IMAGE HERE YOUR TEXT OR IMAGE HERE

<center> <table width=500 border=4 bgcolor=#ffffff bordercolor=#a0f943> <TR> <TD colspan=2><center> YOUR TEXT OR IMAGE HERE </TD> </TR> <TR> <TD> YOUR TEXT OR IMAGE HERE </TD> <TD> YOUR TEXT OR IMAGE HERE </TD> </TR> <TR> <TD> YOUR TEXT OR IMAGE HERE </TD> <TD> YOUR TEXT OR IMAGE HERE </TD> </TR> </table>

*Editing your Shop/Gallery*

Please refer to the link at the bottom of the page for a colour guide. For all colours you may select either a colour number from the hexadecimal colour chart or a colour name. You must use the # sign immediately before the hexadecimal number.

*NEW* Remove the horizontal line that appears above the items in your shop or gallery
<style> hr {display: none;} </style>

Change the colours of your scroll bar on the right hand side of the screen. This one requires that you use colour numbers. The colour numbers that are currently plugged in will make your scroll bar appear like the one on this page. This one gives you the opportunity to use a wider range of colours.
<body style="scrollbar-face-color:#ff99ff; scrollbar-arrow-color:#a0f943; scrollbar-track-color:#ccecff; scrollbar-shadow-color:#a0f943; scrollbar-highlight-color:#f1f1f1; scrollbar-3dlight-color:#996600; scrollbar-darkshadow-color:#996600;">

Change the colours of your scroll bar on the right hand side of the screen. This one requires that you use actual colour names.
<body style="scrollbar-face-color: white; scrollbar-arrow-color: black; scrollbar-track-color: pink; scrollbar-shadow-color: green; scrollbar-highlight-color: yellow; scrollbar-3dlight-color: red; scrollbar-darkshadow-color: navy;">

Remove the white from behind the items in your shop. You will be able to see your background colour instead. It will look like the picture below.
<style>A,TD,P,BODY{COLOR:#427A49;FONT-FAMILY:verdana;FONT-SIZE:13px;TEXT-DECORATION:none}</style><style>p img{filter:chroma(color=white)}</style>

Change the colour of the price and name of items in your shop/gallery
<style type=text/css>td,p,body{color:#727b7c;font:9pt verdana}</style>

*NEW* Remove the lines of the box that is around the items in your shop/gallery
<style> img { border-width: 0px; } </style>

*Changing your Lookup*

*NEW* Add an image to the right side of your lookup AND change the background colour (replace the URL that I have with one of your own. Choose a background colour to match your image).
<style> BODY {background: #ead5ff url(http://images.neopets.com/new_shopkeepers/t_1267.gif) ; background-attachment: fixed; background-position:right; background-repeat: no-repeat;} #main {background:none; border:1px;} #content {width:800px;}.contentModuleHeader {background:#9731fd;} .contentModuleHeaderAlt {background:#9731fd;}.content </i><br clear=all></style><p>

*NEW* Add a tiled background to your lookup

Change #ce92ef to the main colour you want for a background
Change http://pets.neopets.com/cp/xnsb2m89/1/2.png to your own image
Change 780px to a width for the content modules that you like

*NEW* Add a repeated image down the right hand side
<style> BODY {background: #ead5ff url(http://images.neopets.com/new_shopkeepers/t_1267.gif) ; background-attachment: fixed; background-position: top right; background-repeat: repeat-y;} #main {background:none; border:1px;} #content {width:800px;}.contentModuleHeader {background:#9731fd;} .contentModuleHeaderAlt {background:#9731fd;}.content </i><br clear=all></style><p>

*NEW* Remove the Neopets header and footer
<style> #header, #footer {display:none;} </style>

*NEW* Change the colour of the heading of the content modules
<style> .contentModuleHeader {background:#ff99ff;} .contentModuleHeaderAlt {background:#ff99ff;} </style>

*NEW* Change the background colour of the content modules
<style> .contentModuleContent, .contentModule, {background-color: #ff99ff;}</style>

*NEW* Remove the border around the content modules
<style> .contentModule {border:0px} .contentModuleTable {border:0px} </style>

*NEW* A few options for changing the border's colour and width around the content modules
narrow border <style> .contentModule {border:1px solid #ff99ff} .contentModuleTable {border:1px solid #a0f943} </style>
wide border <style> .contentModule {border:3px solid #ff99ff} .contentModuleTable {border:3px solid #a0f943} </style>
wide/dashed border <style> .contentModule {border:4px solid #ff99ff} .contentModuleTable {border:4px dashed #a0f943} </style>

*NEW* If you do not know how to make your own navigation toolbar, use this instead
<table border=3 cellpadding=4 cellspacing=0 width=380> <tr><td align=center valign=top width=400> <font size=2><u>Navigation:</u></font><p> <a href=http://www.neopets.com/reg/page5.phtml>Create</a>| <a href=http://neopets.com/petcentral.phtml>Pet Central</a>| <a href=http://neopets.com/explore.phtml>Explore</a>| <a href=http://neopets.com/gameroom.phtml>Games</a>| <a href=http://neopets.com/neomessages.phtml>Neomail</a>| <a href=http://neopets.com/objects.phtml>Shops</a>| <a href=http://neopets.com/neoboards/index.phtml>Boards</a>| <a href=http://neopets.com/nf.phtml>News</a>| <a href=http://neopets.com/stuff.phtml>Stuff</a>|<a href=http://neopets.com/help.phtml>Help</a>| <a href=http://neopets.com/loginpage.phtml>Login</a>| <a href=http://neopets.com/logoutpage.phtml>Logout</a>| </td></tr></table>

*NEW Add a simple table at the top of the page to add some comments
<b class="tabledesc"> <p> Add some stuff here <p> It will look like this <p> </a> </b><p> <style>b.tabledesc{width:780;background:#e5cdf4;border:3px dashed b861eb;}</style>
Add some comments here
It will look like this

*Colour Chart*
Hexadecimal #	Preview	Hexadecimal #	Preview	Hexadecimal #	Preview	Hexadecimal #	Preview
#cccc99		#999966		#999933		#666600
#ffffcc		#ffff99		#ffff66		#ffff00
#ffcc99		#ff9933		#ff9966		#cc6633
#ff9999		#ff6666		#ff3333		#cc0033
#ffccff		#ff99ff		#ff66ff		#ff00ff
#ccffff		#99ffff		#66ffff		#33ffff
#99ccff		#6699cc		#3366cc		#0033cc
#ccccff		#9999ff		#9966ff		#6633ff
#99ffcc		#33ff99		#00cc66		#006633
#e1dfdf		#c0c0c0		#808080		#000000

*Marquee*

Add a marquee...It will look like this

<marquee>Your Text Here</marquee>

Add a marquee with a background...It will look like this

<marquee bgcolor=#ff99ff>Your Text Here</marquee>

Add a bouncing marquee...It will look like this
<marquee behavior="alternate">Your Text Here</marquee>

Change the appearence of the font in your Marquee...It will look like this <marquee behavior="alternate"><font color=#ff99ff size=4><b><b>Change the appearence of the font in your Marquee...It will look like this</b></b></font></marquee>

*Changing Font/Text*

Change the colour of your font
<body text=pink>

Changing Font Format

Bold
<b>Your Text Here</b> Underline
<u>Your Text Here</u> Italics
<i>Your Text Here</i>

Strikeout
Your Text Here Small
<small>Your Text Here</small> ^{Superscripted}
<sup>Your Text Here</sup>

Changing Font Size

Size 1
<font size=1>Your Text Here</font> Size 2
<font size=2>Your Text Here</font> Size 3
<font size=3>Your Text Here</font>

Size 4
<font size=4>Your Text Here</font> Size 5
<font size=5>Your Text Here</font> Size 6
<font size=6>Your Text Here</font>

*Adding images and linking to other Neopets pages*

Add any Neopets Image

Right click on the image that you want to use. Note: the only place that this cannot be done is in other players shops
Select "properties"
You will get the URL for the image
The code in the text box will give you this image. Change the URL to one of your choice.
<img src=http://images.neopets.com/neoboards/avatars/jhudorascloud.gif>

*NEW* Add a description to your link when someone hovers over it.
It will look like this.

Replace the link to my page with a link to your own page. Replace my img src with your own image.
<a href=http://petpages.neopets.com/~Karotene> <img src=http://img.photobucket.com/albums/v515/Princess_Neo_Images/Why_Wizzney_Kau_button.gif alt="TYPE WHAT YOU WANT TO SAY HERE" border=0></a>

Add a cursor along with a coloured scroll bar

<body style="scrollbar-face-color:#add5f5; scrollbar-highlight-color:#cbe7f6; scrollbar-3dlight-color:white; scrollbar-darkshadow-color:#003366; scrollbar-shadow-color:white; scrollbar-arrow-color:#727b7c; scrollbar-track-color:#ebd5d6;cursor:url(YOUR URL GOES HERE);">

Use text to link to another Neopets page.

For example, click HERE to visit my gallery

<a href=http://www.neopets.com>Click Here</a>

*Text Boxes*

Adding Text Boxes (Due to Neopets coding, you will be unable to copy and paste these). Also, text boxes work in shops, galleries and pet pages. They will not work in lookups.

This is a text box

Changing the look of your text box.

The code on the left will give you this text box

*Other Useful Codes*

Add a line (will look like the pink dividing line on this page). Change the colour to whatever you want. You can use either a colour # or name.
<hr color=#ff99ff width=350 size=2>

Add bullet points
<ul> <li>First Line <li>Second Line <li>Third Line </ul>

First Line
Second Line
Third Line

Anchor Tags. This is the code that I used to make the navigation chart at the top of the page. It will allow people to jump to a specific place on your pet page.

1.)This is the code that I used in the navigation chart
<a href="#00">Adding A Background Lookup</a><br><p> <a href="#01">Tables</a><br><p> <a href="#02">Changing Colours</a><br><p>

2.)This is then used at the beginning of the section of the page that you want to jump to
<a name="00"></a> <a name="01"></a> <a name="02"></a>

Change the words that I have in the navigation chart to your own

Useful codes for organizing your page. These codes can be used to organize graphics or text.

To start a new line of text
<br> To start a new paragraph
<p> To centre your text
<center>Your Text Or Graphics Here</center>

Did you notice how you were personally welcomed at the top of the page guest? Simply copy the word in the box below onto your petpage for the same effect.

*Links to recommended Pet Pages*
(All links will take you to a Neopets pet page)
Please neomail me if you have a graphics pet page that you would like me to add.
*Lookups*

*Backgrounds*

*Blogs*

*Banners*

*Colour Chart*

*Didn't find your answer here? Try one of these HTML/CSS help pages*

*Please copy a code to link back to me*
<a href=http://petpages.neopets.com/~Karotene> <img src=http://img.photobucket.com/albums/v515/Princess_Neo_Images/Why_Wizzney_Karotene_button.gif alt="Wizzney's HTML help" border=0></a>
<a href=http://petpages.neopets.com/~Karotene> <img src=http://img.photobucket.com/albums/v515/Princess_Neo_Images/Why_Wizzney_Kau_button.gif alt="Wizzney's HTML help" border=0></a>
<a href=http://petpages.neopets.com/~Karotene> <img src=http://img.photobucket.com/albums/v515/Princess_Neo_Images/WhyWizzneyAnim1.gif alt="Wizzney's HTML help" border=0></a>
<a href=http://petpages.neopets.com/~Karotene> <img src=http://img.photobucket.com/albums/v515/Princess_Neo_Images/Why_Wizzney_Faerie.png alt="Wizzney's HTML help" border=0></a>
<a href=http://petpages.neopets.com/~Karotene> <img src=http://img.photobucket.com/albums/v515/Princess_Neo_Images/Why_Wizzney_Chia.png alt="Wizzney's HTML help" border=0></a>
<a href=http://petpages.neopets.com/~Karotene> <img src=http://img.photobucket.com/albums/v515/Princess_Neo_Images/WhyWizzneyAnim2.gif alt="Wizzney's HTML help" border=0></a>

*Useful dailies pages*

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® 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