GW News
GW Articles
GW Gamers
GW Interviews
GW Photo Album
GW Guilds
GW Links
GW Forums
GW Auctions
GW Site FAQ
GW Screens Comp

Nightfall Map
Factions Map
Prophecies Map
GW Mission Maps
GW Collector Maps
GW Elite Skill Maps

GW Armor
GW Missions
GW Monsters
GW Quests
GW Elites
GW Runes
GW Skills
GW Maps
GW Zones
GW Uniques
GW Collectors
GW Titles
GW Inscriptions
GW Insignia
GW Hero FAQ
GW Classes
GW Tips & Hints
GW Guides
GW Commands

GW Videos
GW Screenshots
GW Signatures
GW Wallpapers

Guild Wars: Forum Topic

Guild Wars: Creating html-code based signatures

Forum >> Miscellaneous >> Off-Topic >> Creating html-code based signatures

1 2 Next >

User

Message

mriswith

Posts: 2878
Joined: 03/09/2006
Credibility: 3150 pts

Creating html-code based signatures

in order to display the codes correctly i had to replace < and > icons for [ and ] icons. If you start using html and want to use the code; make 200% sure all [ and ] are replaced by < and >
Also; if you make an HTML signature; please test it first in IE of Firefox before posting it on the forums or using it as signature.

In a few replies i noticed that when html code using " parantheses, due to the fact that the html isnt put to work by using [ instead of < is being replaced by \" . If you are going to make a html sig; simpy remove the backslash so that you will only keep the " It will wok fine then ^^

Introduction
Since i have had quiet some requests for using tables in signatures i descided to post the little basics in a short html tutorial. This is completely focussed on making the table and links in signatures like my own signature:

example:

IMPORTANT LINKS:
• Screenshot Competition
• Signature Size
• Forum Rules
• Forum FAQ

MY GUIDES:
• Versatile Mesmer
• MM Do's & Dont's
• Solofarm Byzzr Wingmender

the most important thing to remember whith using html codes in your signature is that the coding must be complete. If one of the brackets is missing or the code is incomplete; the signature will badly intervene with the site and can cause layout and loading troubles.

Basics
first of all i like to point to our signature rules clicky. The maximum size allowed (including extra text line) is 600x250 pixels. How to set the size of a table will be described further on.
First i will start off with the codes needed for making tables:

CODE

[table]; this will start the table itself. possible addings are: width; height; border; cellspacing and cellpadding.

[tr] this will start a table row

[td] this will start a table column. Possible addings are style; width; height; bgcolor

[a href=\"link\"] this will initiate a link

[font] this will set, in combination with adds, color; font; size

[b] making text bold

[i] making text italic

[u] giving text/sentences a underline

[mg src=\"link\"] this will paste an image

[center] this will align the object in between the tags

After you have typed a code like table, note that the code also must be closed. The way to do that is as the following example:

CODE

[/table]

codes are always closed of with the same code with the addition of a slash.

Usage
Now; how to use the codes? First try to visualise the layout you wish to have. I will take my own signature as an example. I want 2 columns in 1 row within the table. I like a color on the border and a filled background. The basics of the table wil be (as buildup)
- make the table
- make a row
- make 1 column
- make the second column

put this into code and you will have the following:

CODE

[table][tr][td][/td][td][/td][/tr][/table]

objects are closed with the slash as you can see.
Now, what we want os to set the maximum boundaries of the signature. We dont want an admin to give a PM saying your signature is too large ;p
The table itself will have to get the maximum size. We will do that with adding a width command:

CODE

[table width=\"600\">[tr][td][/td][td][/td][/tr][/table]

we dont want a border around the entire table (if you would like that enter a number after the border command) and we like the columns and rows to be spaced a bit. cellpadding, cellspacing are commands that make margins within tables.
- cellspacing: spacing between the cells of the table
- cellpadding: spacing from the cellborder to its contents.

Since we like the most space available we will set the margins on 1 pixel.

CODE

[table width=\"600\" border=\"0\" cellspacing=\"1\" cellpadding=\"1\"][tr][td][/td][td][/td][/tr][/table]

result example:

funny thing is you actually dont see anything yet. Only thing we have done is setting up the invisible boundaries (in width) in which the table should stay. The maximum height we will add to the columns. We will be making 2 columns; 1 for the image, 1 for text/links. Since we have 600 pixels in width; we will have to tell how to divide the columns within that 600 pixels. It's nice to have more space for the image then texts, so we will make the imagecolumn 400 pixels wide. That will leave 200 pixels for the texts. Also we would like a border around our column. With a color and a filled background. The height for the signature is maximum 250 pixels. However for this example 162 will suffice.

CODE

[table width=\"600\" border=\"0\" cellspacing=\"1\" cellpadding=\"1\"][tr][td width=\"400\" height=\"162\" style=\"border: solid 2px #536F5D\" bgcolor=\"#000000\"][/td][td][/td][/tr][/table]

In the 'style' command we have added the properties for the column. It says; make a solid border with webcolor number 536F5D. For picking out your personal color i recommend using Photoshop. The colorpicker also displays the webcode number for that color. Insert that code after the # and the color will be made. For the second column we want the same properties but with a width of 200 pixels (400+200 makes 600 ^^ ).

CODE

[table width=\"600\" border=\"0\" cellspacing=\"1\" cellpadding=\"1\"][tr][td width=\"400\" height=\"162\" style=\"border: solid 2px #536F5D\" bgcolor=\"#000000\"][/td][td width=\"200\" height=\"162\" style=\"border: solid 2px #536F5D\" bgcolor=\"#000000\"][/td][/tr][/table]

result:

Well; that looks nice ^^ but now we want the image inserted. Make sure the imagesize is the same is the boundaries set for the column. In this case it will be 400x162. To insert the image in the table use the 'src img="link" ' command:

CODE

[table width=\"600\" border=\"0\" cellspacing=\"1\" cellpadding=\"1\"][tr][td width=\"400\" height=\"162\" style=\"border: solid 2px #536F5D\" bgcolor=\"#000000\"][img src=\"http://www.gameamp.com/modules/core/user_gallery/19066_gallery.jpg\" width=\"400\" height=\"162\"][/td][td width=\"200\" height=\"162\" style=\"border: solid 2px #536F5D\" bgcolor=\"#000000\"][/td][/tr][/table]

To be sure the image will have the same dimensions as the column, i have added the width and height command to force it into the maximum margins we have available. If all has went well it should now look like this:

The textcolumn needs some links to things you deem important or interesting. Note that up till now; we never hit enter or space when not needed (look closely at the codes up till now. The only spaces there are, are to seperate codes from each other) and we will do the same for textlines. If you hit enter, the site will read it as a break and put it on the following line. HTML or not.

I will keep this bit a bit short since the principle is simple. For making a link use the following code:

CODE

[a href=\"http://guildwars.gameamp.com/forum/showTopic/30016.php\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Signature Size[/font][/a]

the first bit of code between the <> is the actual link. The textbit after is the line that will be clickable and link the person through to that specific site. To get the bull in front of the line use:

CODE

•

Close the link off with slash followed by the initial code:

CODE

[/a]

If you want to start a new line; dont use enter: type the following code to start a new line:

CODE

[br]

In the end the code looks like this:

CODE

[table width=\"560\" border=\"0\" cellspacing=\"1\" cellpadding=\"1\"][tr][td width=\"400\" height=\"162\" style=\"border: solid 2px #536F5D\" bgcolor=\"#000000\"][img src=\"http://www.gameamp.com/modules/core/user_gallery/19066_gallery.jpg\" width=\"400\" height=\"162\"][/td][td width=\"160\" height=\"162\" style=\"border: solid 2px #536F5D\" bgcolor=\"#000000\"][font style=\"Arial\" Size=\"2\" color=\"#536F5D\"][b]IMPORTANT LINKS[/b]:[/font][br][a href=\"http://guildwars.gameamp.com/guildwars/screenshot_competition\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Screenshot Competition[/font][/a][br][a href=\"http://guildwars.gameamp.com/forum/showTopic/30016.php\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Signature Size[/font][/a][br][a href=\"http://guildwars.gameamp.com/forum/showTopic/30287.php\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Forum Rules[/font][/a][br][font style=\"Arial\" Size=\"2\" color=\"#d4ffff\"][a href=\"http://guildwars.gameamp.com/guildwars/gwfaq\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Forum FAQ[/font][/a][/p][br][br][font style=\"Arial\" Size=\"2\" color=\"#536F5D\"][/p][b]MY GUIDES:[/b][/font][br][a href=\"http://guildwars.gameamp.com/guide/viewGuides/1979.php\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Versatile Mesmer[/font][/a][br][a href=\"http://guildwars.gameamp.com/guide/viewGuides/1553.php\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• MM Do's & Dont's[/font][/a][br][a href=\"http://guildwars.gameamp.com/guide/viewGuide/2065.php\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Solofarm Byzzr Wingmender[/font][/a][/p][/td][/tr][/table]

The signature looks like this:

IMPORTANT LINKS:
• Screenshot Competition
• Signature Size
• Forum Rules
• Forum FAQ

MY GUIDES:
• Versatile Mesmer
• MM Do's & Dont's
• Solofarm Byzzr Wingmender

Cheers;
mriswith

***THIS POST HAS BEEN EDITED***

01/25/07 03:48

NexT

Posts: 242
Joined: 01/21/2006
Credibility: 306 pts

RE: Creating html-code based signatures

hey great guide == true && teaching people HTML != false

u need to edit it tho, cuz in the first code block u have [tr[ instead of [tr] which as u say will cause probs.. thats the only thing i noticed tho and with all that code and text i did expect there to be more :)

GJ i expect to see alot more sigs like this very soon.

oh and explaination of the first line (i have been programming in flash for work for a solid week, thats now how i talk normally :()

See my guide to Sigs here!
GGS:- SOTW 1 :- Winner ::- Entry -::
Art-gfx:- SOTW 1 :- Winner ::- Entry -::

01/25/07 04:21

mriswith

Posts: 2878
Joined: 03/09/2006
Credibility: 3150 pts

RE: Creating html-code based signatures

QUOTE

u need to edit it tho, cuz in the first code block u have [tr[ instead of [tr] which as u say will cause probs.. thats the only thing i noticed tho and with all that code and text i did expect there to be more :)

^^ just saw it myself as well; edited :D

QUOTE

There is more than a verbal tie between the words common, community, and communication.... Try the experiment of communicating, with fullness and accuracy, some experience to another, especially if it be somewhat complicated, and you will find your own attitude toward your experience changing

01/25/07 04:24

The Warrior Of Timi

Posts: 1385
Joined: 05/03/2006
Credibility: 2369 pts

RE: Creating html-code based signatures

Great now i can make a ig like that

USEFULL LINKS:
• My Ideas

01/25/07 04:33

hairychimpdude

Posts: 613
Joined: 04/19/2006
Credibility: 921 pts

RE: Creating html-code based signatures

i like ig

werd to my froobs ya'll

☻ n/mo solo farm naphui mission ☻ desert farming guide ☻ forum law ☻ duo hero farm ☻ nightbringer farm guide ☻ how 2 put img's in sigs ☻
self confessed pc nerd-need help,just ask

01/25/07 04:46

Pickletron

Posts: 616
Joined: 08/25/2006
Credibility: 526 pts

RE: Creating html-code based signatures

Not into all this stuff o.o
But I definitely want one of these sigs :D

I'll follow your guide ^^ but how do I "test" it in Firefox before putting it in my sig first?

Join =SOG=
Australian clan for CoD4 and Crysis

01/25/07 07:05

mriswith

Posts: 2878
Joined: 03/09/2006
Credibility: 3150 pts

RE: Creating html-code based signatures

QUOTE

I'll follow your guide ^^ but how do I "test" it in Firefox before putting it in my sig first?

make the code in something like notepad and with saving call it something like "sig.htm" the htm tag makes the link to IE or Firefox.

QUOTE

01/25/07 07:25

Magical Samurai

Posts: 377
Joined: 12/05/2005
Credibility: 434 pts

RE: Creating html-code based signatures

Nice guide, lets see if I can do this, lol

-Magical Samurai

EDIT:
Not seeing what I did here, any ideas?

CODE

[table width=\\"600\\" border=\\"0\\" cellspacing=\\"1\\" cellpadding=\\"1\\"][tr][td width=\\"400\\" height=\\"150\\" style=\\"border: solid 2px #970d0d\\" bgcolor=\\"#000000\\"][img src=\\"http://img365.imageshack.us/img365/7395/groupsignature2ws5.jpg\\" width=\\"400\\" height=\\"150\\"][/td][td width=\\"200\\" height=\\"150\\" style=\\"border: solid 2px #970d0d\\" bgcolor=\\"#000000\\"][font style=\\"Arial\\" Size=\\"2\\" color=\\"#970d0d\\"][b]IMPORTANT LINKS:[/b][/font][br][a href=\\"http://guildwars.gameamp.com/guildwars/screenshot_competition\\"][font style=\\"Arial\\" Size=\\"1\\" color=\\"#F4EDBD\\"]• Screenshot Competition[/font][/a][br][a href=\\"http://guildwars.gameamp.com/forum/showTopic/30016.php\\"][font style=\\"Arial\\" Size=\\"1\\" color=\\"#F4EDBD\\"]• Signature Size[/font][/a][br][a href=\\"http://guildwars.gameamp.com/forum/showTopic/34518.php\\"][font style=\\"Arial\\" Size=\\"1\\" color=\\"#F4EDBD\\"]• Skill Database[/font][/a][br][a href=\\"http://guildwars.gameamp.com/forum/showTopic/30287.php\\"][font style=\\"Arial\\" Size=\\"1\\" color=\\"#F4EDBD\\"]• Forum Rules[/font][/a][br][a href=\\"http://guardsofthegate.com/\\"][font style=\\"Arial\\" Size=\\"1\\" color=\\"#F4EDBD\\"]• GRDS Site[/font][/a][br][font style=\\"Arial\\" Size=\\"2\\" color=\\"#d4ffff\\"][a href=\\"http://guildwars.gameamp.com/guildwars/gwfaq\\"][font style=\\"Arial\\" Size=\\"1\\" color=\\"#F4EDBD\\"]• Forum FAQ[/font][/a][/p][br][br][font style=\\"Arial\\" Size=\\"2\\" color=\\"#970d0d\\"][/p][b]MY STUFF:[/b][/font][br][a href=\\"http://guildwars.gameamp.com/video/viewVideo/501.php\\"][font style=\\"Arial\\" Size=\\"1\\" color=\\"#F4EDBD\\"]• GRDS Video[/font][/a][br][a href=\\"http://guildwars.gameamp.com/wallpaper/viewWallpapers/784.php\\"][font style=\\"Arial\\" Size=\\"1\\" color=\\"#F4EDBD\\"]• Halloween Wallpaper[/font][/a][/p][/td][/tr][/table]

EDIT2: Tried removing the double \'s, because they didn't match up with yours. Still don't get anything.

[table width=\"600\" border=\"0\" cellspacing=\"1\" cellpadding=\"1\"][tr][td width=\"400\" height=\"150\" style=\"border: solid 2px #970d0d\" bgcolor=\"#000000\"][img src=\"http://img365.imageshack.us/img365/7395/groupsignature2ws5.jpg\" width=\"400\" height=\"150\"][/td][td width=\"200\" height=\"150\" style=\"border: solid 2px #970d0d\" bgcolor=\"#000000\"][font style=\"Arial\" Size=\"2\" color=\"#970d0d\"]IMPORTANT LINKS:[/font][br][a href=\"http://guildwars.gameamp.com/guildwars/screenshot_competition\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Screenshot Competition[/font][/a][br][a href=\"http://guildwars.gameamp.com/forum/showTopic/30016.php\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Signature Size[/font][/a][br][a href=\"http://guildwars.gameamp.com/forum/showTopic/34518.php\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Skill Database[/font][/a][br][a href=\"http://guildwars.gameamp.com/forum/showTopic/30287.php\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Forum Rules[/font][/a][br][a href=\"http://guardsofthegate.com/\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• GRDS Site[/font][/a][br][font style=\"Arial\" Size=\"2\" color=\"#d4ffff\"][a href=\"http://guildwars.gameamp.com/guildwars/gwfaq\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Forum FAQ[/font][/a][/p][br][br][font style=\"Arial\" Size=\"2\" color=\"#970d0d\"][/p]MY STUFF:[/font][br][a href=\"http://guildwars.gameamp.com/video/viewVideo/501.php\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• GRDS Video[/font][/a][br][a href=\"http://guildwars.gameamp.com/wallpaper/viewWallpapers/784.php\"][font style=\"Arial\" Size=\"1\" color=\"#F4EDBD\"]• Halloween Wallpaper[/font][/a][/p][/td][/tr][/table]

EDIT3: Alright, what happened there? Know I had only \ in that last one, it even shows up here in the editting window. Hm. They both have only single \'s.

***THIS POST HAS BEEN EDITED***

IMPORTANT LINKS:
• Skill Database
• Forum Rules
• Guards of the Gate Website
• HTML Based Signatures
• Forum FAQ

MY STUFF:
• GRDS Video
• My DeviantArt
• Cynn Wallpaper
• Mesmer-ific Wallpaper
• Halloween Wallpaper

01/25/07 08:44

rogh daxh

Posts: 142
Joined: 04/05/2006
Credibility: 185 pts

RE: Creating html-code based signatures

The Tough and Hard But Fair[NL]

IGN:

Oris Rhy

Xir Andur

Rogh Daxh

Aegh Ralai

Ryth Aglina

Syrus Qhul

Xero the Summoner

Zeyus Leh Calyss

Irana Makani Nitesh

why turns this out so f*cked up ><

its like this on my screen (without the border

QUOTE

[table width="600" height="200" border="0" cellspacing="1"]
[tr]
[td width="200" height="200" style="border: 2px solid #800000; " bgcolor="#012549"]
[p align="center"]
[a href="http://www.thbf.proboards103.com/?index.cgi"][font color="#00FF00" size="2"]The Tough and Hard But Fair[NL][/a][br]
IGN:[br]
Oris Rhy[br]
Xir Andur[br]
Rogh Daxh[br]
Aegh Ralai[br]
Ryth Aglina[br]
Syrus Qhul[br]
Xero the Summoner[br]
Zeyus Leh Calyss[br]
Irana Makani Nitesh[br][/font]
[/td]
[td width="400" height="200" style="border: 3px solid #800000; " bgcolor="#012549"]
[img src="http://i6.photobucket.com/albums/y216/lordorterror/siggie.jpg"]
[/td]
[/tr]
[/table]

thats my code

01/25/07 09:32

mriswith

Posts: 2878
Joined: 03/09/2006
Credibility: 3150 pts

RE: Creating html-code based signatures

answer is as i described in the guide; i see you have put enters after all the codes; remove all of them so that you will get 1 big line (autobreak will happen in notepad or word; but thats not a problem since there is no 'hard' enter made).

If you remove all the enters it should be fine

EDIT:
this is what it will look like when all enters are removed:

The Tough and Hard But Fair
IGN:
Oris Rhy
Xir Andur
Rogh Daxh
Aegh Ralai
Ryth Aglina
Syrus Qhul
Xero the Summoner
Zeyus Leh Calyss
Irana Makani Nitesh

code looks like this then (again < and > are replaced for [ and ] )

CODE

[table width=\"600\" height=\"200\" border=\"0\" cellspacing=\"1\"][tr][td width=\"200\" height=\"200\" style=\"border: 2px solid #800000; \" bgcolor=\"#012549\"][p align=\"center\"][a href=\"http://www.thbf.proboards103.com/?index.cgi\"][font color=\"#00FF00\" size=\"2\"]The Tough and Hard But Fair[NL][/a][br]IGN:[br]Oris Rhy[br]Xir Andur[br]Rogh Daxh[br]Aegh Ralai[br]Ryth Aglina[br]Syrus Qhul[br]Xero the Summoner[br]Zeyus Leh Calyss[br]Irana Makani Nitesh[br][/font][/td][td width=\"400\" height=\"200\" style=\"border: 3px solid #800000; \" bgcolor=\"#012549\"][img src=\"http://i6.photobucket.com/albums/y216/lordorterror/siggie.jpg\"][/td][/tr][/table]

autobreaks are made by the site

***THIS POST HAS BEEN EDITED***

QUOTE

01/25/07 12:06

mriswith

Posts: 2878
Joined: 03/09/2006
Credibility: 3150 pts

RE: Creating html-code based signatures

as reply for magical samurai:

IMPORTANT LINKS:
• Screenshot Competition
• Signature Size
• Skill Database
• Forum Rules
• GRDS Site
• Forum FAQ

MY STUFF:
• GRDS Video
• Halloween Wallpaper

The " paranthese will be replaced by \" by this site when the html is not put to work (due to using the [ isntead of < )
edit out all the backslahes and it should be fine

***THIS POST HAS BEEN EDITED***

QUOTE

01/25/07 12:13

mginn82

Posts: 122
Joined: 11/21/2005
Credibility: 231 pts

RE: Creating html-code based signatures

nice mriswith. Doesn't it just feel great imparting knowledge on others?

On a related note, I noticed a little type-o in your first code block.

[mg src=\"link\"] this will paste an image

should be:

[img src=\"link\"] this will paste an image

Notice the missing "i" in img, it's minor and appears that everyone seems to be getting the jist of what you posted, but the prefectionist (ironic misspelling) in me just had to point it out.

01/25/07 12:38

Tribina

Posts: 2346
Joined: 09/19/2005
Credibility: 5715 pts

RE: Creating html-code based signatures

Great tutorial =)) !!!!
Might gonna use it myself!

+ creds!!

GuildBase your online guild party organizer

01/25/07 12:54

rogh daxh

Posts: 142
Joined: 04/05/2006
Credibility: 185 pts

RE: Creating html-code based signatures

QUOTE

The Tough and Hard But Fair
IGN:
Oris Rhy
Xir Andur
Rogh Daxh
Aegh Ralai
Ryth Aglina
Syrus Qhul
Xero the Summoner
Zeyus Leh Calyss
Irana Makani Nitesh

code looks like this then (again < and > are replaced for [ and ] )

CODE