Forum Commands (screenshots, images, links, colors, signatures) (Full Version)

All Forums >> [AE Forum Resources] >> Forum Rules and Resources



Message


the_penguin_man45 -> Forum Commands (screenshots, images, links, colors, signatures) (2/20/2008 12:23:20)

Forum commands also known as PGP codes affect how your post looks and its general behavior. The ability to add a sig at the end of your post, giving a link out or posting an image is done by the use of the PGP commands. There are two ways of doing this, the easy way is by using the grey buttons that appear on the top while you are posting or replying to a thread. Clicking on them basically adds the PGP code in your post and all you have to do is place what you want in between the two tags.

For example by pressing the "B" button we get
[b][/b]
All you have to do is place a word in between those tags. So lets say you want to make the word "cool" bold. Well after pressing the "B" button you write in between the two tags the word "cool" like so:
[b]cool[/b]

that will make it appear like so: cool.

The more advance way of doing this is of course memorizing the tags themselves, so instead of clicking on "B" you can type yourself
[b]cooler[/b]

which of course will produce this effect: cooler.

Reference
B - Bold any words contained between the brackets
I - Italic any words contained between the brackets
U - Underline any words contained between the brackets
S - Strike any words contained between the brackets
hr - Horizontal rule line
quote - Puts segment into a quote style
link - Displays a link to another web address
color - Allows you to change the color of your text
list - Displays item in a list style
image - Displays an image
code - Ignores PGP codes
right - Aligns right
center - Aligns center
Font Face - Determines the font used
Font Size - Determines the font size



In Depth Look

B - The bold command
ex.
This is cool because its [b]bold[/b]

effect: This is cool because its bold


I - The italics command
ex.
This is cool because its in [i]italics[/i]

effect: This is cool because its in italics


U - The underline command
ex.
This is cool because its [u]underlined[/u]

effect: This is cool because its underlined


S - The strike command
ex.
This [s]sucks[/s]
is fun
effect: This sucks is fun


hr - Horizontal rule line
ex.
I am saying stuff here
[hr]
I am saying different stuff here


effect:
I am saying stuff here


I am saying different stuff here


quote - Quoting
ex.
Noah_B said: 
[quote]This guide is awesome[/quote]

effect:
quote:

ORIGINAL: Noah_B

This guide is awesome



spoiler (no button) - Acts like the "quote" tag, but makes the text inside invisible unless highlighted
ex.
[spoiler]The password is ArtixKrieger![/spoiler]

effect:
spoiler:

The password is ArtixKrieger!



link - Linking to another web address
ex.
[link]http://www.battleon.com[/link]

effect: http://www.battleon.com

It is also possible to make your link actual words, as opposed to just the URL
ex.
[link=http://www.battleon.com]Come play AdventureQuest![/link]

effect: Come play AdventureQuest!

Note: This forum does not require the use of the link tags, just typing a web address will make it clickable automatically.

ex.
www.battleon.com

effect: www.battleon.com

Also you can use the url tag to reproduce the same effect as the link tag

ex.
[url]http://www.battleon.com[/url]

effect: http://www.battleon.com


color - Coloring text
When using the color command you have to say what kind of color you need. The easiest way is using the menu that pops up once the grey button is pressed. A bit more advanced is to remember the the colors you use. The # part is actually an RGB color code, the theory is that by using Red, Green and Blue you can produce any color. There are always six number, the first two are the amount of Red used, the next two the amount of Green used, and the last two the amount of Blue. There are entire websites that just have colors and their RGB codes, for more information try www.htmlgoodies.com

ex.
This is a nice [color=#339999]color[/color]

effect: This is a nice color


list - Display items in a list style
ex. Unordered list

Weapon list [ul]
[*]Blade of Awe 
[*]Angelic Scepter
[*]Ultra Ice Katana
[/ul]

effect:
Weapon list

  • Blade of Awe
  • Angelic Scepter
  • Ultra Ice Katana


Note: Notice the
[*]
tag? This also allows you to make bullet points
ex.
This is a [*]dot

effect: This is a
  • dot

    Also, ordered list can be used:

    ex.
    Weapon list [ol]
    [*]Blade of Awe 
    [*]Angelic Scepter
    [*]Ultra Ice Katana
    [/ol]

    effect:
    Weapon list

    1. Blade of Awe
    2. Angelic Scepter
    3. Ultra Ice Katana


    Nesting lists:
    ex.
    [ol]
    [*] Swords[ul]
    [*] Blade of Awe
    [*] Ultra Ice Katana[/ul]
    [*] Maces
    [/ol]

    effect:

    1. Swords

      • Blade of Awe
      • Ultra Ice Katana

    2. Maces



    image - Displays an image
    ex.
    [image]http://www.battleon.com/images/homepage/promo-tshirt-firewar.gif[/image]

    effect: [image]http://www.battleon.com/images/homepage/promo-tshirt-firewar.gif[/image]

    Also,
    [img][/img]
    can be used, but [IMG][/IMG] cannot.


    code - Ignores PGP codes
    This is the tag that has made it possible for me to display the tags without having them take effect. It basically tells the forum display compiler to ignore any commands within the code tag. Amusingly I cannot use the code tag to display the code tag since it cancells out what I want to display.


    right - Aligns right
    ex.
    [right]Text on the right side[/right]

    effect:
    Text on the right side



    center - Aligns center
    ex.
    [center]Text in the center[/center]

    effect:
    Text in the center



    Font Face - Determines the font used
    There are different types of Font Face each one of them look a bit different than the other.

    ex.
    [font="Courier"]This font looks different[/font]

    effect: This font looks different


    Font Size - Determines the font size
    The font size spans from 1 to 7 (0 is the default size of a post). The bigger the number the bigger the font size.

    ex.
    [size=7]BIG[/size]

    effect: BIG



    Nesting

    Nesting is a term used by computer scientists to describe the ability of code to be implemented within itself. Basically nesting allows you to put things within things.

    ex1.
    This is a bit more [b]complex [u]but[/u] I like it[/b]

    effect: This is a bit more complex but I like it

    ex2.
    This is a cool link [i][url]http://www.battleon.com[/url][/i], you guys should check it out

    effect: This is a cool link http://www.battleon.com, you guys should check it out

    Nesting does not have to be limited in two tags nested within each other. You can go crazy (although rather annoying for everyone reading it and do something like this.

    ex.
    [color=#339999][b]1 4m [i][s]n00b[/s] s0 1 4m 1337[/i] y0, j00 pwn3d[/b][/color]

    efffect: 1 4m n00b s0 1 4m 1337 y0, j00 pwn3d

    (It hurts to read doesn't it?)

    To avoid extra confusion about nesting, keep in mind that whatever code you use first you should close it last, second, close it second. For the above example I used the color tag first, so I knew that in the end I had to close the color tag last.




    "Post # (X)"
    When clicked this displays a more acurate link to a post in a thread. For example: http://forums2.battleon.com/f/fb.asp?m=11505552 would link straight to Z's post in this guide



    Advanced PGP
    The fun stuff mostly comes with nesting and what is refered to as "linkto" commands. It gives you a lot more control of the look and feel of a post because by combining everything you have a lot of options.

    Let me talk a bit about the "link to" command. The most common way its used is
    ex.
    Click [url="http://www.battleon.com"]here[/url] for the coolest RPG game

    effect: Click here for the coolest RPG game

    The basic trick is the = " ". That's telling the forum compiler make this equal to this but display something else.

    Lets take it a step further, lets say you want to have an image (or signature) that is clickable as a link. Lets combine what we learned in nesting and the linkto command.

    ex.
    [url="http://forums2.battleon.com/f/"][image]http://www.freewebs.com/revro/AdventureQuest-header5.gif[/image][/url]


    effect: [image]http://www.freewebs.com/revro/AdventureQuest-header5.gif[/image]

    This might seem a bit complicated but we are still using the same principles. I basically said, take this web link, which is the Forums2 link, then within that link I said display this image. The only difference between this example and the above example is that instead of saying "here" I just added one more tag.

    Well I hope you enjoyed reading this because I certainly enjoyed writing it!

    If you are wondering how to post a signature check out my other FAQ

    PS. If you enjoyed reading this you might also like to learn how to make webpages. The idea is the same and some commands are similar but instead of using the [ ] tags you use < >. For more info about that go to www.htmlgoodies.com. It contains a plethora of tutorials about how to make webpages.



    Thanks to:

    Thanks to Niko and Z.324 for the first versions of the guide, and to Tolkienfanatic and NeoSano11vr for their help with this version.




  • Alina -> RE: Forum Commands (screenshots, images, links, colors, signatures) (2/19/2008 13:37:27)

    Screenshots

    Windows
    Taking a screenshot is surprisingly a lot easier than you might suspect. There is a key on your keyboard (picture courtesy of Jremboul ~Pae) that says Print Screen on it (usually abbreviated as Print Scrn or PrntScrn depending on the keyboard used). Its on the upper right corner or your keyboard right next to the F1, F2, ....F12 buttons and right above the Insert and Delete keys.

    1. When you want to take a screenshot, capture the image you want by pressing the Print Screen button on your keyboard.

    2. The picture is now copied. Now go to MSPaint or any picture editing program you have (ex. Photoshop) and press the Ctrl button and V (Ctrl-V) at the same time. This will allow you to paste the image you just captured. You might get a pop-up message saying "The image on the clipboard is larger than the bitmap. Would you like the bitmap enlarged?", just click yes to that.

    3. Now you can edit and save your picture to your hard drive.

    Linux
    This is a bit more complex since the Print Screen button does not work they way it should. If you are using KDE the above directions will work out. Instead of MSPaint you can use GIMP. For the rest of the linux users it requires a bit more work. Since there is no button that helps you do it you have to have a program that does it for you, I suggest GIMP since it will help you to capture and edit/save your screen shot. Unfortunately you have to know you are going to take a screenshot before you do it. If you see something cool happening on screen you will never have enough time to open GIMP and take a screenshot of it.

    1. Open GIMP2.0, if you do not have it go to www.freshmeat.net and type GIMP and search for the project.

    2. Click on File -> Acquire -> Screenshot. Now you have certain options you can either acquire a screenshot of the entire screen or a specific window making your life a bit easier so that you will not have to edit out any other windows you have on screen. The number of seconds delay is usefull if you want to take a screenshot of your entire screen but do not want certain programs to show, like GIMP.

    3. Right after you acquire a screenshot a new window will be opened with the image there. You can edit/save as you see fit.

    Mac
    There are 2 ways to get a screen shot:

    1. Press the keys Shift, the Apple symbol, Space, and the number 4(in this order just to be sure). Although this is 3 extra buttons in order to take a screenshot rather then the 1 Print Screen it's still handy. The picture appears on the desktop.

    2. Use the Application Grab-if you need help locating it go to Finder an type in the search spot the word Grab and it should come up(icon has scissors with a window). There is no window that will pop up for Grab but in the top right hand corner there will be the Apple sign, Capture, File, Edit...then you will see under Capture if you click it Timed, Slection and Window. I usually use Selection which is like what it says: you kind of like crop the stuff you want to take a picture of. Window is wehre you click one of your windows and it takes a picture of that. Timed should be self-explanatory, but if you must know you just set how many seconds you want the Grab to wait to take a picture. The picue appeears on the desktop also.

    Additional Mac information:
    (Courtesy of JaredHawthorne)
    quote:

    Taking a screenshot in Mac OS X is Shift + Apple Key + 3. This immediately saves a screenshot to the user's desktop. The user can optionally cause the cursor to turn into cross-hairs allowing the user to select a specific region for capture by pressing Shift + Apple key + 4. They would then click and drag the cursor to select an area (like using the rectangular marquee tool in Photoshop). When they release the mouse button, the selected area is saved to the desktop. In either case, the space bar is not required.

    Additional info players might need to know: In Mac OS X version 10.3 and earlier, screenshots are saved in Adobe PDF format. They can be changed to jpeg by converting with Photoshop, GIMP, or simply by opening the PDF in the "Preview" application and clicking File > Save As... and choosing "jpeg" in the "Format" pop-up menu in the resultant save dialog. In Mac OS version 10.4 and later, screenshots are in png format, easily converted to jpeg as above. Users may change the keyboard shortcut in the "Keyboard and Mouse" preference pane in System Preferences to something shorter if they wish, such as F1 or F2, et cetera.


    Kat edit: *Extra info thanks to MarcMagus: GNOME users may find they can easily take a screenshot by simply pressing the Print Screen key. After a short delay, a dialog should pop up with a miniature image of the screen asking what file you want to save to. You can also hold the Meta (often bound to Alt) key while pressing Print Screen to save an image of the window with focus. I know this works in GNOME 2.10.0 with Metacity, I'm not sure if it's a feature of the Desktop Environment or the Window Manager.

    Posting an image
    There are two cases here, you either have the image you want to post on your computer or you found a cool image online. If you want to post an image you found online skip to step #5 , otherwise keep on reading.

    1. Your picture will have to be saved as a .jpg or .gif file. You might also want to make your picture smaller making it a smaller file, which in turn will make the picture load faster. Any imaging editing program will allow you to do this.

    2. Now you need a web host. Basically in order for people online to be able to view it you will have to put it online first. A simple search in google for "free web host" will give you tons of results. Make sure you select one that allows remote linking. (if you try linking on an image and you get some kind of error saying "remote linking prohibited" it means that you should find a different host that does). A good site for hosting is http://www.imageshack.us/ or http://www.photobucket.com/

    3. Create an account at the web hosting site. You will have to upload your picture from your computer to your web host. Most sites either allow FTP access and some of them have an Uploading program. Read their FAQ to figure out what you should use. If you are using imageshack then all you have to do is click on the upload button, find the picture you want to upload and upload it.

    4. Now that the picture is uploaded you will need to write down its web address or copy the address so you can paste it later. Lets say that your image link is http://www.battleon.com/Images/AdventureQuest-header5.gif

    5. Posting your picture to the forum is the easiest step you can do it two ways. You can press the IMAGE button, when you are posting or replying to a topic. You get a series of grey boxes, B, I, U, S...image, all of them are PGP codes for the forum, "image" is one of them. The other way is actually typing the PGP command. Either way the end result should look like this:

    [image]http://www.battleon.com/Images/AdventureQuest-header5.gif[/image]


    Note: Being able to post images is a nice feature, but do not overuse it. Images tend to slow down posts considerably. Internet etiquette wise the best thing you can do is upload your picture and when posting in the forums give the link to the picture instead of displaying the picture. That way the post will load faster and whoever wants to see the picture will be able to.

    Making Signatures with a Link

    So now you have a picture and you are going to use as your signature but you also want people to click on it. Its a lot easier you might think.

    Lets say I have a picture at http://img66.exs.cx/img66/1517/niko.jpg , as mentioned above all I need to do to display a picture is use the image tags. Now you have to know the link you want to use when people click on that picture. In my case its my guide, its address is http://forums2.battleon.com/f/tm.asp?m=5118. In order to have a link I need to use the link or url tag. Combining both we get
    [url="http://forums2.battleon.com/f/tm.asp?m=5118"][image]http://img66.exs.cx/img66/1517/niko.jpg[/image][/url]


    Notice that you use the url tag first and within it you use the image tag. A general example of it should look like this
    [url="link that you want goes here"][image]picture that you want goes here[/image][/url]


    Note the url=" ", the quotation marks are important.

    Also check out this guide for information about all the other commands you can use.

    Thanks to Niko for the original guide text.




    Page: [1]

    Valid CSS!




    Forum Software © ASPPlayground.NET Advanced Edition
    0.140625