This is document Version 1.0, released in tandem with CMS Version 1.01.5. This document has been compiled to explain and help you to use the Brainstorm Content Management System more effectively. Below you will find a list of topics to choose from.

Table of Contents:

Overview
Logging in/out
Editing a Text Block
Simple Modifications
Text Formatting
Inserting Images, Links and Bulleted Lists
Using HTML
How to use 'tags'

Overview

The CMS system was created to allow you, the user, to make most content updates and changes at a whim from any computer with access to your website. The limits of these changes are highly dependent on how well you know the system. In the following chapters, we will discuss most of the features offered and give examples for when you might use them. Some of the features are more advanced than others, so if you have difficulty grasping certain sections, do not get discouraged. In the least, you should be able to access the system using your web browser and change text information such as contact information, text errors, etc.

Logging In and Out

In order to prevent any online visitor from changing and/or potentially harming your website, access to the cms system is restricted by a login username and password. If you haven't been given access already, contact your website administrator. The administrator should also have placed a link to the cms login page on your site. This is generally a small "login" button at the bottom of most pages. Once you reach the login page, enter your information and click to continue, you will be taken to the homepage. The computer with which you logged in will grant access to special editing privileges for one week. In order to restrict access again, find the "logout" button (likely in the same place that the login button was). If you can't find your login/logout buttons and unless noted otherwise, you can type into your browser's address bar "www.YOURSITE.com/cms" (replacing YOURSITE with the correct web address) to both login and logout of the CMS.

Editing a Text Block

This section is broken down into levels of difficulty. As you become more familiar with the tools, you may prepare yourself for more advanced use.

Once you are logged in, your website may appear slightly different. Of key importance is the "Edit bar". Under every text area that you are able to modify, there will be a white bar. On the left side of this box is a button labelled "Edit". Please note that when identifying the correct edit button to select on pages with multiple text blocks, look for the nearest white edit bar directly below that block.
When you click on the edit button, a small window should appear displaying:
1) a row of text-modification buttons (bold, italic, underline, etc);
2) a editable text area with content;
3) a row of additional tools and a "Save" button.

Simple Modifications

Most simple modifications involve default page text (specified by the web designer). To do this you need only to type the text into the text area provided and click the "Save" button. The editor window will reload, close, and reload the window you are viewing your webpage with. It is important not to interrupt the saving process, as closing the window before it closes on its own may destroy the contents of the text area. For these reasons, it is usually a good idea to do modifications to your website from a computer with a fast internet connection, although with enough patience dial-up is okay as well.

Tip: Every time you insert a carriage return (hit the enter button on your keyboard), a line break is inserted. If you don't use carriage returns, text will appear as one paragraph, wrapping as needed depending on the size of the text area.

Text Formatting

The top row of buttons in the editor window all change the way text will appear. All of the options use tags, so if you are unfamiliar with using tags, please read that section before continuing.

Most of the copy you will read on the internet is riddled with hyperlinks to other pages as well as bold, italic, and brightly colored text. These tools will allow you to change how text appears. The Bold, Italic, and Underline buttons toggle on and off when you click them.

The fourth button on the top row is similar to pressing the tab key in most word processors. It will simply indent text 15 pixels. The [tab] tag does not have a matching closing tag.

The next four buttons align sections of text to the left, center, right, and justified. A line break will always appear directly before and after each section of aligned text. The justify button is only effective in certain, newer browsers, but you can experiment with it if you like.

Directly following the alignment buttons is the font drop-down. This tool, the size tool, and the color tool may function differently depending on the web browser you are using. The most failsafe way to insert opening and closing tags for these tools is to select the style you want and (if the closing tag is not already provided) click the right-most top button, "Close Tags", to end that style.

Inserting Images, Links and Bullet Lists

The buttons below the content area in the editor window accomplish these tasks.

The "Link" button inserts a clickable "hyperlink" to another webpage. When you select this button, a small window will pop up. This is how to use it:
1) On the top row, select "Hyperlink" if you want to insert a link to another webpage, or "Email Address" if you want to insert a link to send someone email when the text is clicked.
2) Next, enter either the web address to the page you want this link to access or the email address, depending on which option you chose in step one.
3) If you are linking to another webpage, you may next choose whether the link will open a new window when clicked, or change the location of the current browser. If you selected email address in step one, ignore this.
4) Finally, enter the title of this link. This is what will appear to the visitor, and what you want them to click in order for the link to appear.
5) Click OK in the bottom-right of the link window to close it and insert the code into the editor window. You don't need to close the tags inserted.

The "Image" button inserts an image into the text area. In the version of CMS available at this writing, text will not wrap around images, but instead breaks will appear before and after. Using the image tool is similar to the link tool. Here is a description of how to use it:
1) You can either select an image already online at your website, or upload an image from your computer to the website.
2a) If you choose to insert an image from your site, browse available files in the left pane, clicking to generate a preview in the right pane. Once you have selected the image you want, click the OK button to close the image window and insert the code.
2b) If you want to insert an image located on your computer, click the "Browse" button next to "Upload File:". Find the image on your hard drive, and once it's been selected, click the "Upload" button to the right of the browse button. Click OK to finish.

The "File" button is also similar to the link and image buttons. Use this tool to insert a hyperlink to a file that you would like to offer visitors. Once the file window opens, here is how to use it:
1) At the top, choose whether you would like to browse your website (the "server") for a file to link to, or find a file on your computer to put online.
2a) If you choose to upload a file (default), follow the steps listed. Once you click upload, it may take several minutes to reload depending on how big your file is.
2b) If you choose to browse files already online, simply click the filename. You will be prompted for a link title. This is what the viewer will click on to download the file.

The "Bulleted List" button & the "Numbered List" button are used to insert a list of items. They work the same, but the code is slightly different as you'll likely notice. To use these features, click whichever you prefer and a prompt will appear. Enter an item and click ok and you will be offered to add more indefinitely. When you have entered your last item, click ok and when the prompt reappears, click cancel. The code for your list should appear.

The last button is for typing HTML Code instead of using the automated features. Using this is discussed in the next section below.

Using HTML

HTML, or HyperText Mark-up Language, is a basic mark-up language (as opposed to programming languages, which do calculations) used on all websites to display information. Using HTML along with CSS, Javascript, and other languages, you can display data and text in table layouts, floating above other text areas, and other advanced formatting. This document explains how to use tags similar to html but made simpler, however, if you wish to do advanced editing you'll need to read a tutorial on HTML. Sites like W3Schools offer all the information you might need to learn HTML and other website languages.

How to Use "Tags"

Tags are are little bits of text that the system understand and interprets. The CMS hides the tag when a text area is put on the screen for the viewer, and replaces it with the correct command.
For example, when you type [b] in the editor (or use the "Bold" button), the program interprets that and displays text after that like this!
It will keep on showing all the text throughout the page that way until you tell it to stop. To stop it, you type [/b].

The tag for links, font, color and some others have parameters like what size, what color, and what location for the link. For example, to insert an image you use [img=IMAGENAME]. Closing tags for these do not include the parameter.

The CMS Editor will automate insertion for most of these tags, however it is useful to know how to write them by hand as time goes on. Doing so will enable those who type very rapidly to insert them as needed without using the mouse. Where tags are inserted depends upon which browser you are using, and where your cursor is located. In MOST browsers, tags will be inserted where your flashing cursor is located in the text. Likewise, most browsers will insert formatting tags (such as bold, color and alignment) around selected text if you have highlighted a section. You will need to experiment to see how your browser works. In some, both the opening and closing tag will be inserted at the end of the text-block. If you click a tool and nothing appears to happen, scroll to the end of the content area to make sure. It is also a good idea to click the "close tags" button when finished editing to ensure that no tags have been left open, as this may cause layout errors.