Site hosted by Angelfire.com: Build your free website today!

Everyone wants to know how to decorate their shop to make it look fun and inviting to customers but to redesign them, you have to know a little something about HTML. On this help page we are not going to get into deep details about teaching you HTML as that would take forever and be too confusing especially for beginners, but we will give you the basics that you need to know for sprucing up your shops and pet pages.

First off, what is HTML? HTML (hypertext markup language) is the code that nearly all web pages are written in and what you will need to use when designing your shop or pets pages. Whether you are adding a background or image to your page or changing the color of your font, you have to tell it a command otherwise, if you just type in your text without any type of HTML commands, everything will just all run together and not look very nice.

All HTML commands are typed within triangular brackets < >. These are called tags and all commands have an opening and closing tag. For example, to make a word bold you would type in your command like this: HELLO which result in your word looking like this... HELLO.

Ok now that we have explained that, lets move on to the "How do I do/add/change?" questions and answers.

(NOTE: HTML cannot be used in your user lookups. If you wish to bypass the HTML Help and need CSS help for your user lookups, there is a link on the bottom of this page or you can click HERE to go to the CSS Help page.)

HOW DO I PUT A BACKGROUNDS AND OTHER IMAGES IN MY SHOP?

BACKGROUNDS: To add a background image to your page, you need to add this tag at the beginning of your shop description:

<body background="BACKGROUND URL GOES HERE">

You can also have a fixed background so that when you scroll down your page, your images and text will move but the background won't move. The tag for that is:

<body background="BACKGROUND URL GOES HERE" bgproperties="fixed">

Note: If you are using an background that you found somewhere on the internet, just use the URL address of the background in the above code but, make sure you can hot link from that site first!

If you just want just a background color, you would add this tag:

<body bgcolor="(whatever color you want)">

For the most commonly used colors you can use their name,i.e., red, pink, black, green, blue, yellow, white. For more complex colors, you would use Hexadecimal codes. If you need help with colors, click HERE and HERE to see a color charts.

IMAGES: Same as adding a background to your shop except you would insert your image URL address in the following code:

<img src="IMAGE URL GOES HERE">

Take that code and place it where ever you want your image to be in your shop.

Again, if you are using an image that you found somewhere on the internet, just use the URL of the image in the above code but, make sure you can hot link from that site first!

NOTE: If you have made your own graphic that you want to use, before you can display it, you first need to upload your image to an image hosting website that allows off-sight image hosting. Many make the mistake of uploading images/pics directly from their C: drive and while they can see it, everybody else only see's a broken image because that pic is only on the computer of the person using it. So remember, anytime you want to display an image/pic anywhere in the internet, you must have it hosted somewhere on the internet first.

There are lots of free Web Hosting sites out there but make sure they allow off-site image hosting as well. If you need an image hosting web site, check out the following:

Asian Avenue, Village Photos, Image Magician, Scubacity, Matmice

Once you get your image uploaded, then you can display your image anywhere on the internet. :)

HOW DO I CHANGE MY FONT SIZE AND COLOR?

If you want to make a word green you would type: Your text goes here and this would appear as Your text goes here.

To change the font size you would type: Your text goes here and your font will now be Your text goes here.

To change the font color and size, you can do this in the same tag like so: type text here and now your text will be large and green like this Your text goes here.

Font sizes start at 1 and go up from there. The larger the number, the larger the text.

For the most commonly used colors you can use their name,i.e., red, pink, black, green, blue, yellow, white. For more complex colors, you would use Hexadecimal codes. If you need help with colors, click HERE and HERE to see a color charts.

HOW DO I CHANGE THE COLOR OF MY ITEM NAMES AND PRICES?

Add the the following tag at the end of your shop description text and change the color to whatever you want it to be.

<body text=red>

HOW DO I MAKE MY TEXT SCROLL?

Scrolling text is actually called Marquee and to make a scrolling marquee insert this tag:

<marquee>Insert your text here</marquee>

Insert your text here

You can also make you marquee move side to side by using this tag:

<marquee behavior="alternate">Insert your text here</marquee>

Insert your text here

Note: The marquee tag does NOT work with Netscape browers.

SOME OTHER MISC. TEXT TAGS:

BOLD = BOLD

UNDERLINE = UNDERLINE

ITALICIZED = ITALICIZED

 = Acts like your Enter key and spaces down a line.

 = Creates a new paragraph.

<hr> = Makes a horizonal line.

<center>Your Text</center> = Centers your text on the page.

HOW DO I MAKE IT SO THAT THE WORDS IN MY SHOP ARE NOT SLANTED?

The text in shops is defaulted to italicized. If you wish to make it non-italized you will need to add the the following tag at the beginning of your shop description text.

HOW DO I PUT MUSIC IN MY SHOP?

Adding music, also called midi's, to your shop can add another fun element and there are several ways you can add music. It can play in the background, play only once, play continuously, or you can let the person viewing the webpage decide if they even want to listen to it. Also, different browsers need different tags in order to recognize the music. Netscape supports embed tags while IE supports bgsound tags. Including both makes sure it works for both browsers. All examples below include both tag types.

Adding music with a player: If you want to give the viewer the ability to stop and start the music whenever they want, you can create a little music player on your page.
<embed src="INSERT MIDI URL HERE" width=200 height=40>
<noembed>
<bgsound src="INSERT MIDI URL HERE">
</noembed>

This will create a player that looks something like this :

Adding music without a player: If you do not want to show a player on your page, the following code will start your music automatically and play it constantly and the viewer has no way to turn it off. You many not wish to use this in your shop as it does tend to annoy some people.

If you want to hide the player from your viewers, use the following tag:
<embed src="INSERT MIDI URL HERE" hidden=true autostart=true>
<noembed>
<bgsound src="INSERT MIDI URL HERE" loop=infinite>
</noembed>

HOW DO I ADD COLOURED SCROLL BARS IN MY SHOP?

Copy and paste the following code into your shop description and change the colours to your preference.

NOTE:Scrollbar colors are only visable with IE5.5 or above. They will not show in any other browser.

<body style="scrollbar-face-color:blue; scrollbar-highlight-color:yellow; scrollbar-3dlight-color:lightgreen; scrollbar-darkshadow-color:purple; scrollbar-shadow-color:white; scrollbar-arrow-color:cyan; scrollbar-track-color:lightskyblue">

MORE FUN THINGS YOU CAN DO

Using the following codes, you can insert glowing text and other filters to your text. Since there are so many variables that can be used, these can be experimented with until you're happy with them. Try changing the font family, size, colors and numbered variables. The codes are shown as examples below.

Glowing Text:
Glowing Text
Glowing Text

Motion Blur:
Motion Blur
Motion Blur

Warped Text:
Warped Text
Warped Text

Flipped Text:
Flipped Text
Flipped Text

Dropshadow:
Dropshadow
Dropshadow

Shadow:
Shadow
Shadow

Alpha:
Alpha
Alpha

Here are some more fun things you can do too...

Gradiant Bars:

Pretty cool huh?

Pretty cool huh?

<div style="width: 100%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=blue,EndColorStr=magenta)">Pretty cool huh?</div>

GradientType=1 or 0
0 for a vertical fade.
1 for a horizontal fade.

StartColorStr=blue
This is the first color in the fade. The color used was a blue. Change as you wish.

End Color Str=magenta
This is the last color in the fade. The color used was a magenta. Change as you wish.
Font Color=cyan
This is the color of the text in the bar. the color used was Cyan. Change as you wish.

Now that you have added the background, images and whatever else you want to your shop description, don�t just assume that all is fine and dandy� GO LOOK AT YOUR SHOP! Make sure there are no broken images and everything is aligned how you want it and there are not open command tags showing. If not, just go back and edit it.

Also, it is good practice to check you shop front periodically to make sure everything is still working properly.

Ok, now that you know how to edit your shop description, here are some things you need to keep in mind when do so. Having large amounts of images such as tons of dolls, puffs, using flashing or huge backgrounds, counters, and music, etc., can severely slow some computers down, crash browsers and it can be especially brutal for people with 56K modems. In some cases it can completely throw someone off their computer resulting in them having to reboot and re-logon. That does not make for happy shoppers and will result in people avoiding your shop like the plague. More importantly it consumes tons of NeoPets bandwidth and that results in the site running slower. Something that irritates all players! If you have lots of graphics that you want to display in your shop, rotate them periodically. Give your shop a new look every week. :)

Hope this page has been informative and helpful. Happy Decorating! :)

For help with CSS codes for decorating your user lookups,
click HERE for the CSS Help page.

Please repect my hard work in putting this page together...