Customizing your Gallery page

From TLKFAAwiki

Your gallery can be customized in many -many- different ways.

To customize your gallery, you must:

Log in through your 'Artist Account'

then

Click on the 'Gallery Appearance' link, on the left side of your login page.

There are two things you can change there--Your Toolbar Button Images, and Your Artist Comment.

Toolbar Button Images

The toolbar Button Images appear above the links at the top of one's gallery page. The default are 120X120 pixel-squares, and look like this:

You can change individual images in this set, or all of them, by:

Clicking 'Browse' under the ToolBar image you want to change (You can only change one at a time).

Pick the correct image file you want to use from your computer.

And then, click 'Upload' under that soon to-be-changed image.

To revert back to the default images, simply click on 'Default' under whichever ones you want to change back.

Some artists have used the fact that all the images are lined up in a row to simulate a banner; something like this:

Even though this effect -looks- like it is all one image, it is actually five very carefully-cut 120X120 pixel-sized images, uploaded in the way described above.

In-Depth Tutorials

The Toolbar Banner Effect in Photoshop 7.0

Your Artist Comment

The artist comment is just a block of (assumedly) text that an artist/user can personalize. Many users have decided that they aren't happy with just text, however, and so have used the power of HTML to customize their little block of the archive even further, with pictures, music, ect.

HTML

HTML (Hyper Text Markup Language), is the code which all web browsers read and translate into graphics, text layouts, fonts, and other output.

The following tags are allowed:

B, I, BR, P, U, A, IMG, FONT, H1, H2, H3, H4, BLOCKQUOTE, CENTER, EMBED, TABLE, TR, TD, HR, MARQUEE, DIV, SPAN, PRE

All other HTML tags are removed automatically if you use them.

All HTML is encased in < > brackets. These brackets tell the browser when to stop simply outputting text blindly, and start reading HTML; something that is going to command it to do something, like display an image, for example.

ATTENTION: Some HTML can hinder the archive's ability to function if input incorrectly (EX: you forget to end your HTML), so please, be careful. Refer to any of the many HTML tutorials available online to better understand how to use HTML formatting.

All of the HTML mentioned here can be transfered to artist-to-artist personal comments, for such things as sending people welcome images.

Text Changing Tags

Text changing tags take your text and tweak it. You can place these tags around however many words you like, wherever you want the effect. Even in the middle of normal text.

Syntax:

<i, b, u, or center>Text that is effected by the tag</i, b, u, or center>

Examples:

<i>This is an italics tag</i>

<b>This is a bold tag</b>

<u>This is an Underlined Line</u>

<center>This is a centered Line</center>

You can also combine these effects as long as you make sure to end your tags in the mirror order of what you started them in. For something like Underlined-bold-italic words:

<u><b><i>Underlined-bold-italic</i></b></u>

Font, size, and colour

Font itself

The 'font face' tag allows you to change your text's font, if you like. The drawback of the font tag is that it relys on the idea that everyone who comes to your page has the exact same fonts you do. If they do not have that same font, the browser will flail its arms and output something it -does- have, which most probably won't look good.

So it's recommended that you give the browser a choice of three fonts. If the viewer doesn't have the first font, it'll go to the second, and so on down the line.

Syntax:

<font face="FONT_NAME, FONT_NAME, FONT_NAME">WORDS</font>

EX: This is 'Font face', using 'fantasy, cursive, and sans-serif'.

The HTML for the above would be:

<font face="fantasy, cursive, sans-serif">This is 'Font face', using 'fantasy, cursive, and sans-serif'.</font>

Font Size

Font size uses the Font tag again, but with a 'size' specifier instead of 'face'.

Syntax:

<font size="Number">WORDS</font>

EX:

The table below shows examples of the font size tag in action-- there are numbers 1 through 7, but you'll get the drift.

<font size="1">Font Size 1</font>

<font size="2">Font Size 2</font>

<font size="5">Font Size 5</font>

<font size="7">Font Size 7</font>

Font Colour

Font color is determined by the font tag again, but this time with a color specifier.

Color in HTML is a bit of a hit-and-miss business unless you use HEX code to specify an exact color.

Browsers have an amount of pre-set word colors you can use in place of numbers (ex: red, green, blue), but to get a -specific- color (because -your- definition of 'blue' might be different than the browser's), you have to have a hex number or an RGB triplet.

The information here regards hex, though one could switch the '#HexNumber' part of the code for a color name (finding one is outlined below).

Syntax:

<font color="#HexNumber">TEXT</font>

Example:

This is an example of BlueViolet in Hex code.

looks like:

This is an example of <font color="#9900ff">BlueViolet</font> in Hex code.

Finding a hex color

Thankfully, there are nice people out there who've made it their business to have hex colour charts on their webpages. Here's a link to a nice person(s):

http://www.webmonkey.com/reference/color_codes/ -- Reference: Color Codes by Webmonkey.com.

Finding a color name

Thankfully, there are nice people out there who've made it their business to have colour name charts on their webpages. Here's a link to a nice person(s):

http://www.w3schools.com/html/html_colornames.asp -- HTML color names, by W3Schools.

Linking

Creating a link to another webpage (say, maybe you have a DeviantArt page and want to direct people to it) is a matter of the <a href> tag.

Syntax:

<a href="address of webpage you want to link to">Words or Image code that will be your link</a>.

Images

This is what everybody's here for. You have the ability to place an image in your Artist Comments box using the <img src> tag.

Syntax:

<img src="address of the image you want displayed" align="left">

'Align' allows you to justify where you want your image to fall in relation to the text around it.. Your options are basically Right and Left. Your image will appear -alongside- your text, to whichever side you specify.

However, dropping the 'align="**"' part of the tag entirely and putting a center tag (which is mentioned above, under 'Text Changing Tags') around your image code will center the image as if it is text.

You can also turn an image into a link by putting your link code around your image code, as if the image is the link's text.

For example:

<center><a href="LINK_ADDRESS"><img src="IMAGE_ADDRESS"></a></center>

Would make the browser bring the IMAGE_ADDRESS image up, make it into a link to LINK_ADDRESS, and then center the whole thing.

Combining tags is a beautiful thing, sometimes. Do be careful about the asthetics and loading time you'll press upon visitors, though.

Sound

Embedding a sound (making your gallery play music) is also possible on the archive.

Syntax:

<embed src="URL of midi/wav/MP3 file" width="value" height="value" loop="value" align="value" autostart="value">

Variables:

Autostart="true" makes the player start up automatically, once the file loads.

Autostart="false" makes the player wait to start playing until play is activated by the viewer, at the controller (The stop, play, pause buttons that appear wherever you put the HTML).

Align="right" puts the crontroller to the right of your text.

Align="left" puts the controller to the left of your text.

Removing 'align="value"' all together just drops the crontroller whereever it appears in your text. (and makes it subject to centering, like images).

Loop="#" Tells the browser how many times to play the music file.

Where 'Width' and 'Height' are should be the width and height, in pixels, that you want your sound controller (play, stop, pause controls, etc.) to be.

Be warned about what type of files you're embedding; the norm for emdeding sounds usually goes to Midi files and no larger, due to how taxing downloading an entire song in any other format is on bandwidth, loading time, and viewer patience.

This code will make the browser attempt to use a plugin, in order to play the music. If the viewer does not have the plugin, their browser will load a broken file image, or not display anything at all, and probably prompt them to download the correct plugin.

Adding a Background

Adding a background (an image or color other than white, that you can write on top of) to your artist's comments box requires the use of a table.

Syntax for putting an image in the background:

<table background="URL of background image">
<tr></tr>
<td>
YOUR ARTIST COMMENTS TEXT/IMAGES/WHATHAVEYOU
</td>
</table>

This will tile the image file you give it, if the image does not exactly fit in (is smaller than) the field of the artist comments box.

If you'd like a simple, solid, color for a background, you can switch the 'background="URL"' part of this code for 'bgcolor="#hexcolornumbers"'.

Syntax for a solid-color background:

<table bgcolor="#hexcolornumber">
<tr></tr>
<td>
YOUR ARTIST COMMENTS TEXT/IMAGES/WHATHAVEYOU
</td>
</table>

How to find a hex number is outlined earlier in this file.

This effect is not perfect, though-- it will leave a small white border around the perimeter of the artist comment box.

Other Resources

Finding An Address/URL