I Didn't Know the Forum Could...

[aislin]

Let's face it, the forum program can do some pretty nifty things. And while sometimes how to do these nifty things is explained in the Help, they're not always. Part of that is that the forum was written by programmers and the forum's tagging system (img, url, etc) is simplified html code. So stuff that I would do without thinking would never occur to someone who's never been a computer nerd.

With that in mind, for the next several weeks I'm going to be posting articles on how to make the forum do stuff. I'll leave this thread open so that anyone that wants to can try stuff out and I'll help out if it's needed. I'll add a new article to this post every Saturday until I run out of ideas. If you have seen people doing something on the forum and you'd like to know how it's done feel free to post it here or PM it to me and I'll see about writing it up.

Also, if you want to reprint these articles on another forum feel free. But please leave my name attached and leave the articles themselves unedited. And if you have a minute to send me a PM telling me where you reprinted it I'd appreciate it, though if you don't I won't be all that upset.

8.30.2008
First up, one of the more common questions we get, how to turn text or pictures into a link. Often times what you're linking to has a web address that's REALLY long and you'd rather just have a link that says 'click here' as opposed to a two line web address.

So let's say you want to link to an article about CW's upcoming CD/DVD release, The Greatest Journey.

You could just post the url: http://bandweblogs.com/blog/2008/08/12/celtic-woman-to-release-the-greatest-journey-essential-collection/ and enclose it in the url tags like this:

Code:

[url]http://bandweblogs.com/blog/2008/08/12/celtic-woman-to-release-the-greatest-journey-essential-collection/[/url]

That's a long link. What if we just want it to say 'click here' and when we do it takes us to that article? The answer is simple. In the opening url tag, before the ], put an = and paste the web address. Then in between the tags type 'click here'.

It should look like this:

Code:

[url=http://bandweblogs.com/blog/2008/08/12/celtic-woman-to-release-the-greatest-journey-essential-collection/]click here[/url]

Which looks like this use: click here.

Now, with all that being said, what If I wanted to display the picture from the article:

as a link to the article?

It's the same theory as above, but instead of putting 'click here' in between the url tags you put the img tags and the link to the picture. Basically, anything you put between the url tags will be displayed as a link. However, always remember that the img tags go INSIDE the url tags. If you do it the other way it won't work.

So, like this:

Code:

[url=http://bandweblogs.com/blog/2008/08/12/celtic-woman-to-release-the-greatest-journey-essential-collection/][img]http://bandweblogs.com/blog/wp-content/uploads/2008/08/celticwoman.jpg[/img][/url]

Which shows as this:


But... how will people know to click on the picture? And what if I want the text that tells them to click on the picture to be part of the link? Simply type the text you want to appear either before or after your img tags, but still within the url tags. This also applies to if you wanted to add another picture that links to the same place. As long as they're all inside the same url tags they'll all display as the same link.

So:

Code:

[url=http://bandweblogs.com/blog/2008/08/12/celtic-woman-to-release-the-greatest-journey-essential-collection/][img]http://bandweblogs.com/blog/wp-content/uploads/2008/08/celticwoman.jpg[/img]
Click Me[/url]

Will give you:

Click Me

aislin

[aislin]

Hey guys.... after putting my article into my original post this week... it became WAY to long. So I've split the topic and moved the comments into their own topic found here: http://www.celticwomanforum.com/index.php?topic=5619.0. Feel free to discuss there, but I'm going to keep this topic locked and only post the new stuff here.

9.6.08
All thanks to JRRacing this week who agreed to let me use one of his wallpapers. Along with that is the caveat that if you want to reprint this article on another forum you have to ask him for his permission to use his image, as I don’t want anything edited.

This week we’re going to look at having the forum resize images for you. As Rich has stated in the past, some of the images that get posted to the forum are HUGE and they can take a long time to load. And sometimes, you just find a great picture out on the web and want to share it, but again, it’s huge. It’s not that Rich and I are opposed to big images. But, considering that some people are on dial-up, big images aren’t always the most user-friendly things.

The good news is that the forum program will resize images for you! All it needs from you is what size you want your image to be.

So, let’s start with a wallpaper, something obviously too large:



That wallpaper measures 1024(width)x768(height) and it’s code looks like:

Code:

[img]http://www.celticwomanforum.com/howto/CWSkatefortheheartWallpaper.jpg[/img]

Pretty standard stuff. But, let’s say that we want to shrink it to a more forum friendly size like this:



The coding for this is all managed by some extra info in the opening img tag. For the smaller image above the coding looked like this:

Code:

[img width=266 height=200]http://www.celticwomanforum.com/howto/CWSkatefortheheartWallpaper.jpg[/img]

Not all that hard, just an extra width and height statement in the opening tag. But a word of caution, make sure you keep your proportions accurate or you image will get distorted. Like this:

Code:

[img width=150 height=200]http://www.celticwomanforum.com/howto/CWSkatefortheheartWallpaper.jpg[/img]

A good, fast way, to find your ratio of length to height is to divide the larger number by the smaller. So in this case: 1024/768 = 1.33. The 1.33 takes the place of the larger number and the smaller number is always 1. So your proportion here is 1.33(width)x1(height) from the original 1024x768. Now, to take that and apply it to our image, let’s say we want it to be at least 200 pixels tall. For the height 1x200 = 200 and for the width 1.33x200 = 266. And in use:

Code:

[img width=266 height=200]http://www.celticwomanforum.com/howto/CWSkatefortheheartWallpaper.jpg[/img]

Let’s follow this out a bit and use this in conjunction with the links from last week. This way, if we click on the link it will take us to the bigger, full size image.

Like this:

Click Me

The code for that would be:

Code:

[url=http://www.celticwomanforum.com/howto/CWSkatefortheheartWallpaper.jpg ][img width=266 height=200]http://www.celticwomanforum.com/howto/CWSkatefortheheartWallpaper.jpg[/img]
Click Me[/url]

I know that this weeks article was a little skewed towards our artists, next week we’re going to see how the forum can display more colors for text, glow, and shadow than are on the color drop down list.

aislin

[aislin]

9.14.2008

I apologize for this being a day late, I'm visiting family this weekend and these people seem to think that they are entitled to my time.

As I promised last week, we're going to look at having the forum display more colors than are named in the drop down list. In the drop down list your color options are: Black, Red, Yellow, Pink, Green, Orange, Purple, Blue, Beige, Brown, Teal, Navy, Maroon, and LimeGreen.

That's a rather small list and not at all indicative of the multitude of colors that the forum program can display. The standard tags for changing the text color look like this:

Code:

[color=red]This text is red.[/color]

In use: This text is red.

Aside from the color names on the drop down list you can insert any of the following names into the opening color tag: AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGray, DarkGreen, DarkKhaki, DarkMagenta, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, GoldenRod, Gray, Green, GreenYellow, HoneyDew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGreen, LightPink, LightSalmon, LightSkyBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumBlue, MediumOrchid, MeduiumPurple, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGreen, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, Purple, Red, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, and YellowGreen.

That is a BIG and exhaustive list, and it gives you a lot to choose from! Do note, however, if the name of the color is two words, like YellowGreen, make sure you don't put a space between them in the tag.

You can see from the list that not all of these colors show up well on the forum, especially the lighter ones. I can already hear the masses crying out, 'But aislin! What if we want MORE colors than that?' To you all I reply, welcome to hex.

This is a bit of a technical explanation, if you don't get it don't worry about it. The hexadecimal numbering system consists of numbers 0-F, or 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. The most common place that the hexadecimal system is used on the internet is in programming colors. Not every computer or internet browser interprets the word 'red' to mean the same shade of red, so if you're a web programmer and you want or need your web page to display the exact same shade of red no matter what computer setup is being used or you want more colors than are available by name, you rely on hexadecimal (hex) colors. The hexadecimal coloring system consists of a series of hex number in sequence like this: #4682B4. Those six number are actually three sets of two, so 46 and 82 and B4. The 46 represents the red in the color, 82 the green, and B4 the blue. If you do the math you'll see that in hex the web can display 16,777,216 colors (thanks Wikipedia!). I don't care who you are, if you need more that 16.7 million+ colors, you have a problem. Here ends the, I hope painless, technical explanation.

Now, onto what you really want, forum application. First, let's pick a color that we want to use. This site: http://www.december.com/html/spec/color.html has a huge list of hex colors along with an example and a name for each color. I'll just continue on using #4682B4 which that site tells me is named Steel Blue. If you'll notice, every time I've listed the entire number there's been a # in front. If you ever use a hex number the # has to appear in front to let whatever is using the color know that it's a hex number. In other words, if the # isn't there, the color won't work.

So for use the tags would look like:

Code:

[color=#4682B4]This text is Steel Blue.[/color]

This text is Steel Blue.

Isn't that all nifty? Now, the same thing will work when applied to the glow and shadow tags. But before I show you that there's going to need to be a discussion about cross browser compatibility which is a big term that deals with making the site appear the same on all internet browsers. If you've ever used a browser that is not Internet Explorer, like FireFox or Opera, than you know that occasionally there are sites that don't show up right. On the one hand, as most of the world uses IE, it kinda makes sense that some programmers are only interested in how things look in IE. On the other it shows a lack of care about everyone else. Some of us are a little nuts about making sure that when you view our site you are seeing what you are supposed to regardless of what you are using to view it. I remember very distinctly standing in the Apple store the week the iPhone came out just so I could pull the forum up on a demo iPhone and make sure it looked right.

Getting back to what this has to do with glow and shadow, IE doesn't conform to web standards as rigidly as it should, that's what allows the glow and shadow tags to work. FireFox, Opera, etc. do conform to web standards and as such glow and shadow don't work for them. I use FireFox and when the glow tag is used I just see a big block of color behind the text and I don't see any effect when shadow is used. In writing this article I checked everything on the most recent public version of IE7 and it doesn't show shadow either. The current scuttlebutt on the next edition of IE, IE8, is that it does do a better job of conforming to web standards and thus glow and shadow don't work.

With all that in mind, I'm going to show you how to use hex in glow and shadow, if it works for you it works, if it doesn't, it doesn't. Don't PM me telling me that it didn't work, I already know.

Glow has three attributes in its opening tag, color, strength and width. We're just concerned today with color so:

Code:

[glow=#4682B4,2,300]This text has a Steel Blue glow.[/glow]

This text has a Steel Blue glow.

Shadow has two attributes, color and direction. Again, we're only concerned with color.

Code:

[shadow=#4682B4,left]This text has a Steel blue Shadow.[/shadow]

This text has a Steel blue Shadow.

And what if you wanted to color your text and add a glow or shadow? That's easy, but you have to be sure to put the text color tag inside the glow or shadow tag like this:

Code:

[glow=#20B2AA,2,300][color=#4682B4]This text is Steel Blue with a Light Sea Green glow.[/color][/glow]

This text is Steel Blue with a Light Sea Green glow.

I don't think you would ever use shadow and glow together simply because the effects occupy the same space around the text so one would cancel out the other. If you did want to I guess you could by putting one set of tags inside of the other, though that's just a guess on my part as I don't have a computer that will show shadow and I won't put the code here because I have no way of knowing if what I did do would work. If someone who can see shadow wants to test that out for me and let me know either via PM or the comment thread I'd appreciate it.

aislin

[aislin]

9.21.2008

I've really struggled with what to write about this week. I've kinda run out of general use topics and we're now into stuff that I know that I've used in the past, but I don't know how useful it will be to the normal forum user. So, after next weeks article (which I'll try desperately to have out on time) I'm kinda out of ideas. I feel like Mike Rowe here, please send me your suggestions or questions or ideas. I don't mind writing about whatever you all are interested in.

One of the less often features used here on the forum is the list. The list button: can be found up top with all the other posting buttons. But how it appears if you just hit the button isn't always how you want your list to look. For example, you may want to do a track listing for a CD or DVD. If you push the list button and put in some titles you'll get this:

• The Sky and The Dawn and The Sun
• The Prayer
• Newgrange
• Over the Rainbow

Hmmmm.... not exactly the best way to list that is it? A numbered list would be much better.

• The Sky and The Dawn and The Sun
• The Prayer
• Newgrange
• Over the Rainbow

Ahhh, perfection. A numbered list like the one above is just one of many types of lists the forum can display, but before we get into that we need to look at the list tags and how this all works together.

When you push the button you get the following:

Code:

[list]
[li][/li]
[li][/li]
[/list]

The list tags obviously open and close the list and the li tag denotes a list item. So in other words you have to have the li tags for every item on your list. Even though the list button only gives you two sets of li tags you can add in as many as you'd like. So in our above example:

Code:

[list]
[li]The Sky and The Dawn and The Sun[/li]
[li]The Prayer[/li]
[li]Newgrange[/li]
[li]Over the Rainbow[/li]
[/list]

• The Sky and The Dawn and The Sun
• The Prayer
• Newgrange
• Over the Rainbow

Not really all that hard to understand or use I don't think. Now, onto how to make the list numbered. This too, like everything else I've covered in these articles so far, is handled in the opening tag. The numbered list I used earlier was a decimal list and it's tags looked like this:

Code:

[list type=decimal]
[li]The Sky and The Dawn and The Sun[/li]
[li]The Prayer[/li]
[li]Newgrange[/li]
[li]Over the Rainbow[/li]
[/list]

As you can see the extra element in the opening tag is type. There are 21 types of lists that you can use in the opening tag which are listed below with examples. Please note that in order to make this work in a coherent fashion I've made the code display without using the code tags. I'll explain how I did that next week.

[list type=none] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=disc] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=circle] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=square] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=decimal] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=decimal-leading-zero] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=lower-roman] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=upper-roman] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=lower-alpha] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=upper-alpha] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=lower-greek] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=lower-latin] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=upper-latin] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=hebrew] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=armenian] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=georgian] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=cjk-ideographic] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=hiragana] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=katakana] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=hiragana-iroha] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow
[list type=katakana-iroha] [li]The Sky and The Dawn and The Sun[/li] [li]The Prayer[/li] [li]Newgrange[/li] [li]Over the Rainbow[/li] [/list]	The Sky and The Dawn and The Sun The Prayer Newgrange Over the Rainbow

Now, what if you wanted to nest your lists? In other words, put one list inside another list?

• Celtic Woman
  
  • The Last Rose of Summer/Walking in the Air
  • May It Be
  • Isle of Innisfree
  • Danny Boy
• A New Journey
  
  • The Sky and The Dawn and The Sun
  • The Prayer
  • Newgrange
  • Over the Rainbow
• A Christmas Celebration
  
  • O Holy Night
  • Away in a Manger
  • Ding Dong Merrily on High
  • White Christmas

That's a bit more complicated. In the example above I started a list and defined the type as upper-roman

Code:

[list type=upper-roman]

[/list]

Then I went in and filled in the album names

Code:

[list type=upper-roman]
[li]Celtic Woman[/li]
[li]A New Journey[/li]
[li]A Christmas Celebration[/li]
[/list]

• Celtic Woman
• A New Journey
• A Christmas Celebration

Next I put a list inside of the li tags after each album name

Code:

[list type=upper-roman]
[li]Celtic Woman
[list type=decimal]
[/list]
[/li]

[li]A New Journey
[list type=decimal]
[/list]
[/li]

[li]A Christmas Celebration
[list type=decimal]
[/list]
[/li]
[/list]

And finally I filed in the titles

Code:

[list type=upper-roman]
[li]Celtic Woman
[list type=decimal]
[li]The Last Rose of Summer/Walking in the Air[/li]
[li]May It Be[/li]
[li]Isle of Innisfree[/li]
[li]Danny Boy[/li]
[/list]
[/li]

[li]A New Journey
[list type=decimal]
[li]The Sky and The Dawn and The Sun[/li]
[li]The Prayer[/li]
[li]Newgrange[/li]
[li]Over the Rainbow[/li]
[/list]
[/li]

[li]A Christmas Celebration
[list type=decimal]
[li]O Holy Night[/li]
[li]Away in a Manger[/li]
[li]Ding Dong Merrily on High[/li]
[li]White Christmas[/li]
[/list]
[/li]
[/list]

• Celtic Woman
  
  • The Last Rose of Summer/Walking in the Air
  • May It Be
  • Isle of Innisfree
  • Danny Boy
• A New Journey
  
  • The Sky and The Dawn and The Sun
  • The Prayer
  • Newgrange
  • Over the Rainbow
• A Christmas Celebration
  
  • O Holy Night
  • Away in a Manger
  • Ding Dong Merrily on High
  • White Christmas

I don't know if you would ever want to do that, but I'm just trying to be through.

Now, if you just want to make a small bullet list you don't have to use the list tag you can just preface the list item with one of a few tags that will insert a bullet for you. Your options are:

[o]circle [O]circle [0]circle [*]disc [@]disc [+]square [x]square [#]square

circle circle circle disc disc square square square

Take note that those tags don't have corresponding closing tags so don't try to add any.

As I mentioned above, next week we're going to look at some of the random and unlisted tags that can be used here on the forum. And PLEASE send me any ideas you might have for future articles!

aislin

[aislin]

9.27.2008

As mentioned last week, we're going to be looking at some of the more obscure tags for the forum. The tagging system for the forum is actually what is referred to as BBC, or Bulletin Board Code. We just tend to call it tags because that's the name for the opening and closing bracket sets.

The first 2 tags we're going to look at do the same thing in most browsers. I've never seen them behave differently so I'm going to treat them as interchangeable. If by some odd happenstance they do work differently for you I'd be really interested in hearing about it.

abbr & acronym
The abbreviation and acronym tags allow you to give your reader some extra information about something, considering how often acronyms get used around here it's probably something that should be used on a more regular basis. Or at all for that matter.

The new Celtic Woman CD/DVD is called The Greatest Journey. That's a lot to type out and usually we wind up using the three letter abbreviation TGJ. But if someone was new to the forum and had no idea what TGJ stood for? For this we use abbr and acronym.

Code:

[abbr=The Greatest Journey]TGJ[/abbr]
[acronym=The Greatest Journey]TGJ[/acronym]

TGJ
TGJ


br
The br (break) tag causes a forced line break in your text. In other words it has the same effect as pushing the Enter key on your keyboard.

Code:

You will find the answer when[br]You answer to[br]The Call

You will find the answer when
You answer to
The Call

As you can see from the example above there is no closing tag. Which makes sense.


email
The email tag can be used to make a link that when clicked by your reader brings up their e-mail program with your e-mail in the to line of a new message. A word of caution though, please don't post your e-mail address on the forum at large, save this tag for use in a PM so that you can know for sure who is getting your e-mail address.

This tag works the same, and looks the same, as a standard url tag. So if you want something other than your e-mail address to display you just put an =your-email-address@com.com in the opening tag like you do for a url.

Code:

[email]aislin@celticwomanforum.com[/email]
[email=aislin@celticwomanforum.com]e-mail me[/email]

aislin@celticwomanforum.com
e-mail me

If you wanted to take it a step further and give the e-mail a subject as well you can. But it's a little different. You have to add a ?subject=whatever to the end of the e-mail address.
Like this:

Code:

[email]aislin@celticwomanforum.com?subject=celticwomanforum.com[/email]
[email=aislin@celticwomanforum.com?subject=celticwomanforum.com]e-mail me[/email]
[email=aislin@celticwomanforum.com?subject=celticwomanforum.com]aislin@celticwomanforum.com[/email]

aislin@celticwomanforum.com?subject=celticwomanforum.com
e-mail me
aislin@celticwomanforum.com

Why is it that way? Because that's actually how you'd do it in html.


font
Fonts can be described in 2 ways. 1) By their specific name, Times New Roman, Courier, Ariel, etc. 2) By their class, serif, sans-serif, cursive, monospace, etc.

Before you go getting all excited about thinking you can use your favorite font on the forum there's a few things to consider. If you specifically name a font and your reader doesn't have that font installed on their computer, they won't see the pretty font that you intended. So if you are going to use a specific name try to think if it's one that will be available on most computers. If you use their class that's usually a lot better. Your computer will go and grab its favorite font of that class and use it. So if you specify serif your computer will probably use Times New Roman.

Code:

[font=Times New Roman]Celtic Woman[/font]
[font=serif]Celtic Woman[/font]

[font=Verdana]Celtic Woman[/font]
[font=sans-serif]Celtic Woman[/font]

Celtic Woman
Celtic Woman

Celtic Woman
Celtic Woman

You can specify more than one in the opening tag and let the computer go through the list until it finds one it likes. That way if your reader doesn't have the exact font you want, they'll still get the general effect.

Code:

[font=Verdana, sans-serif]Celtic Woman[/font]

Celtic Woman


hr
The hr, or horizontal rule, is just that. It places a straight line across your post. It has no closing tag and you can't color it or change it's size, it just is.

Code:

[hr]

me
For those of us who frequent the chat the me tag won't be all that new. The /me command can be used in the chat if you wish to say you do something. If that makes no sense to you don't worry about it, or go into the chat someday and type "/me says hi" and see what happens.

Unlike in the chat however, you can specify someone else doing the action with the tags. You can either use the me tag or you can do it like we do in the chat, a simple /me to specify yourself. If you do do it the /me way it has to be on it's own line.

Code:

[me=aislin]says hi[/me]
[me=celticfan06]pokes aislin[/me]
/me reminds Cait that that's never a good idea

* aislin says hi

* celticfan06 pokes aislin

* aislin reminds Cait that that's never a good idea

You can insert any name into the opening tag, it doesn't run off of usernames or anything, but you do have to have a name in the opening tag, you cant just say [me]aislin[/me]. As you can see the forum doesn't like it.

Do try to think about who you are going to be speaking for if you use this tag with someone else's name. And whether or not they'd appreciate you speaking for them.


nobbc
Last week in the great big list of list types I made the forum show the BBC code without having to use the code tags. This is accomplished through the nobbc tag. A word of caution, if you don't warn people you are using the nobbc tag it can get very confusing.

Code:

[move]This text should be moving.[/move]
[nobbc][move]This text should be moving.[/move][/nobbc]

This text should be moving.[move]This text should be moving.[/move]


pre
The preformatted text tag, pre, tells the forum to display your text exactly as you've typed it. To be quite honest I can't think of many times when this tag would be useful, but as it's a button I thought I'd go ahead an let you know.

The best example I can come up with is if you wanted to add extra spaces to to front of a word and then wanted to center the text like this:

Celtic
     Woman

Normally, you could just put the extra spaces in front of the second word so that it would appear indented, but when you center something it removes the extra spaces at the beginning. Like this:

Code:

Celtic
    Woman

[center]Celtic
    Woman[/center]

Celtic
    Woman

Celtic
    Woman

So if you wanted to be sure that the spaces show you'd use the pre tag.

Code:

[center]
[pre]Celtic
    Woman[/pre]
[/center]

Celtic
    Woman

And yes, it does automatically mess with the font so that everyone will know they're looking at formatted text.


size
The size button is one of the more straightforward buttons to use. But there are actually four ways to specify the size you want.

We'll start with the obvious, when you push the button you get:

Code:

[size=10pt]The High Kings[/size]

The High Kings

The pt after the 10 stands for points, this is the same measure that most word processing programs use, think 12 point font.

Your next option is pixels. Pixels are the standard unit of measurement for images on a computer. If you look back where we learned how to manipulate the size of an image in an img tag the numbers we put in for height and width were the number of pixels for that measurement. So instead of having pt after the number, we're going to use px for pixels.

Code:

[size=10px]The High Kings[/size]

The High Kings

As you can see there is a bit of a difference between 10 points and 10 pixels.

The third way is to use the relative words larger and smaller. They automatically make the text larger or smaller than the text around it.

Code:

The High Kings [size=larger]The High Kings[/size] The High Kings
The High Kings [size=smaller]The High Kings[/size] The High Kings

The High Kings The High Kings The High Kings
The High Kings The High Kings The High Kings

It's not a big difference but it is appreciable.

Your last option is to use size words. Your options are: x-small, small, large, x-large.

Code:

[size=x-small]The High Kings[/size]
[size=small]The High Kings[/size]
[size=large]The High Kings[/size]
[size=x-large]The High Kings[/size]

The High Kings
The High Kings
The High Kings
The High Kings


tt
The last tag we're going to look at is the tt tag. The tt stands for teletype and it just make your text appear like it would off a typewriter. I have no idea why you'd use it or for what but it's a button and now you know what it does.

Code:

[tt]CelticWomanForum.com[/tt]

CelticWomanForum.com


That's it for this week. I'd like to say that it's still officially Saturday for most of the country so this is out on time. One thing I didn't cover this week is all of the table tags. I'm going to save that for next week as it's a long drawn out concept to try to explain. But after that I'm out of ideas so PLEASE, if you have an idea, and it hasn't been discussed here yet, let me know.

aislin

[OldFatGuy]

Thank you for all your hard work!  That's great stuff.  Now, if we can just get people to read it.........   

[aislin]

10.4.2008
I've known since I started doing these posts that eventually I was going to have to write about tables. I hate tables. I hate doing them, I hate thinking of them, and updating the tour table has been known to cause me to bang my head on my desk. But oftentimes they are the only way for things to get formatted correctly. I'm going to try to make this as easy to follow as I can, if you don't understand feel free to ask and let me know where you got lost.

There are three parts (tag sets) to a table. The first one is the actual table tag that encloses everything. When you push the (table) button you get this:

Code:

[table][/table]

Those tell the forum that you are starting and ending a table, everything has to go inside of those. I know that seems self explanatory but the entire table structure is built around nesting, putting one set of tags inside of another.

The next button is . Which is insert table row. When you push it you get:

Code:

[tr][/tr]

Tr, obviously, stands for table row. By itself it is useless, you have to put it inside of the table tags and there has to be a set of tr tags for every row. So let's say we want a table with three rows:

Code:

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

So far so good, but we're still not finished. The last set of tags for a table indicates a cell. Cells are what actually contain the data. When you push the button you get:

Code:

[td][/td]

Td stands for table data. For every cell on a row you have to have td tags. So to go back to our previous example of the three row table and add three cells into every row:

Code:

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

Now, data, let's put in some data:

Code:

[table]
[tr][td]Celtic Woman[/td][td]Alex[/td][td]Chloë[/td][/tr]
[tr][td]Deirdre[/td][td]Hayley[/td][td]Lisa[/td][/tr]
[tr][td]Lynn[/td][td]Órlagh[/td][td]Celtic Woman[/td][/tr]
[/table]

Celtic Woman	Alex	Chloë
Deirdre	Hayley	Lisa
Lynn	Órlagh	Celtic Woman

Hmm... that doesn't look all that pretty does it? The forum will automatically put all the cells right next to each other with no space, it's up to the user to tell it how much room to put between each column. To do that you add spaces in front of the data in all the cells in that column. For our example we'll use 4 spaces:

Code:

[table]
[tr][td]Celtic Woman[/td][td]    Alex[/td][td]    Chloë[/td][/tr]
[tr][td]Deirdre[/td][td]    Hayley[/td][td]    Lisa[/td][/tr]
[tr][td]Lynn[/td][td]    Órlagh[/td][td]    Celtic Woman[/td][/tr]
[/table]

Celtic Woman	Alex	Chloë
Deirdre	Hayley	Lisa
Lynn	Órlagh	Celtic Woman

Much better! But what if we want to add some color? This is where this gets annoying. You can't change the color of all the text in the table by simple putting the color tags around the table tags like this:

Code:

[color=blue]
[table]
[tr][td]Celtic Woman[/td][td]    Alex[/td][td]    Chloë[/td][/tr]
[tr][td]Deirdre[/td][td]    Hayley[/td][td]    Lisa[/td][/tr]
[tr][td]Lynn[/td][td]    Órlagh[/td][td]    Celtic Woman[/td][/tr]
[/table]
[/color]

Celtic Woman	Alex	Chloë
Deirdre	Hayley	Lisa
Lynn	Órlagh	Celtic Woman

[/color]

As you can see from the hanging /color tag, and lack of blue, the forum can't process it that way. Even better, it can't process it if you do that to an entire row. If you want to color the text, or bold it or make it move, you have to do it for each individual cell, in other words within each set of td cells. For our example:

Code:

[table]
[tr][td][color=blue]Celtic Woman[/color][/td][td]    [color=darkgreen]Alex[/color][/td][td]    [color=darkblue]Chloë[/color][/td][/tr]
[tr][td][color=mediumorchid]Deirdre[/color][/td][td]    [color=gold]Hayley[/color][/td][td]    [color=darkred]Lisa[/color][/td][/tr]
[tr][td][color=gold]Lynn[/color][/td][td]    [color=indigo]Órlagh[/color][/td][td]    [color=blue]Celtic Woman[/color][/td][/tr]
[/table]

Celtic Woman	Alex	Chloë
Deirdre	Hayley	Lisa
Lynn	Órlagh	Celtic Woman

Something important to cover here is how tables handle what's called whitespace. Whitespace is a fancy programmer word for extra spaces or line breaks that appear in code. As you can see from the example the forum won't interpret a push of the enter key between rows, it won't see them for between cells either. However, you can put returns into the cells themselves either by pushing enter or using the br tag. If you do use a return, try to remember to remove the space between the words where the enter is, in the example I'm going to remove the space between Celtic and Woman and insert a carriage return. I'll do the first with the br tag and the second with enter. With the Celtic Woman in the lower right you'll have to add in the leading spaces to make Woman start where Celtic does.

Code:

[table]
[tr][td][color=blue]Celtic[br]Woman[/color][/td][td]    [color=darkgreen]Alex[/color][/td][td]    [color=darkblue]Chloë[/color][/td][/tr]
[tr][td][color=mediumorchid]Deirdre[/color][/td][td]    [color=gold]Hayley[/color][/td][td]    [color=darkred]Lisa[/color][/td][/tr]
[tr][td][color=gold]Lynn[/color][/td][td]    [color=indigo]Órlagh[/color][/td][td]    [color=blue]Celtic
    Woman[/color][/td][/tr]
[/table]

Celtic Woman	Alex	Chloë
Deirdre	Hayley	Lisa
Lynn	Órlagh	Celtic     Woman

If you've kept up with me to this point you are doing REALLY good. From here on out we're going to change the example to a tour cast list so that we can look at some of the more complicated aspects of tables.

Code:

[table]
[tr][td]2005[/td][td]    2006[/td][td]      2007[/td][td]    2008[/td][/tr]
[tr][td]Chloë[/td][td]    Chloë[/td][td]    Chloë[/td][td]    Alex[/td][/tr]
[tr][td]Deirdre[/td][td]    Lisa[/td][td]    Hayley[/td][td]    Chloë[/td][/tr]
[tr][td]Lisa[/td][td]    Máiréad[/td][td]    Lisa[/td][td]    Lisa[/td][/tr]
[tr][td]Méav[/td][td]    Méav[/td][td]    Lynn[/td][td]    Lynn[/td][/tr]
[tr][td]Órlagh[/td][td]    Órlagh[/td][td]    Máiréad[/td][td]    Máiréad[/td][/tr]
[tr][td]    Méav[/td][td]    Órlagh[/td][/tr]
[tr][td]    Órlagh[/td][/tr]
[/table]

2005	2006	2007	2008
Chloë	Chloë	Chloë	Alex
Deirdre	Lisa	Hayley	Chloë
Lisa	Máiréad	Lisa	Lisa
Méav	Méav	Lynn	Lynn
Órlagh	Órlagh	Máiréad	Máiréad
Méav	Órlagh
Órlagh

Huh, that doesn't look right. What's up with all that odd formating down at the bottom? The forum can't read your mind so you have to insert empty td tags to signify that you want an empty cell, you can't just leave it blank and assume the forum will put it in the right place. Like so:

Code:

[table]
[tr][td]2005[/td][td]    2006[/td][td]    2007[/td][td]    2008[/td][/tr]
[tr][td]Chloë[/td][td]    Chloë[/td][td]    Chloë[/td][td]    Alex[/td][/tr]
[tr][td]Deirdre[/td][td]    Lisa[/td][td]    Hayley[/td][td]    Chloë[/td][/tr]
[tr][td]Lisa[/td][td]    Máiréad[/td][td]    Lisa[/td][td]    Lisa[/td][/tr]
[tr][td]Méav[/td][td]    Méav[/td][td]    Lynn[/td][td]    Lynn[/td][/tr]
[tr][td]Órlagh[/td][td]    Órlagh[/td][td]    Máiréad[/td][td]    Máiréad[/td][/tr]
[tr][td][/td][td][/td][td]    Méav[/td][td]    Órlagh[/td][/tr]
[tr][td][/td][td][/td][td]    Órlagh[/td][td][/td][/tr]
[/table]

2005	2006	2007	2008
Chloë	Chloë	Chloë	Alex
Deirdre	Lisa	Hayley	Chloë
Lisa	Máiréad	Lisa	Lisa
Méav	Méav	Lynn	Lynn
Órlagh	Órlagh	Máiréad	Máiréad
		Méav	Órlagh
		Órlagh

Better, but I'd like for the table to be centered in my post. The position tags: right, left, and center, can be placed around the entire table, unlike what we saw earlier with color. I'm also going to go in and format the years so they pop.

Code:

[center]
[table]
[tr][td][color=blue][b]2005[/b][/color][/td][td]    [color=blue][b]2006[/b][/color][/td][td]    [color=gold][b]2007[/b][/color][/td][td]    [color=gold][b]2008[/b][/color][/td][/tr]
[tr][td]Chloë[/td][td]    Chloë[/td][td]    Chloë[/td][td]    Alex[/td][/tr]
[tr][td]Deirdre[/td][td]    Lisa[/td][td]    Hayley[/td][td]    Chloë[/td][/tr]
[tr][td]Lisa[/td][td]    Máiréad[/td][td]    Lisa[/td][td]    Lisa[/td][/tr]
[tr][td]Méav[/td][td]    Méav[/td][td]    Lynn[/td][td]    Lynn[/td][/tr]
[tr][td]Órlagh[/td][td]    Órlagh[/td][td]    Máiréad[/td][td]    Máiréad[/td][/tr]
[tr][td][/td][td][/td][td]    Méav[/td][td]    Órlagh[/td][/tr]
[tr][td][/td][td][/td][td]    Órlagh[/td][td][/td][/tr]
[/table]
[/center]

2005	2006	2007	2008
Chloë	Chloë	Chloë	Alex
Deirdre	Lisa	Hayley	Chloë
Lisa	Máiréad	Lisa	Lisa
Méav	Méav	Lynn	Lynn
Órlagh	Órlagh	Máiréad	Máiréad
		Méav	Órlagh
		Órlagh

Notice that while it did center the table, it didn't center the text within their cells, for that you'll have to do it cell by cell because centering a row won't get you anything.

Code:

[center]
[table]
[tr][td][center][color=blue][b]2005[/b][/color][/center][/td][td][center]    [color=blue][b]2006[/b][/color][/center][/td][td][center]    [color=gold][b]2007[/b][/color][/center][/td][td][center]    [color=gold][b]2008[/b][/color][/center][/td][/tr]
[tr][td][center]Chloë[/center][/td][td][center]    Chloë[/center][/td][td][center]    Chloë[/center][/td][td][center]    Alex[/center][/td][/tr]
[tr][td][center]Deirdre[/center][/td][td][center]    Lisa[/center][/td][td][center]    Hayley[/center][/td][td][center]    Chloë[/center][/td][/tr]
[tr][td][center]Lisa[/center][/td][td][center]    Máiréad[/center][/td][td][center]    Lisa[/center][/td][td][center]    Lisa[/center][/td][/tr]
[tr][td][center]Méav[/center][/td][td][center]    Méav[/center][/td][td][center]    Lynn[/center][/td][td][center]    Lynn[/center][/td][/tr]
[tr][td][center]Órlagh[/center][/td][td][center]    Órlagh[/center][/td][td][center]    Máiréad[/center][/td][td][center]    Máiréad[/center][/td][/tr]
[tr][td][/td][td][/td][td][center]    Méav[/center][/td][td][center]    Órlagh[/center][/td][/tr]
[tr][td][/td][td][/td][td][center]    Órlagh[/center][/td][td][/td][/tr]
[/table]
[/center]

2005	2006	2007	2008
Chloë	Chloë	Chloë	Alex
Deirdre	Lisa	Hayley	Chloë
Lisa	Máiréad	Lisa	Lisa
Méav	Méav	Lynn	Lynn
Órlagh	Órlagh	Máiréad	Máiréad
		Méav	Órlagh
		Órlagh

You have to include the leading spaces inside the center tags otherwise it does weird things to the formatting. I don't know why, it just does.

You can put links inside of cells as well, though that makes them really long. As an example, here are the first two rows from the Spring '09 CW tour schedule:

Code:

[table]
[tr][td][b][color=#009900]Date[/color][/b][/td][td]    [b][color=#009900]Location[/color][/b][/td][td]    [b][color=#009900]Venue[/color][/b][/td][td][center]    [b][color=#009900]PBS[/color][/b][/center][/td][td]    [b][color=#009900]M&G[/color][/b][/td][td]    [b][color=#009900]Tickets[/color][/b][/td][/tr]

[tr][td]March 11[/td][td]    Wilkes-Barre, PA[/td][td]    [url=http://www.wachoviaarena.com/]Wachovia Arena[/td][td][center]    [url=http://www.wvia.org/events/celticwoman.html]WIVA[/url][/center][/td][td][center]    yes[/center][/td][td][/td][/tr]
[/table]

Date	Location	Venue	PBS	M&G	Tickets
March 11	Wilkes-Barre, PA	Wachovia Arena	WIVA	yes

And that brings us to the end of tables. Again, if you got lost or want help, let me know and I'll see what I can do for ya. I am now officially out of ideas, so unless someone out there comes up with something for me to write about, there won't be another article next week. So think about it and come up with something REALLY nifty for me to explain and PM it to me or post it in the comment thread. Thanks!

aislin

[aislin]

11.1.2008
Over on Lisa’s forum, http://lisakellyfan.com/phpBB2/index.php, Rich has been letting people upload their avatars to his server for use on that forum. This has led to some of our members here wanting to know if they could do the same thing here. We have the space so I don’t see why not. However, I am going to ask that you not use us like PhotoBucket and use us to host your avatar for use on another forum. Your avatar will be on our server, and having another forum access it will suck up our bandwidth, so please upload your avatar to a site like the aforementioned PhotoBucket if you want to use it on another forum.

To change your avatar, you go into your profile then click on forum profile information. Normally you see this:



But, now that we’ve changed it, you should see this:



So, in order to upload your avatar, first push the button next to ‘I will upload my own picture.’ Then push the browse button:



That will cause a box to popup allowing you to navigate around your computer to where your avatar is located. In this case, we’re looking for my nifty Legend of the Seeker avatar. (I watched the premiere today and it was awesome, I’ve also read the books. Blasphemous as it may be, there are other things in my head aside from CW. ) So, click on your avatar and push open.



The location on your computer of your avatar should appear in the ‘I will upload my own picture’ box.

Last, scroll down to the bottom of the page and push the ‘Change Profile’ button. If you don’t, the forum won’t save it and you will be left wondering why your avatar didn’t change. Once you do the page will reload and you’ll see this on the page and on the side column:




A few important notes here, our avatar size is 80x80. If you upload an avatar that is too large, the forum will resize it for you. Also, the avatar only stays on the server as long as you are using it. If you change to a new avatar, the one stored on our server will disappear and if you want to use it again, you’ll have to upload it again.

If you have any problems let me know, either in the comment thread or by PM.

aislin