How to Post-Using UBBC code

[Tumbleweed]

First, you may notice this thread width has increased. Do not worry. It isn't your computer. It increased in size because I posted UBBC coding and there is a glitch that makes it too wide for this thread, thus stretches the board out.


What you need to know first: All the categories you see on our main page are referred to as "boards" with titles such as "Chit Chat" or "Electrical, Lighting, Heating & Cooling". If you click anywhere on a board of interest you may be taken to "sub-boards" or specific categories. The info on each board box should tell you if there are sub-boards. If you click on a sub-board you will see a lot of topics which we refer to as "threads". Not all boards have sub-boards therefore you may be taken directly to the threads.

It's easy to post so just give it a try!

Click on the thread you want to post on. Scroll to the last post. There may be several pages of posts so to get to the last page look in the lower left corner and click on the >> or select the last page in the drop down list. On the right side at the bottom of the last post you will see a reply button. Click on it. A box will open and now all you have to do is type and when you are done just click the "Post message" button.


To add a smiley:

If you want to add a smiley you can just click on one those you see directly above your post. If you don't see a smiley you like look to your left and click on "View all smileys". A separate window will open and you can select from there. Keep in mind if you click on it a 2nd time and it doesn't work it is likely still open but got pushed behind the current window you have open.

To start a new topic:

Click on the board you want to start a new topic in. Click on the button at top right where you see "Topic". Type in the name of your topic and click "Tab" on your keyboard and it will take you into the box where you can type your message. When you are finished typing click "Post Message" located directly below and to the left of you message text.


Text Size:

If you are finding the text difficult to read on both this site and other sites you need only to hold your CTRL key down on your keyboard and then scroll forward or backward to change the font size. I believe Firefox has many options in text size but IE may only have 3. Hope this helps make your online experience better.

[Tumbleweed]

Make Your Posts Fun!

Lesson One

Have you ever wondered how to use all these little buttons?

Everything you see in this little tutorial was done using the UBBC code buttons above, which is what you are about to learn now. Each button will generate UBBC tags to go on either end of your text when you click on them. In most cases you need to highlight the text before clicking the button or you can type between the coding tags.




This button will make your text bold. and the code in your post will look like this:

[b]bold[/b]

---

Want something in Italics? Well this one will do that.

[i]Well, this one will do that.[/i]

---

How about underlining?

[u]How about underlining?[/u]

---

This will make a strike-through.

[s]This will make a strike-through.[/s]

---

Want to make your text [glow=red,2,300]GLOW?[/glow]Note: This affect may not be seen in all browsers.

Don't want it to glow in red? You can edit the red

Want to make your text [glow=red,2,300]GLOW?[/glow]

like this

to make it so it has a [glow=green,2,300]green glow.[/glow]

to make it so it has a[glow=green,2,300]green glow.[/glow]

Your color choices are:

Black	Red	Yellow	Pink	Green
Orange	Purple	Blue	Beige	Brown
Teal	Navy	Maroon	Lime Green	**

If you don't like the intensity it is glowing you can change the UBBC code number - 2,300 - to a lower number as I did here.....
so it doesn't glow so much. [glow=green,1,300]green glow.[/glow]

[glow=green,1,300]so it doesn't glow so much.[/glow]

or to a higher number

so it glows like this. [glow=green,3,300]green glow.[/glow]

[glow=green,3,300]so it glows like this.[/glow]

---

This button will make your text[shadow=red,left,300]have a shadow affect. [/shadow]This affect may not show in some browsers.

Don't like the color you can edit that. Don't like such a strong shadow, you can edit that. Don't like which side the shadow appears on the text, you can edit that.

• [shadow=teal,left,300]I edited the shadow to teal here. [/shadow]
  
• [shadow=teal,left,50]Here I changed the number 300 to 50[/shadow]
  
• [shadow=red,right,300]Here I changed the shadow positioning to right.[/shadow]
  

---

And this button makes a marquee!

---

Are you wondering if you can use more than one UBBC code at a time? The answer is yes!

[shadow=red,left,300][glow=red,2,300]This sentence has all the UBBC code we just learned. Not to pretty, huh? [/glow][/shadow]

Here take a look at how the code looks.

[move][shadow=red,left,300][glow=red,2,300][s][u][i][b]This sentence has all the UBBC code we just learned. Not to pretty, huh?[/b][/i][/u][/s][/glow][/shadow][/move]

Notice you always need to have the coding tags in the correct sequence on either end and the ending tags always have a forward slash next to the bracket.

[b]Your words [/b]

[i][b]Your words [/b][/i]

---

This button preserves the format of text if you wrote it in Word or some other word processing program. It doesn't work perfectly but helps. You will need to click the button first to get your tags. Then insert your curser between the [pre] YOUR TEXT[/pre]and then paste the text. I did the "Things to do" list in Notepad.

Things to do:
	Get groceries
		Milk
		Butter
		Eggs

	Pick up dry cleaning
	Get gas
	Drop off b-day present
	Stop at hardware store for
		Screws	
		Paint
		Drop Cloth

The problem, as you can see, is that it makes the text really tiny. We'll fix that later.

The next post is Lesson Two

[Tumbleweed]

Lesson Two

This button aligns your text to the left.

[left]This button aligns your text to the left. [/left]

---

And this aligns you text in the center.

[center]And this aligns you text in the center.[/center]

---

This aligns your text to the right.

[right]This aligns your text to the right.[/right]

---

This button makes

---

a horizontal line. You can see I used it through-out this tutorial. This is the only code that doesn't need an ending tag.

This button makes[hr] a horizontal line.



This button makes your text larger or smaller

you just need to edit it as so

[size=6]larger[/size]

[size=1]smaller[/size]

Remember this?

Things to do:
	Get groceries
		Milk
		Butter
		Eggs

	Pick up dry cleaning
	Get gas
	Drop off b-day present
	Stop at hardware store for
		Screws	
		Paint
		Drop Cloth

We'll fix the tiny font size by selecting/highlighting all the text including the "pre" tags, click on the size button and edit the text code size to 3 like this




[size=3]
[pre]
Things to do:
Get groceries
Milk
Butter
Eggs

Pick up dry cleaning
Get gas
Drop off b-day present
Stop at hardware store for
Screws
Paint
Drop Cloth


[/pre]
[/size]


so it looks like this

Things to do:
	Get groceries
		Milk
		Butter
		Eggs

	Pick up dry cleaning
	Get gas
	Drop off b-day present
	Stop at hardware store for
		Screws	
		Paint
		Drop Cloth

---

This allows you to change font types. The difference may not be seen by all members as it is dependent upon what fonts they have installed on their computer.


This is Comic Sans MS in font size 3
This is Tahoma in font size 3
This is Impact in font size 3
This is Lucinda Sans Unicode.


[size=3]
[font=Comic Sans MS]This is Comic Sans MS in font size 3[/font]
[font=Tohoma]This is Tahoma in font size 3[/font]
[font=Impact]This is Impact in font size 3[/font]
[font=Lucida Sans Unicode]This is Lucinda Sans Unicode.[/font]
[/size]

You can also make silly symbols. Here the complete alphabet was typed and the font changed to Webdings. They are enlarged to font size 5 and typed with spaces between them so you can see them better.

abcdefghijklmnopqrstuvwxyz

[size=5][font=Webdings]a b c d e f g h i j k l m n o p q r s t u v w x y z[/size][/font]

You can also use your caps lock to get a whole new set. These were typed with a space between and the font changed to 5 so you can see what letter does what.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

[size=5][font=Webdings]A B C D E F G H I J K L M N O P Q R S T U V W X Y Z[/font][/size]


A complete list of common fonts for Windows and Mac users is HERE.

---

This button give you an indentation.

Like this

This button give you an indentation.
[blockquote]Like this[/blockquote]



This button was very useful, before the recent V4.5 Proboard upgrades, for an extremely long link you may have wanted to post. Often the tail end of the link would be seen but not effective or active. The URL tags confined the long URL link within it's tags which made it a viable link. With the upgrades this is no longer necessary, however, it is nice to know if the V4.5 upgrades fail. You will know if they failed if the tail end is in plain text (not highlighted).

Below I posted a very long link to one of the threads on this site.

Before the URL TAGS:

http://shacktoshowcase.proboards98.com/index.cgi?board=bigplants&action=display&thread=332

After the URL tags - you can see how it shortened it:

shacktoshowcase.proboards98.com/index.cgi?board=bigplants&action=display&thread=332

But as was said before, the new upgrades now shorten that without the tags (or so they say) we haven't tested a really, really long link.

But here is the same above link posted without the URL tags and as you can see it worked on this link.

shacktoshowcase.proboards98.com/index.cgi?board=bigplants&action=display&thread=332

---

This stands for File Transfer Protocol. We have not tested this as it was never necessary. However, briefly, it is mostly used for uploading any document that has code in it.

[ftp]YOUR CODED DOCUMENT FILE HERE[/ftp]

---

This coding tag is not really needed anymore. It is for posting pictures but most photo storing sites have that code built right in the link to your picture. But just so you can have a look on how to post a picture here is the code I used for the posting all the above buttons. Please note we prefer you either resize your photo before using the IMG tags OR make a clickable link. Please see The Photo Posting Thread.

[IMG]http://i241.photobucket.com/albums/ff318/Shacktoshowcase/Little%20Buttons/img-1.gif[/IMG]

---

This puts tags around your email address and makes it a clickable link. So if someone wants to send you an email they can click on the link and it will take that person to their personal email account adding the address automatically in the "Send To" box, provided that person is already signed into their email account.

[e-mail]

[email][e-mail][/email]

Without it it would look like this:

[e-mail]

Please do not post your email address in a post. Use this code only in PM's to people you know and trust.

The next Post is Lesson Three

[Tumbleweed]

Lesson Three

Remember this?

Black	Red	Yellow	Pink	Green
Orange	Purple	Blue	Beige	Brown
Teal	Navy	Maroon	Lime Green	**

The next 3 buttons are what you are going to use to make this UBBC table.



This button will give you the basics to get started.

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

To make it easier to visualize I'll change the format a bit so you can see how things work.

[table] This is the starting tag of your table.
[tr] This is the first row in your table.
[td] This is the first column in your table.
[/td] This is the closing UBBC tag for your column.
[/tr] this is the closing UBBC tag for your row.
[/table] This is the closing tag for your table.

[table][tr][td]Your Text Will Go between the td column tags[/td][/tr][/table]

If you noticed on the color table I had 5 columns and 3 rows.



To add columns you will use this button. It will give you this:

[td][/td]


However, you need to insert your curser after the last column closing tag so you'll get this.

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

To better visualize I'm changing the format a bit. In fact, if you are going to make a table I recommend doing it this way. It is less confusing. In this example 3 more columns were added and color code was added. This coding...


[table][tr]
[td][color=Black]Black [/color][/td]
[td][color=Red]Red[/color] [/td]
[td][color=Yellow]Yellow[/color] [/td]
[td][color=Pink]Pink[/color] [/td]
[td][color=Green]Green[/color][/td]
[/tr]
[/table]



....will look like this:

Black

Red

Yellow

Pink

Green

To add a new table row use this button. It will give you this:

[tr][/tr]

Insert it after the closing or ending table row tag like this:

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

To better visualize I'm pasting the whole code used in that table. You can clearly see where the new table row goes. So this....


[table][tr]
[td]Black [/td]
[td][color=Red]Red[/color] [/td]
[td][color=Yellow]Yellow[/color] [/td]
[td][color=Pink]Pink[/color] [/td]
[td][color=Green]Green[/color][/td]
[/tr]

[tr]
[td][color=Orange]Orange[/color] [/td]
[td][color=Purple]Purple[/color] [/td]
[td][color=Blue]Blue[/color] [/td]
[td][color=Beige]Beige[/color] [/td]
[td][color=Brown]Brown[/color] [/td]
[/tr]

[tr]
[td][color=Teal]Teal[/color]  [/td]
[td][color=Navy]Navy[/color]  [/td]
[td][color=Maroon]Maroon[/color]  [/td]
[td][color=LimeGreen]Lime Green[/color]  [/td]
[td] ** [/td]
[/tr]
[/table]


gives you this:

Black	Red	Yellow	Pink	Green
Orange	Purple	Blue	Beige	Brown
Teal	Navy	Maroon	Lime Green	**

The next post is Lesson Four


For those of you who are interested in learning more about UBBC such as adding background please PM me (Admin) and I can direct you to my other site which has an tutorial on advanced ubbc. It is html coded to do backgrounds and odd shaped tables.

[Tumbleweed]

Lesson Four

Whew, are you brain dead yet? Just a few more to go.



This button makes your text go ^{slightly above.}

This button makes your text go [sup]slightly above.[/sup]

---

This button makes your text go _{slightly below.}

This button makes your text go [sub]slightly below.[/sub]

---

This button is pretty obsolete but stands for Telecommunications Devices for the Deaf.

---

And just to confuse matters more, how do you think I was able to put those little boxes around the code with the title Code above it. By using the above button. Like this:

[code]My codes[/code]

Now don't ask me the code I used to show the code, that I used to show the code rather than what it would display as. ROTFL

---

This code is very handy if you want to "Quote" someone but only want to quote a part of it.

a part of it.

[quote]a part of it.[/quote]

---

And the last one. Yippee!



This will help you make a bulleted list like the one I had earlier in the tutorial. The code will look like this:


[ul]
[li]
[/li][li]  
[/li][li]
[/li][/ul]


You will add your text next to the bracketed asterisks like this..


[ul]
[li] Item One
[/li][li] Item Two
[/li][li] Item Three
[/li][/ul]


And it looks like this:

• Item One
  
• Item Two
  
• Item Three
  

Are you a glutton for punishment? Well, you can get really fancy with your list like this code:


[ul]
[li]I need a cold drink.
[ul]
[li]Should I have tea?
[ul]
[li]Tea is good for me.
[/li][/ul]
[/li][li]A milk shake?
[ul]
[li]No that would be fattening.
[/li][/ul]
[/li][li]Or maybe some coffee and not something cold at all.
[ul]
[li]I love coffee!
[/li][/ul]
[/li][/ul]
[/li][li]I need to jump in the shower
[/li][li]I need to do dishes.
[/li][/ul]

• I need a cold drink.
  
  • Should I have tea?
    
    • Tea is good for me.
      
    
    
  • A milk shake?
    
    • No that would be fattening.
      
    
    
  • Or maybe some coffee and not something cold at all.
    
    • I love coffee!
      
    
    
  
  
• I need to jump in the shower
  
• I need to do dishes.
  

Congrats, You've just learned ^UBBC code!


As I said earlier, most all of your text needs to be highlighted or selected in order for the opening and closing UBBC tags to be placed on either side of the text.
To highlight, click with your left mouse button where you want to start the affect and keep holding the mouse button down as you drag the mouse across to where you want the affect to end. Now just click the button of your choice. It will then bracket your text with the affect UBBC code.

BTW: Once you learn the UBBC tags you don't have to click on those buttons. You can type them in.