User Interface and the Toolbar

When you view the Content Editor on the Profile – Membership Directory screen, or when you create or edit a formatted description for an event, you will see a window similar to the one below:

At the top of the screen is a toolbar of buttons, with similar functions grouped logically. Underneath is the edit area, where you type text, highlight blocks, manipulate tables and images and perform other editing functions. At the bottom of edit area is another toolbar with special functions, then a word and character count.

Click the last icon on this toolbar to display a second toolbar with more advanced actions.

Many functions work on a block of text that has been highlighted by dragging the mouse cursor over the text. The editor also supports “Drag-and-Drop” to move highlighted text from one part of the page to another.

Click Save to save your changes or Cancel to discard them. You will be asked to confirm a Cancel operation. Both buttons close the window and return you to the previous screen.

Note: You should save your work every 15-20 minutes to maintain the currently logged in session. If you don’t do this, the system may close the active session and you risk losing all your work. This session timeout varies based on your level of access (for administrators, it’s 60 minutes.) The system will give you a warning approx. 5 minutes before a session is due to expire.

Working with Page Rows

On the right is a panel that allows you to insert specially formatted page rows. Page rows allow content you create to adapt to all screen sizes (tablets, mobile phones, etc.). Different combinations of columns and widths are available, as well as options to float images to the left or right of text.

Click an option to insert a row with that format into the edit panel. The panel is shown with two boxes of dashed lines; these boxes will not be displayed when you save your page. Your content is entered within the inner box; the outer box represents 10px of padding on all sides of your content.

A blank line is also entered above and below the new panel, allowing you to position the cursor so that you can add more rows or enter content that does not need to be in a row.

The following screen shot shows a custom page with multiple rows:

The current page row is highlighted. When more than one row has been added to the page, new icons appear on the side panel to move the current row up or down, or to delete it.

You should not try to delete the outer and inner boxes, since they control the edit area responsiveness. If you don’t want a specific row, cut and paste its content to a different part of the page and then click the Delete icon to remove that row.

When you edit an existing custom page that has not been updated to use this model, we will place the page’s content within a “1 box 100% Width” container. This will not affect the original content of the page.

In general, row layouts cannot be changed (unless you’re a very experienced website developer); once you have picked the set of boxes, you are stuck with them for that row.

Rows can be inserted anywhere (for example, into other rows) to form more complex layouts.

We strongly recommend that you use these page rows for all content on the page. They will ensure that your content is properly formatted for, and responsive to, mobile devices.

Toolbar Functions

Many toolbar buttons use the same icon and perform the same function as a typical word processor such as MS Word.

Top Row

Top Row Icons
Icon	Description
	Cut the highlighted text to your computer’s clipboard. The shortcut key [Ctrl-X] performs the same function.
	Copy the highlighted text to your computer’s clipboard. The shortcut key [Ctrl-C] performs the same function.
	Paste text from your computer’s clipboard at the current cursor position. The shortcut key [Ctrl-V] performs the same function. Note that the system will block attempts to paste an image copied to the clipboard because the resulting HTML would be in a binary format that many browsers cannot handle. Images should instead be uploaded to the website before they are inserted into your content using one of the other toolbar options.
	Paste text from Microsoft Word, stripping out the overly complex formatting that Word places there. Note that if you try to paste Word content using one of the other paste options (or the keyboard shortcut), the system will also strip out most Word-specific formatting because it can wreak havoc on a well-formatted HTML page.
	Paste plain text from another application. The editor will strip out any complex formatting it finds.
	Paste text in as HTML. The editor will convert the text into simple HTML before pasting.
	Undo one or multiple changes. The shortcut keys [Ctrl-Z] and [Alt-Backspace] perform the same function. Click the reverse arrow to undo the last change or the small down arrow to select which changes to undo.
	Redo the previous Undo. The shortcut key [Ctrl-Y] performs the same function. Click the forward arrow to redo the last undo, or the small down arrow to select which undo point to reverse.
	Strip selected formatting options from the highlighted text. A small drop-down menu will appear, allowing you to choose exactly what should be stripped.
	Left Align the current line or block.
	Center Align the current line or block.
	Right Align the current line or block.
	Fully Justify the current line or block. The editor will insert additional spaces to line up both the left and right margins.
	Unjustify the current line or block. The editor will revert to left justified text, removing any spaces inserted to create fully justified text.
	Indent the current line or block 1 tab stop.
	Outdent the current line or block 1 tab stop.
	Insert or format a table at the current cursor position. A drop-down menu will appear allowing you to paint the rows and columns in the table and to specify other options.
	Click to insert a hyperlink to another ClubExpress module, an external website, an email address or an anchor (bookmark within a page.) The shortcut key [Ctrl-K] performs the same function.
	Break the current hyperlink, removing the special linking code behind the scenes, The current hyperlink will revert to standard text. The shortcut key [Ctrl-Shift-K] performs the same function.
	Insert a photo from among photos uploaded to the site.
	Insert an image from your graphics library and other club-level photos (for example, logos).
	Insert a Group Box (FieldSet). This is a special HTML element that allows you to collect and organize other elements.
	Insert a Special Symbol. Click the small drop-down arrow to display a popup window of special characters. Click a character to insert it in your text.
	Insert an audio, video or Flash image, or a reference to a YouTube or Vimeo video.
	Insert a “smiley” (aka an “emoticon”), a small graphic to indicate an emotion. Click the small drop-down arrow to display a popup window of smileys. Click one of them to insert it in your text.
	Create and insert a widget.

Second Row

Second Row Icons
Icon	Description
	Click the drop-down arrow to see a list of built-in styles. Selecting a style ensures that your headings match the styles used elsewhere in ClubExpress. The change applies to the current line or block. You can add your own styles to this list, to maintain consistency in the look and feel of your pages. This is done using the View/Edit Custom CSS option on the Appearance screen.
	Click the drop-down arrow to see a list of standard fonts and custom fonts that you have added to your website. The change applies to the current line or block.
	Click the drop-down arrow to select a text size. You will see a list of sizes based on pixels; 12px is the standard size.
	Click to bold the current block of text or to start bolding from the cursor position. [Ctrl-B] also works.
	Click to italicize the current block of text or to start italicizing from the cursor position. [Ctrl-I] also works.
	Click to underline the current block of text or to start underlining from the cursor. [Ctrl-U] also works.
	Click to convert the highlighted text to lower case.
	Click to convert the highlighted text to UPPER case
	Click to convert the highlighted text to ^superscript
	Click to convert the highlighted text to _subscript
	Click to select the text (foreground) color. A color picker showing standard colors will be displayed. You can also define custom colors and add them to the palette. Your change applies to the current block of text or at the cursor position.
	Click to select the background color. The same color picker described above is displayed.
	Click to display a popup Style Builder dialog. This dialog allows you to specify complex style information for the selected text.
	Click to begin a numbered list of items.
	Click to begin a bulleted list of items.
	Click to insert a horizontal rule across the page.
	Spellcheck your text. A popup dialog will appear to highlight misspellings and other errors. See the section below for more details. The shortcut key [F7] performs the same function.
	Find text on the current page or find and replace. The shortcut key [Ctrl-F] performs the same function.

Options at the Bottom

Bottom Row Options
Icon	Description
	Design View. This is the normal view where you write your text and use the shortcut keys and toolbar buttons to insert options and format your text.
	HTML View. This view allows you to see and edit the underlying HTML source code.
	Preview. This view allows you to see the page as it will generally look when it’s being viewed.
	Full Screen Mode. This mode makes the edit box slightly larger by hiding all non-editor controls.
	Zoom. Click the drop-down arrow to zoom your text in to see more detail or out to see more of the page.
	Print. Click this icon to print the current page being edited.
	Displays an approximate word and character count for the current document.

Summary of Shortcut Keys

Keyboard Shortcuts
Shortcut	Description
Ctrl-X	Cut the highlighted text to the Clipboard
Ctrl-C	Copy the highlighted text to the Clipboard
Ctrl-V	Paste from the Clipboard at the cursor position
Ctrl-B	Bold the highlighted text or start/stop bolding
Ctrl-I	Italicize the highlighted text or start/stop italics
Ctrl-U	Underline the highlighted text or start/stop underline
Ctrl-Z	Undo the last operation
Ctrl-Y	Redo the last operation
Ctrl-F	Find or Find and Replace
Ctrl-A	Select All - highlight everything
Ctrl-P	Print the text in the window
Ctrl-K	Insert Hyperlink at the cursor
Ctrl-Shift-K	Break the hyperlink at the cursor
F7	Launch the Spellchecker
F1	Display popup help for the editor
Ctrl-W	Close the editor window