JCE Editor

The default editor used on the USPS.org website is JCE (Joomla Content Editor.) It is a WYSIWYG editor. The editor is displayed whenever you create or edit an article.

content

Toolbars

The buttons and dropdowns on the toolbar let you execute various commands on article content, like Bold or Underline  or open a dialog for actions like inserting images or creating tables.

jcetoolbar

Placing your cursor over the toolbar buttons will displays a tool tip indicating what the button does.

Buttons in the toolbar have 3 states : Disabled, Enabled and Active.

A Disabled button will not respond if clicked and appears as a transparent version of the button. A button is disabled when the current action or cursor position is not relevant for that button, for example the Delete Table button will be disabled when no table is selected or the cursor is not within a table, and enabled when the cursor is within a table.

Most buttons are Enabled by default appearing fully opaque. An enabled button can be clicked to execute its command or open the associated dialog.

An Active button indicates that the current selection in the editor content can be edited by the buttons function. For example when an existing link is selected the Link button becomes active. When the button is clicked and the Link dialog is opened, the properties of the selected link are shown in the relevant dialog fields such as URL or Title.

Top Row (left to right)

  • Help - Help.
  • New Document - Clear the current document.
  • Undo - Undo the last action.
  • Redo - Redo the last action.
  • Bold - Apply or remove bold on selected text.
  • Italic - Apply or remove italics oo the selected text.
  • Underline - Apply or remove an underline on the selected text.
  • Strike Through - Apply or remove a strike thorough on the selected text.
  • Justify Full - format selected text to full the width of the container element.
  • Justify Center - Center align text or elements.
  • Justify Left - Align selected text or elements left.
  • Justify Right - Align selected text or elements right.
  • Blockquote - Insert or remove a Blockquote.
  • Format Select - Allows different size headings to be selected in place of the normal "paragraph" text.  It's important to view your article on the front end because the size of the heading may be different that want you see in the editor. (See Text Format examples below.)
  • Remove Formatting - removes all formatting (plain text.)
  • Cleanup HTML- Cleans up bad HTML code.

Second Row (left to right)

  • Cut - removes selected text and places it in the clipboard. This button can also be accessed form the right-click Context Menu in the editor. The shortcut key combination for the Cut action is CTRL+X on the PC or CMD+X on the Mac.
  • Copy - copies the selected text and places it in the clipboard. This button can also be accessed form the right-click Context Menui n the editor. The shortcut key combination for the Copy action is CTRL+C on the PC or CMD+C on the Mac.
  • Paste - adds text in the clipboard to the editor (removes Word formatting codes.) This button can also be accessed form the right-click Context Menu in the editor. The shortcut key combination for the Paste action is CTRL+V on the PC or CMD+V on the Mac. Depending on the browser and Paste parameter settings, this action may open a dialog box for the contents to be pasted into prior to it being pasted into the editor.
  • Paste as Plain Text - adds text in the clipboard to the editor (removes all formatting.) Linebreaks will be converted to paragraphs. Depending on the browser, this action may open a dialog box for the contents to be pasted into prior to it being pasted into the editor.
  • Indent - Indent the selected text or element
  • Outdent - Remove the indentation on the selected element
  • Ordered List - Create an ordered list (numbered list.) Drop down offers selection of number type.
  • Unordered t List - Create a unordered list (bullets.) Drop down offers a selection of bullet type.
  • Subscript - Apply or remove a subscript on the selected text. The text size will be reduced and the text set slightly below the normal line of type.
  • Superscript - Apply or remove a superscript on the selected text. The text size will be reduced and the text set slightly above the normal line of type.
  • Text Case - Change the case of the selected text. Options include Sentence case, Camel Case (capitalize first letter of each word), UPPERCASE and lowercase.
  • Insert Custom Character - Select special characters from a character map to insert in the article.
  • Font Text Color - Change the color of selected text.
  • Font Background Color - Apply and edit text background color.

Third Row (left to right)

  • Toggle Full Screen - Removes Selections at the top and site.
  • Print - Opens print dialog.
  • Find - Find text in the article
  • Insert a New Table - (Tabled Functions described more fully below.)
  • Delete Table - Deletes a table.
  • Table Row Properties - Displays table row properties.
  • Table Cell Properties - Display table cell properties.
  • Insert Row Before - Inserts a row before the selected row.
  • Insert Row After - Inserts a row after the selected row.
  • Delete Row - Deletes the selected row.
  • Insert Column Before - Insets a column before the current column.
  • Insert Column After - Inserts a column after the current column.
  • Delete Column - Deletes the selected column.
  • Split Merged Table Cells - Splits merged table cells.
  • Merge table Cells - Merges table cells

Fourth Row (left to right)

  • Toggle Guidelines/Invisible Elements - (Advanced users only)
  • Visual Control Characters On/Off - These include visual representations of non-breaking spaces.
  • Show/Hide Block Elements - (Advanced users only) A visual representation of block elements.
  • Insert Non-Breaking Space - Inserts a non-breaking space.
  • Edit CSS Style - (Advanced users only)
  • Citation - formats or removes citation formatting on the selected text. Holding the cursor over the text displays the citation.
  • Abbreviation - formats or removed abbreviation formatting on the selected text. Holding the cursor over the text displays the full name.
  • Acronym - formats or removes acronym formatting on the selected text.
  • Deletion - formats or removes deleted formatting on selected text by formatting it with a strikethrough. It is different from strikethrough in that it also stores information on when and why text was deleted.
  • Insertion - formats or removes inserted formatting on selected text by formatting it with an underline. It is different from underline in that it also stores information on when and why the text was inserted.
  • Insert/Edit Attributes - (Advanced users only)
  • Insert/Edit Anchor - Create and edit anchors.
  • Unlink - Remove the link on the selected text or element.
  • Insert/Edit Link - Insert and edit links to articles, web pages, files or e-mail addresses. (Described more fully below.)
  • Insert/Edit Image - Upload, delete, rename and insert images. (Described more fully below.)
  • Toggle Spellchecker - Spell checker using the Google Spell Checking service.
  • Insert Readmore - Inserts Readmore Break.
  • Insert and Edit Pagebreak - Insert and edit Pagebreak.

Text Format Examples

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Code

Code Sample

Creating and editing tables

Tables are created with the Insert Table button, accessed from the editor toolbar or from the right-click Context Menu in the editor.

inserttable

General Properties

  • Cols - Set the number of Columns for the table
  • Rows - Set the number of Rows for the table
  • Cellpadding - Set the space between the cell wall and the cell content
  • Cellspacing - Set the space between cells
  • Width - Set the table width in pixels, eg: 200px or percent, eg: 100%
  • Height - Set the table height in pixels, eg: 200px or percent, eg: 100%
  • Class - Set a class for the table
  • Table caption - Check or uncheck to include or remove a table caption

tables advanced

Advanced Properties (these properties are the most commonly used)

  • Frame - Select whcih parts of the tables outer borders should be visible
  • Rules - Select whcih parts of the tables inner borders should be visible
  • Language direction - Select the language direction for the table
  • Border color - Set the table border colour in hex format eg: #CCCCCC
  • Background color - Set the table background colour in hex format eg: #CCCCCC

Editing Table Rows

To edit a table row, click in the table row and click the Table Row Properties button in the editor toolbar or in the right-click Context Menu in the editor.

table row general

General Properties

  • Row in table part - Set the part of the table this row represents Table Header, Table Body or Table Footer
  • Alignment - Set the row alignment
  • Vertical alignment - Set the row vertical alignment
  • Height - Set the row height in pixels, eg: 100px or percent eg: 50%

Any changes made to the row can be applied to the selected row, all rows in the table, or all odd or even rows. Select the desired option from the list above the Update button.

Inserting a New Row

Rows can be inserted before or after the currently selected row. To select a row, click anywhere within the row.To insert a row before the selected row click the Insert Row Before button in the editor toolbar or right-click Context Menu.To insert a row after the selected row click the Insert Row After button in the editor toolbar or right-click Context Menu.

Deleting a Row

Select a row by clicking anywhere within the row. Click the Delete Table Row button in the editor toolbar or right-click Context Menu

Inserting a New Column

Columns can be inserted before or after the currently selected column. To select a column, click anywhere within the column.

To insert a column before the selected column click the Insert Column Before button in the editor toolbar or right-click Context Menu. To insert a column after the selected column click the Insert Column After button in the editor toolbar or right-click Context Menu.

Deleting a Column

Select a column by clicking anywhere within the column. Click the Delete Table Column button in the editor toolbar or right-click Context Menu.

Merging Table Cells

Click and drag in the table cells to select the cells to merge and click the Merge Table Cells button in the editor toolbar or in the right-click Context Menu in the editor.

OR

Click anywhere in a table cell and click the Merge Table Cells button to open the Merge Table Cells dialog.

merge tables

Enter the number of Cols (Columns) or Rows to merge and click Update

Splitting Merged Table Cells

Click anywhere within a merged table row or column. A row or column is merged when it occupies more cells than the row or column adjacent to it. Click the Split Merged Table Cells button in the editor toolbar or in the right-click Context Menu in the editor.

Inline Table Editing

Inline Table Editing is a browser specific function and is currently only offered by Firefox. It provides a set of tools within a table to resize tables, and split and delete table cells, columns and rows.

Tables can be resized by clicking and dragging on the resize handles.

tables inline resize

tables inline rowsTable rows can be created by clicking on the up (insert row before) and down arrows (insert row after) and deleted by clicking on the cross icon 

tables inline columnsTable columns can be created by clicking on the left (insert column before) and right arrows(insert column after) and deleted by clicking on the cross icon 

Context Menu

The context menu and be opened by right clicking in the editor.

fileuploadbutton

Link Button

linkuploadbutton

Link Tab

URL - represents the file links href attribute, or the path to the file. To add an external link, add the URL of the site you want to link to.

Text - If a text selection was made before opening the plugin this field will be filled by the selection. If the selection was any other element (an image for example), the Options section (including the Text, Layout and Class fields) will not be available. If no selection was made prior to opening the plugin, a text description of the link is required for this field.

Target - specifies where the link will open when clicked, eg: in a new browser window. External sites and documents (PDF files, etc.) should open in a new window. Internal links should open in the current window.

Article Anchors - the name of an anchor to be added to the link. Anchors are created with the anchor button.

Title - optional title for the link. This will be displayed when the viewer's mouse pointer hovers over the link.

To link to an internal location, you can use the tree menu under the search box. Click on  '+' to expand an item and '-' to close the item. You can look through menus and content (articles.)

 imagemanager

When you click on an item, the internal location is placed in the URL field. If you click on an article, a link to the article will be added to the URL field. If you click on a higher level item in the tree (i.e., Activities above), a link to the Activities page will be added to the URL field.

If you would rather search for an article instead of using the tree menu, you can enter your search criteria into the search field and click Search.

linkadvancedlearch

If you click on the Setting button right of the search button, you can limit your search. To change back to the tree menu from a search, click on the 'x' in the search box.

linkmailiconClicking on the E-Mail button will open a window to create a link to an email address.

fileuploadbuttonClicking on the Browse button, will open the File Browser window.

linkfilebrowser

From the File Browser you can see the details of a selected file. Buttons on the left will let you delete, rename, copy, cut, paste and view the file. Buttons at the top will let you create a new folder and upload a file.

Be very careful, if you rename, move or delete a file, other articles using the file will break.

Upload Dialog

upload buttonThe Upload Dialog, opened by clicking the Upload icon, is used to upload or move images from the users local machine to a chosen directory on the web server hosting the users site.

linkuploadbutton

If you do not want to drop files, you can click on the Browse button to access the files on your computer. You insert the image into your article with the Insert button on the bottom.

Image Manager

When you click on the Insert/Edit Image button, the Image Manager opens.

linkuploadbutton

With the the Image Manager you can

  • Upload images
  • Create folders
  • Rename, cut, copy, paste and delete folders and images
  • Create Rollover images
  • Insert images into articles 

You select the image you wish to add to your article from the tree menu. When you select an image, details about the image be displayed in the right window. Delete, Rename, Copy, Cut, Paste, View, and Insert buttons will be displayed on the right.

The following fields determine how the image will be displayed:

  • URL - the location of the image (automatically filled in when you make a selection.)
  • Alternate Text - text that conveys the same information as the image for situations where the image is not available to the reader, (i.e., images turned off in the browser or use of a screen reader due to a visual impairment.
  • Dimensions - displays dimensions of the image if they are changed (the image can also be resized with the white sizing squares that are displayed when you click on the image. Place the cursor on one of the squares and hold the left mouse button down while moving the cursor to re-size the image.
  • Changing the dimensions in the editor will not reduce the size of the file (decreasing the user's download time) so it should only be used for fine tuning..)
  • Alignment - determines where the image is placed in relation to the text.
  • Margin - determines how much margin should be around the image.
  • Border - determines if the image should have a border, how thick it should be, and what color it should be.

Uploading an Image

Upload Dialog

upload buttonThe Upload Dialog, opened by clicking the Upload icon, is used to upload or move images from the users local machine to a chosen directory on the web server hosting the users site.

linkuploadbutton

If you do not want to drop files, you can click on the Browse button to access the files on your computer. You insert the image into your article with the Insert button on the bottom.

Requesting a Squadron or District Roster

Only the Squadron or District Commander is authorized to request a roster from HQ (for their respective Squadron or District). This authority however, can be delegated. Lost passwords must be requested by the respective Commander (i.e.; District or Squadron).

Note that the "sqdXXX.exe" file will be returned as an attachment to a reply email, generally within a few hours, during normal business hours.

Please refer to your operating system and email program documentation for methods to save and execute files. Some email programs may remove the ".exe" extension, or provide a "file - save as..." dialog with incorrect extensions.

All changes to the squadron or district roster database files must be made by using DB2000. Please refer to the DB2000 installation and the DB2000 update help files for more information on the DB2000 program. 

The changes will be made to the national database, and an complete and updated roster file can be requested at a later date. 

If the squadron is not able to use BDU, any changes can be faxed or mailed to the national office, using the appropriate forms, available from headquarters (HQ102, HQ103, etc). 

Directories of officers, members, committees and the like, or any similar lists or files - at all levels of USPS - are to be considered strictly proprietary and not available to any outside individual, organization or agency, with the exception of the list of national officers appearing in THE ENSIGN. 

No member of USPS may use any such source for any purpose, public or private, outside the normal activities of USPS without prior approval of the Operating Committee.

 

Logon to United States Power Squadrons Member Restricted Pages

To reach pages restricted to members, you must enter your certificate number and PIN.

Member Validation

Certificate #:
PIN:



Remember these values?

If you are having problems, go to the security information pages.

If you are having trouble with the certificate number, "Clear Form" and try again. Hint, Leading Zeros should be included. A regular certificate number must be 7 characters.

Please take a minute to read the USPS Website Privacy Policy.
If you get stuck send us comments or
Contact the USPS hotline at 1-888-FOR-USPS.

Revised 13 August 2013
Copyright © 1995,2013 United States Power Squadrons® All Rights Reserved.
® United States Power Squadrons is a Registered Trademark of United States Power Squadrons, Inc.

More Articles ...