Workaround until the image galleries are restored

Among the first things you probably want to do after having created a persona at AW is ... decorating, attaching a face to the name.

Unfortunately, the AncientWorlds image galleries are inaccessible for a while. With a bit of HTML and CSS (the codes are included here for you to copy, adapt and paste) you have a workaround for adding images to texts and posts until the problem with the image galleries is solved. Unfortunately, I don't know of any practical workaround for adding an avatar. :(

There is, however, a CSS command that suppresses the default avatar and leaves you with a blank space instead:

<!-- HIDING DEFAULT AVATAR -->
<style type="text/css">
table.pageStyleSheet * div p IMG {
visibility: hidden !important;
}
</style>

Please note:
This code suppresses not only the avatar but also every other image you have added to the page that is wrapped in <p>-tags. They will show up again by using <div>-tags instead.

The default avatar will also still be displayed in your 'hood homes and posts and other people's lists of friends.

Where to store images when the galleries are not accessible?

There are several (free) image hosting services on the web. Personally, I use Photobucket. As soon as you have created an account there you have several options to choose from.

Photobucket is by default set to accept images with a maximum width of 800 pixels, which might be too small sometimes. Images larger than that will be resized automatically. As a recently introduced feature, beneath the upload window there's now a small dropdown menu where you can adjust the default option to your needs (another maximum pixel value or no pixel restriction, instead a maximum size of 1 MB per file). Photobucket also offers the oportunity to create folders. Once you've uploaded an image, four options are offered beneath a thumbnail of the image to choose from:

• "Display Share URL" (for sending via IM or Email)
• "Display Direct Link" (for layout pages)
• "Display Tag" (for linking to sites like MySpace or Ebay)
• "Display IMG" (for Bullentin Boards and Forums)

I usually choose "Direct Link", this line contains only the direct URL to the image without a link back to Photobucket and thus can be added to an image tag or CSS command without having to alter it (= remove the link). In case images are stored there, I usually state this on the site it is dispayed to give credit.

Adding an image (HTML):

The basic tag for this is

<IMG SRC="URL OF YOUR IMAGE">

Please note that all parts in white script (including all ") are part of the code, the parts shown in this colour represent the variables for you to adjust. Usually it doesn't matter if HMTL commands are written in capital letters or not, but in this case, however, it does.

Example:

<IMG SRC="http://i304.photobucket.com/albums/nn172/mesoscribe/example.gif">

You might want to add other specifications to this tag, perhaps the actual image-size doesn't suit your purposes, or maybe you want the same image displayed in several sizes. You can change both width and height by adding new values within the <> brackets to the basic tag used above:

height="ENTER PIXEL SIZE"
width="ENTER PIXEL SIZE"

Please note that these variables produce exactly what you define. If you reduce the width but stick to the original height, the image will show squeezed.

Example:
width="100"	width="100" height="200"

In case you want to attach a little text to the image that shows when hovering over it:

title="YOUR TEXT"

There is another command for this (alt="YOUR TEXT"), but I'd recommend not to use it as it works only in IE.

Example:

title="Palm Tree"

In case you want your image to float within the text column on the left or right side, you can attach a small CSS command to the image tag.

style="float:ENTER left OR right;"
Please note that the semicolon (;) after left or right is part of the code, don't delete it.

Example:
Pan commun integre anteriormente da, es web union nostre angloromanic, usate linguas qui lo. Subjecto essentialmente de per, un del publicava scientific questiones. Web il americas principalmente, pan giuseppe traduction ha, web illo contos da. Vista responder publicationes o sia, con al scientific anglo-romanic. National demonstrate introductori web le. Ma quales internet anglo-romanic duo, per gode giuseppe ha, de disuso effortio connectiones uno. Tu auxiliary interlingua demonstrate via, con finalmente initialmente in.	Pan commun integre anteriormente da, es web union nostre angloromanic, usate linguas qui lo. Subjecto essentialmente de per, un del publicava scientific questiones. Web il americas principalmente, pan giuseppe traduction ha, web illo contos da. Vista responder publicationes o sia, con al scientific anglo-romanic. National demonstrate introductori web le. Ma quales internet anglo-romanic duo, per gode giuseppe ha, de disuso effortio connectiones uno. Tu auxiliary interlingua demonstrate via, con finalmente initialmente in.
style="float:left;"	style="float:right;"

In case your image sits too close to the text, there are two commands to change this:

hspace="ENTER PIXEL SIZE"
vspace="ENTER PIXEL SIZE"

hspace (horizontal space) and vspace (vertical space) work for BOTH sides of the image, i.e. hspace creates an empty space at your defined size to the left AND the right of the image, vspace will do the same for the top AND bottom.

Example:
Pan commun integre anteriormente da, es web union nostre angloromanic, usate linguas qui lo. Subjecto essentialmente de per, un del publicava scientific questiones. Web il americas principalmente, pan giuseppe traduction ha, web illo contos da. Vista responder publicationes o sia, con al scientific anglo-romanic. National demonstrate introductori web le. Ma quales internet anglo-romanic duo, per gode giuseppe ha, de disuso effortio connectiones uno. Tu auxiliary interlingua demonstrate via, con finalmente initialmente in.	Pan commun integre anteriormente da, es web union nostre angloromanic, usate linguas qui lo. Subjecto essentialmente de per, un del publicava scientific questiones. Web il americas principalmente, pan giuseppe traduction ha, web illo contos da. Vista responder publicationes o sia, con al scientific anglo-romanic. National demonstrate introductori web le. Ma quales internet anglo-romanic duo, per gode giuseppe ha, de disuso effortio connectiones uno. Tu auxiliary interlingua demonstrate via, con finalmente initialmente in.
hspace="20"	vspace="20"

This command creates or removes a border around an image. IE attaches a border to any image that is hyperlinked.

border="ENTER BORDER WIDTH"

border="0" removes the default border in case you have a link attached to your image.

Example:
Image linked, no border specification	Image linked, border="0" added

The entire image tag can now look like this:

Example:

Pan commun integre anteriormente da, es web union nostre angloromanic, usate linguas qui lo. Subjecto essentialmente de per, un del publicava scientific questiones. Web il americas principalmente, pan giuseppe traduction ha, web illo contos da. Vista responder publicationes o sia, con al scientific anglo-romanic. National demonstrate introductori web le. Ma quales internet anglo-romanic duo, per gode giuseppe ha, de disuso effortio connectiones uno. Tu auxiliary interlingua demonstrate via, con finalmente initialmente in. Del da cadeva grammatica promotores, non romanic abstracte tu. E que hodie language quotidian, terra campo pan da. Ultra infra patre via es, interlinguistica africa uso lo. Computator publicationes le que, per active libere litteratura le, de linguage denominator historiettas non. Web contos national gymnasios tu, non al scriber tentation publicationes, qui latino linguistic supervivite ha. Vista periodicos via ma, servi subjecto uso e, usate resultato pan al.

<IMG SRC="http://i304.photobucket.com/albums/nn172/mesoscribe/example.gif" width="153" height="164" title="Palm Tree" border="0" hspace="10" vspace="5" style="float: left;">

Adding a background image to your home (CSS):

For this you need the URL of your background image and a little CSS.
Please add the following lines at the top or bottom of your text:

<!-- BACKGROUND IMAGE -->
<style type="text/css">
.pageStyleSheetBG, div#Content, div#MainContent {
background-image:url('URL OF YOUR BACKGROUND IMAGE');
}
</style>

Further Tips and Links

At AncientWorlds:

• Coding for Homesites and Groups, Arachne's Web
• Coding AW, article by Sankira Qin

Outside AncientWorlds:

• SELF-HTML (HTML, XML, CSS - German and French only)
• HTML Quick List
• CSS Tutorial
• CSS Help Piles

Don't forget to browse Arachne's Web - many tips, tricks and tutorials can be found there, as well as people who are always ready to help you in case you get stuck.

Have fun! :)