Hey everyone!
Its been a while since we added a User Guide to the forums, so I thought I would post a quick extensive button map of our amazing forum toolbar. People post some amazing questions and advice on the forums, but it doesn't have to be in plain old black and white! Let's throw a little color into our posts now and then.
Below is a image of what most of you see when you attempt to start a new thread. There may be slight variations depending on your browser, version of windows, screen size, etc, but this is the basic forum editor, set to Rich Text mode. [Note: Many of the options and buttons in this guide also appear in the text editor when you are creating your own KaBOOM! website. Keep your eyes peeled for a full guide to that text editor in the near future.]
The toolbars and buttons you see around the text box is what is commonly referred to as a WYSWIG (whiz-e-wig) editor. It stands for "What You See is What You Get". If you've ever used Microsoft Word or similar document editors, much of this will be very familiar, but there may be a few tips and tricks that could help you in your posts. So let's breakdown exactly what we are looking at.
Click for a larger image.
1. Subject Box: This is where the subject goes. It is, by far, the simplest part of this screen.
2. Edit Type: Selecting Rich Text displays a screen with all the bells and whistles you see above. The Basic Text Box is a plain white box for plain, black text and HTML editing.
3. Styles: The styles toolbar allows for some deep customization for how you text can look, but for forum use, this is over-kill. On the far right, where the picture shows "Times" is where you can choose your font and your Font size. You can select a font or size and start typing away or highlight some text and then select a font to change the look of your post. On the forums, we only allow Arial, but you can adjust the size of your text with the given options.
4. Color: The next toolbar is for font color. You can create text that looks like this and this. Or this. Even this! Beware, however, that colorized text is often difficult to read and as you continue to edit your text, can mess up the things you don't want colorized. My recommendation is to use it sparingly. Also, type the word or sentence you want to change the color of first, highlight the text with your mouse, and then select the highlight color you want. This method will makes typing text that you want to remain in black much easier.
5. Text Format: Standard stuff here. B is for BOLD. I for Italics. U is for Underline. We also have some different types of text. The letters with a line through them is called Strike-through. The x2 and the x2 are for displaying text with exponents or footnotes. Best of all is the Erase button. Simply highlight any text and click this handy button to return the text to simple black on white. Great if your creativity gets the better of you.
6. Align: This toolbar can flush your text to the left and right margins, or center it down the page. Centered text is great for thing's like poems, cheers, or song lyrics. You can also make lists with the next set of buttons. You can turn off list making by deselecting the bullet or numbered list buttons. You can also use the Increase and Decrease Indent buttons to create lists within lists or outlines.
7. Cut & Paste: These are the standard cut, copy, paste, undo, and redo options. Keyboard shortcuts for these tools also work. CTRL-X, Ctrl-C, CTRL-V, CTRL-Z, and CTRL-Y respectively.
8. Symbols: This is a cool toolbar you don't often see. The Symbols drop-down menu has just that: symbols. Use symbols like '©', '§', and more. Next to that is a button to draw a straight, horizontal line across the post. Handy for separating videos, pictures, or even ideas. The calender looking button will paste the current date and the clock next to that will paste the current time.
The next button is very important. The green ball with the chain link around it is for creating links. Highlight the text you would like to turn into a link ('click here' or 'check this out' or 'watch a video of kittens now') and click the button. A small pop-up will appear with three options. URL: Type or paste in the webpage you want to link too.Title: Optional. You can leave this blank.Target: This will determine if the link will open in a new window or in the same window. This is totally optional, so you don't have to change it all if you wish.Press 'Okay' and you've created a link! The next toolbar button will remove a link from text and the next button after that is for uploading and inserting images into a post, but we do not allow the uploading of images at this time.
We do, however, allow images to appear in posts. So if you use a photo sharing service like Photobucket, Flickr, Picasa, Kodak Web Gallery, or any of the 1001 other photo sharing sites out there, feel free to show off your pics as much as you like.
9. Table Editor: Want to share some data or a detailed schedule of events? Tables are the way to go. Click on the grid shaped button and a pop-up will appear. Enter the number of rows and columns you want to appear (don't worry you can add more later), the width of the table, etc. Cell spacing refers to the amount space in between boxes of data and Cell Padding refers to the space between the information in the box and the borders. Complicated? It can be, but play around long enough and you'll become a pro. After your table is created, you can use the rest of the toolbar's buttons to add columns, rows, and more.
10. Miscellaneous: From left to right: Preview post button, Select All (CTRL+A works too), and Clean MS Word HTML. That last button is useful if you've pasted some text from a Microsoft Word document. Word can stick unnecessary code and formatting that make things ugly. You can avoid Microsoft formatting by pasting you information into Notepad or other text editors before pasting into the Text box.
11. Text box: This is where the magic happens. Put your words, pics, videos, links- whatever your heart desires in here.
12. Design/HTML: These tabs below the text box are useful for switching between Design view and HTML view. Design view is the default, but don't be afraid to check out the HTML view. Click on the HTNL tab and you can see and use HTML code to directly edit the information you are entering, but the toolbars and buttons described above will be disabled. HTML view is especially helpful if you want to post the code to embed a video from Youtube or image from Photobucket.
13. Notification: This option appears when you are posting on the forums. When checked, you will receive an email at the address you've registered with KaBOOM! whenever someone replies to your post or thread.
14. Update/Preview/Cancel: Update will post whatever is in the text box above, Preview will give you a peek at what your post will look like once you update, and Cancel, well, cancels.
15. Forum Options: "Forum Home" returns you to the main KaBOOM! Forums page. "Search" will take you to a page to search all Forum posts. My Posts will take you to a page displaying all of the posts you've made in the past. Finally, "My Settings" directs you to a page where you can adjust how the Forum appears to you when you are logged in, a box to create a signature, and you can edit your contact information.
PHEW! That was alot! Kudos to anyone who made it through it all. I hope you all can find something in all of this text that will help you with your forum posts and on your KaBOOM! webpages. I recommend bookmarking this page for future reference or using the button below if you want to save it to an online bookmarking service.
If you've found this guide helpful, please email jcooper@kaboom.org and give me your thoughts and suggestions. We have some more ideas for guides to help everyone better use the KaBOOM! site (or any website for that matter) to help successfully complete their playground projects, so please don't hesitate to ask for help or send us a suggestion!