Title

 

Step 1

The first thing you need to do is upload the images you wish to use for your background(s). Do this by returning to your home and clicking on this button upload image located directly below your home avatar. When you have uploaded your images Pan will generate a snippet of code, and it will look something like this:

<img src="http://www.panhistoria.com/Stacks/Novels/Character_Homes/homedirs/23images/img_5.gif" border="0" alt="">

You require the highlighted section. Cut and paste it into a handy spot or write it down if you prefer the old fashioned way - you will need it for step 2.

 

Step 2

Did you make a note of the location of those files you uploaded? Good, you're ready to fill out the form that will generate your decoration code. Read the instructions carefully and fill in the fields as required. If you have difficulty click on the help button for extra advice.

 

Backgrounds

Pan homes are made out of tables. This has the effect or allowing you to use two different background images or colors if you like. These are some combinations:

Home

This home has no background images or colors.

Home

This home has just a body background.

Home

This home has just a table background.

Home

This home has both body and table backgrounds.

Profile pages are a little different ... here are the same four combinations used on a profile page.

Profile

This profile has no background images or colors.

Profile

This profile has just a body background.

Profile

This profile has just a table background.

Profile

This profile has both body and table backgrounds.

Things to note:

  • Background images appear over the top of background colors.
  • Backgrounds can be fixed - that means that when you scroll down the screen the background remains in the same place. Check the box to fix your background in place.
  • Colors should be either color names or hexidecimal values - for example: black or #000000. Click on the question mark next to the color options for a color chart.
Body background image : help
Fixed body Background: help
Body background color: help
Table background image: help
Table background color: help

 


Text

You have a wide variety of options available to you for adjusting the appearance of your text. The image below demonstrates which areas of text this section of the form deals with.

Text

Things to note:

  • Fonts are tricky! If you are using a non-standard font not everyone will be able to see it. You might like to specify an alternative, and you can do that by separating a list of fonts by comma - eg Lithos Pro, Arial, san-serif. Click the help button next to the font family text box for some common font-family combinations.
  • Choose a size which is appropriate for all the fonts you have listed. Sizes are in points, so open up your favourite word processing program to judge relative sizes.
Font family: help
Color: help
Style: Italic
Weight: Bold
Size: pt

Headings

Heading tags affect particular parts of text on Pan homes. There are six heading tags, but only the H3, H4 and H6 tags are a significant part of your home's template.

Heading

Things to note:

  • Fonts are tricky! If you are using a non-standard font not everyone will be able to see it. You might like to specify an alternative, and you can do that by separating a list of fonts by comma - eg Lithos Pro, Arial, san-serif. Click the help button next to the font family text box for some common font-family combinations.
  • Choose a size which is appropriate for all the fonts you have listed. Sizes are in points, so open up your favourite word processing program to judge relative sizes.
  • There is some coding in place in the template which will continue to affect the way your heading tags work.

H3

Font : help
Color: help
Style: Italic
Weight: Bold

H4

Font : help
Color: help
Style: Italic
Weight: Bold

H6

Font : help
Color: help
Style: Italic
Weight: Bold

 

Links

Links have a series of "states" they go through. A:link shows that there is link on the page. A:visited shows that the link has already been clicked or visited. A:hover occurs when the mouse is hovering over a link, before it is clicked. A:active happens when a link is clicked, or if you have a framed page when the link is displayed inside one of the frames. Each of these states will have their own line in your style sheet.

A:LINK

Font : help
Size: pt
Color: help
Style: Italic
Weight: Bold
Decoration:
Links are underlined by default - to turn off underlining you must choose none.
None
Underline
Overline
Line-through

A:VISITED

Font : help
Size: pt
Color: help
Style: Italic
Weight: Bold
Decoration:
Links are underlined by default - to turn off underlining you must choose none.

None
Underline
Overline
Line-through

A:ACTIVE

Font : help
Size: pt
Color: help
Style: Italic
Weight: Bold
Decoration:
Links are underlined by default - to turn off underlining you must choose none.
None
Underline
Overline
Line-through

A:HOVER

Font : help
Size: pt
Color: help
Style: Italic
Weight: Bold
Decoration:
Links are underlined by default - to turn off underlining you must choose none.
None
Underline
Overline
Line-through

Scrollbars

Scrollbar colors can be adjusted, but will only be visible in Internet Explorer. Here is a handy guide to which part of the scrollbar each section refers to.

Scrollbars

Scrollbar-arrow-color: help
Scrollbar-face-color: help
Scrollbar-track-color: help
Scrollbar-3dlight-color: help
Scrollbar-highlight-color: help
Scrollbar-shadow-color: help
Scrollbar-darkshadow-color: help