Region One DeMolay Website Management System Prepared by BiGiSolutions.com

Transcription

1 Region One DeMolay Website Management System Prepared by BiGiSolutions.com Your website Domain Name: Your Site Manager Name: Your Site Manager Address: The original purpose of this project was to cover some basic issues. First, to enhance the level of stability and security of the websites for the participating Jurisdictions. Second, adding a level of integration and teamwork amongst the current programmer talent available to the Jurisdictions. Third, to facilitate end user management of most all of the content of the sites. Fourth, to resource pool such that all Participating Jurisdictions would benefit from features and enhancements at extremely cost effective pricing. This document covers the management of the website and all of the functions available to the end user without programming level abilities. There are other features and enhancements available to those with programmer level abilities which are explained separately when requested. The first step to managing your site is to go to this site, and enter your previously supplied username and password. If you do not already have a username and password, contact your site manager and request access. They will confirm your authority level and add you to the system. Document Revision Formats To ensure that you can determine the latest versions of this document, the following revision naming convention will be used for this document: Document name/wms-rev(dd.mm.yyyy)(a-z) Example (to appear in the bottom left corner of each page: Website Management System/WMS-rev A Website Management System/WMS-rev A Page 1 of 49

2 Table of Contents Introduction to Articles... 4 News Articles... 5 Adding new News Articles... 5 Uploading an Image for use in an article... 6 Inserting an Image in an article... 7 Uploading a File for use in an article... 7 Inserting a Link to a file in an article... 8 Editing News Articles... 8 Events... 9 Adding new Events... 9 Uploading an Image for use in an Event Inserting an Image in an Event Uploading a File for use in an Event Inserting a Link to a file in an Event Editing Events Dynamic or Editable Pages and Menu Items Main Menu Items creation Main Menu Items deletion Sub Menu Items creation Sub Menu Items deletion Front Page Footer Google Calendar Link and Front Page Agenda To setup Google Calendar To add an event To add a recurring event such as a regular Chapter meeting To add an event to a different Calendar Picassa Link and Front Page Slide Show User Management To Add a new User To Edit a new User To Delete or Remove access for a user The Chapters page To Add a new Chapter To Edit a Chapter To Delete or Remove a Chapter Explanation of the icontact Integration To add a link to an icontact message for an Article on the web site Explanation of the Facebook Integration New Article Editor Options Text Styling Text Layout Rich Text Form Elements Inserting Images Image Info Website Management System/WMS-rev A Page 2 of 49

3 Image manipulation Link Upload Advanced Links Links and s Link Type: URL Link Info Target Upload Advanced Link Type: Link to anchor in the text Link Type: Removing a Link Anchors Removing an Anchor New Undo Function New Copy Article Function New Copy Article From Another Site New Front Page Java Slide Show Revision History Covered in separate documents are: Online Education System -File Share Resource System Website Management System/WMS-rev A Page 3 of 49

4 Introduction to Articles The CMS (client management system) allows users with different levels of access to create and maintain the content of their respective web sites. The fundamental component of this system is based on articles. Everything is an article and different articles are handled or displayed in different ways. The system has no audit capabilities which means you can put information about an upcoming event in the news section for publicity, as long as you understand what will and will not happen to this article. News articles appear on the site under the left hand menu button labelled What s New. The articles are displayed in reverse order of date submitted, meaning the most recently posted article will appear at the top of the list. Further to this the top five most recent news articles also appear on the front or home page in the center window. News Articles do not leave the display of the system, and can be set to a status of archived to be moved to the history area. Event articles appear on the site under the left hand menu button labelled Activities. The articles are displayed in order of date of occurrence, meaning the event to happen the closest to today s date will appear at the top of the list. Further to this the top three closest Events also appear on the front or home page in a box on the right hand side below the Google Calendar agenda view. Event Articles follow the rule if today s date is after the end date, do not display the event on the live site. Editable Pages refer to the entire menu system and the content of those pages being dynamic or changeable. In most all cases of Main Menu and Sub Menu items, the Article Title becomes the menu button name and the Article Details becomes the content of the page. Editable Pages use the date submitted to determine the order of the menu items. Website Management System/WMS-rev A Page 4 of 49

5 News Articles News articles appear on the site under the left hand menu button labeled What s New. The articles are displayed in reverse order of date submitted, meaning the most recently posted article will appear at the top of the list. The display shows the date and the Title of the article. At the bottom of the screen is a link to access the news archives. This is where older articles with their Status set to archived will appear. Further to this the top five most recent news articles also appear on the front or home page with the Title in bold first, which is a link to read the rest of the article, followed by the date of submission, followed by the first 500 characters, html markup included (or 1000 characters for icontact articles) of the article, followed by a link Read more allowing the user to select to read the rest of the article. Adding new News Articles To add a new News Article, click on Articles then Add Article. You must enter; Article Title which displays on the front Home page and the What s New page Author Name which should be filled in by default with your name as the logged in user. Article Details this is the content of the article You *must* scroll to the bottom and click Add or Save as indicated to save your work The following fields have no effect on an article for the News section: Start Date End Date Persistent Event Author All other fields are optional. Other notes; You *must not* select a Category. This must remain as None for news articles. You *must not* set "Display as event" without also selecting "Display with news" in order for an article to appear in the News section. Status must be set to "Approved" for the article to appear in the News section. o Applicable Options are; Approved means it will appear on the live site Pending Approval means it will not appear on the live site and is in a draft stage Website Management System/WMS-rev A Page 5 of 49

6 Denied means this article is not to be displayed and is to be deleted Archived means this article will appear in the archived section Language must be set to the appropriate language for the article. Image Upload (becomes Associated Image on the edit page) will allow you to upload an image to be displayed with the article. o Click on Choose File or Browse (actual button text will vary from browser to browser) o Select the appropriate image to upload it with the article. o The upload occurs when you click Add Article at the bottom of the screen. The front page shows the article's Title in a header bar, followed by Date Submitted, followed by a portion of the Article Details, followed by a link to the full article, for the five articles of the appropriate language with the most recent Date Submitted. The News page shows the article's Date Submitted, followed by the Associated Image as a 100x75 thumbnail on the left, followed by the Title (as a link to the full article) and the Summary on the right, for all articles of the appropriate language, in order from most to least recent Date Submitted. The image thumbnail size can be changed under Control Panel/Article Settings in the Article Thumbnail Max Width and Article Thumbnail Max Height. The full article page shows the article's Associated Image as a 200x150 image (clickable to full size in a popup window) on the left, followed by the Article Details on the right and flowing underneath. The image size can be changed under Control Panel/Article Settings in the Article Image Max Width and Article Image Max Height. In the Article Details section, you have the functions to adjust the formatting of the text layout. It is in your best interests to not copy and paste from Microsoft Word to this box. If you must use Microsoft Word to create your copy, at the end click File and click Save As and select a plain text format. You can copy and paste from this plain text file just created. You can highlight a section of text and change the font to any of the fonts listed. You can change the size, Bold, Italic, Underline, left center right and justify text. Generally speaking Justified Text looks the best on the web site. If you are desirous of getting very creative, we recommend using an html editor and reading the next paragraph. In the Article Details section, you have the option at the bottom of the box to select View Source <body>. Selecting this will change the displayed information from wysiwyg to html coding. This is for advanced users who are familiar with web site coding by hand. Changes in html view don't get saved unless you actually switch back from html to wysiwyg view before saving. The html view is a separate editor and it's the wysiwyg version that actually gets saved, so the changes in html view need to be "saved" back to the wysiwyg view. Uploading an Image for use in an article Image Upload will allow you to upload an image or picture to be linked with the article. Click on Files then Upload Images and a new screen will appear. Click on Browse (actual button text will vary from browser to browser) Website Management System/WMS-rev A Page 6 of 49

7 Select the image on your computer, left click it once to select it, left click open (depending on browser) Click Upload File and wait until it says The file insertpicname.jpg has been uploaded. o The Name of an image is important to be able to easily identify the picture by it s name. o The size of the image is important and you must resize the image before you upload it. o Typically you will use less than 300 x 300 for the size of the picture to include in an article. o As you get used to using the system these numbers will make more sense to you. o o If the upload fails it could be because your space if full. Please check with support If the upload times out or is taking a long time, it may be because the file is too big and / or your internet connection is slow. You can manage your images by clicking on Files then Manage Images and a new screen will appear. When adding or editing an article, the image will be displayed under the Article Details in a section labelled Insert Image Inserting an Image in an article Left click once in the article text to place your cursor where you want the picture to be Next left click the specific image You *must* scroll to the bottom and click Add or Save as indicated to save your work Note: for advanced training users, you can edit article using view source and add one of the tag lines adjusting the border, height and width to suit the article and the picture inserted style= padding-left: 5px; align="right" border="0" height="430" width="410" OR style= padding-right: 5px; align="left" border="0" height="430" width="410" ie. <img src="/ss/files/images/tree.jpg" style="padding-right: 10px; width: 189px; height: 309px;" align="left"> Uploading a File for use in an article File Upload will allow you to upload a PDF or other file to be linked with the article. Click on Files then Upload File and a new screen will appear. Click on Browse (actual button text will vary from browser to browser) Select the file on your computer, left click it once to select it, left click open (depending on browser) Click Upload File and wait until it says The file insertfilename.pdf has been uploaded. o The Name of a file is important to be able to easily identify the file by its name. o Consider including revision date in the name o The size of the file is important and should be a pdf file if at all possible. Website Management System/WMS-rev A Page 7 of 49

8 o If the upload fails it could be because your space if full. Please check with support o If the upload times out or is taking a long time, it may be because the file is too big and / or your internet connection is slow. You can manage your files by clicking on Files then Manage Files and a new screen will appear. When adding or editing an article, the image will be displayed under the Article Details in a section labelled Insert File Inserting a Link to a file in an article Highlight the text, word or phrase, in the article where you want the file to be linked Next left click the specific file You *must* scroll to the bottom and click Add or Save as indicated to save your work Editing News Articles To edit an existing News Article, click on Articles then Manage Articles. This screen shows you a listing of all Approved articles, both News and Upcoming Events (covered in the next section). Click on the Edit article button on the far right hand side, to open that article for editing. All the fields are the same relative to the adding process, with the addition of the Date Submitted field. If you click on the calendar icon to the right, it will display a calendar view that allows you to change the date of this Articles submission. This allows for backdating a news article submitted late preserving the continuity of reporting. You *must* scroll to the bottom and click Add or Save as indicated to save your work. Website Management System/WMS-rev A Page 8 of 49

9 Events Event articles appear on the site under the left hand menu button labelled Activities. The articles are displayed in order of date of occurrence, meaning the event to happen the closest to today s date will appear at the top of the list. The display shows the Title of the article and the Start Date as posted when the event was added. Events, whose End Date, as posted when the event was added, is past today s date, will be changed automatically from an Upcoming Event to an OLD EVENT (in red letters), and will be removed from the public view. This prevents a user from forgetting to remove a past event from the system and causing confusion amongst the public. Further to this the top three closest Events also appear on the front or home page in a box on the right hand side below the Google Calendar agenda view. The Title is bold with a link to the full Event details, followed by the start date, followed by the content of the article including any inserted graphics. Adding new Events To add a new Event, click on Articles then Add Article. You must enter; Article Title which displays on the front Home page and the Activities page Author Name which should be filled in by default with your name as the logged in user. Author which should be filled in by default with your address as the logged in user. Article Details this is the content of the article Start Date is the date the event will start End Date is the date the event will end Persistent Event If this is selected, the Start and End dates will not be used and the event will stay on display. Display with News will display this event in the event section as well as in the news section. The Date Submitted rules will apply to the What s New section The Start Date and End Date rules will apply to the Activities section You *must* scroll to the bottom and click Add or Save as indicated to save your work Other notes; You *must not* select a Category. This must remain as None for Events. You *must* select (check) "Display as event" in order for an article to appear in the Activities section (and not the news Section) Status must be set to "Approved" for the event to appear in the Activities section. Website Management System/WMS-rev A Page 9 of 49

10 o Applicable Options are; Approved means it will appear on the live site Pending Approval means it will not appear on the live site and is in a draft stage Denied means this article is not to be displayed and is to be deleted Archived means this article will not appear but is stored in the archive section for future reference Language must be set to the appropriate language for the article. Image Upload (becomes Associated Image on the edit page) will allow you to upload an image to be displayed with the article. o Click on Choose File or Browse (actual button text will vary from browser to browser) o o Select the appropriate image to upload it with the article. The upload occurs when you click Add Article at the bottom of the screen. The Activities page shows the Associated Image as a 200x150 image (clickable to full size in a popup window) on the left, followed by the Title, the events Start Date, followed by the content on the right and flowing underneath, for all articles of the appropriate language, in order from soonest to distant based on Start Date. The image thumbnail size can be changed under Control Panel/Article Settings in the Article Image Max Width and Article Image Max Height. In the Article Details section, you have the functions to adjust the formatting of the text layout. It is in your best interests to not copy and paste from Microsoft Word to this box. If you must use Microsoft Word to create your copy, at the end click File and click Save As and select a plain text format. You can copy and paste from this plain text file just created. You can highlight a section of text and change the font to any of the fonts listed. You can change the size, Bold, Italic, Underline, left center right and justify text. Generally speaking Justified Text looks the best on the web site. If you are desirous of getting very creative, we recommend using an html editor and reading the next paragraph. In the Article Details section, you have the option at the bottom of the box to select View Source <body>. Selecting this will change the displayed information from wysiwyg to html coding. This is for advanced users who are familiar with web site coding by hand. Changes in html view don't get saved unless you actually switch back from html to wysiwyg view before saving. The html view is a separate editor and it's the wysiwyg version that actually gets saved, so the changes in html view need to be "saved" back to the wysiwyg view. Uploading an Image for use in an Event Image Upload will allow you to upload an image or picture to be linked with the event. Click on Files then Upload Images and a new screen will appear. Click on Browse (actual button text will vary from browser to browser) Select the image on your computer, left click it once to select it, left click open (depending on browser) Click Upload File and wait until it says The file insertpicname.jpg has been uploaded. Website Management System/WMS-rev A Page 10 of 49

11 o The Name of an image is important to be able to easily identify the picture by it s name. o The size of the image is important and you must resize the image before you upload it. o Typically you will use less than 300 x 300 for the size of the picture to include in an article. o As you get used to using the system these numbers will make more sense to you. o If the upload fails it could be because your space if full. Please check with support o If the upload times out or is taking a long time, it may be because the file is too big and / or your internet connection is slow. You can manage your images by clicking on Files then Manage Images and a new screen will appear. When adding or editing an article, the image will be displayed under the Article Details in a section labelled Insert Image Inserting an Image in an Event Left click once in the article text to place your cursor where you want the picture to be Next left click the specific image You *must* scroll to the bottom and click Add or Save as indicated to save your work Note: for advanced training users, you can edit article using view source and add one of the tag lines adjusting the border, height and width to suit the article and the picture inserted style= padding-left: 5px; align="right" border="0" height="430" width="410" OR style= padding-right: 5px; align="left" border="0" height="430" width="410" ie. <img src="/ss/files/images/tree.jpg" style="padding-right: 10px; width: 189px; height: 309px;" align="left"> Uploading a File for use in an Event File Upload will allow you to upload a PDF or other file to be linked with the event. Click on Files then Upload File and a new screen will appear. Click on Browse (actual button text will vary from browser to browser) Select the file on your computer, left click it once to select it, left click open (depending on browser) Click Upload File and wait until it says The file insertfilename.pdf has been uploaded. o The Name of a file is important to be able to easily identify the file by its name. o Consider including revision date in the name o The size of the file is important and should be a pdf file if at all possible. o If the upload fails it could be because your space if full. Please check with support o If the upload times out or is tacking a long time, it may be because the file is too big and / or your internet connection is slow. Website Management System/WMS-rev A Page 11 of 49

12 You can manage your files by clicking on Files then Manage Files and a new screen will appear. When adding or editing an article, the image will be displayed under the Article Details in a section labelled Insert File Inserting a Link to a file in an Event Highlight the text, word or phrase, in the article where you want the file to be linked Next left click the specific file You *must* scroll to the bottom and click Add or Save as indicated to save your work Editing Events To edit an existing Event, click on Articles then Manage Articles. This screen shows you a listing of all Approved articles, both News (covered in the previous section) and Upcoming Events. Click on the Edit article button on the far right hand side, to open that article for editing. All the fields are the same relative to the adding process, with the addition of the Date Submitted field. If you click on the calendar icon to the right, it will display a calendar view that allows you to change the date of this Articles submission. This has no function unless you have selected Display with News also, and then it allows for backdating the event to preserve the continuity of reporting. You *must* scroll to the bottom and click Add or Save as indicated to save your work. Website Management System/WMS-rev A Page 12 of 49

13 Dynamic or Editable Pages and Menu Items The entire menu is dynamic other than the Home Page link which is static, and the fact that there are 4 Main Menu items with Sub Menu links. In all cases of Main Menu and Sub Menu items, unless they are following the Summary Field rules (below), the Article Details becomes the content of the page. Main Menu Items creation To add a Top level menu item, follow the instructions for adding a new News Article using the following settings; - Status is set to Editable Pages - Title is used as the label of the menu button - Title will also appear on the top of the content if it is a single page - Summary must be blank unless it is; o to be a direct link to another internal web page, will have the web page url in the Summary field. o to be a direct link to another external web page, and is to open in a new window, will have the url in the Summary field, and must include or o not to open a page at all when clicked (for example, sub-menu headers), in which case it must contain # only. - The Author Name field must not be changed for existing top-level menu items. - The Author Name field must be none for new top-level menu items. - Items have a Category of "Top-Level Menu" - Items will appear in the order of the Date Submitted - You *must* scroll to the bottom and click Add or Save as indicated to save your work Main Menu Items deletion To remove a Main Menu item, edit the Editable Page and change the Status to Pending Approval and save the change. You *must* scroll to the bottom and click Add or Save as indicated to save your work. Sub Menu Items creation To add a Sub Menu item, follow the instructions for adding a new News Article using the following settings; Sub Menu items have the following settings; - Status is set to Editable Pages - Title is used as the label of the menu button - Title will also appear on the top of the content if it is a single page Website Management System/WMS-rev A Page 13 of 49

14 - Summary is left blank unless it is linking to another page. - The Author Name is not used at all for sub menu items and can contain any value. - Items will have a Category that matches top-level menu they will be nested under - Items will appear in the order of the Date Submitted - You *must* scroll to the bottom and click Add or Save as indicated to save your work Sub Menu Items deletion To remove a Main Menu item, edit the Editable Page and change the Status to Pending Approval and save the change. You *must* scroll to the bottom and click Add or Save as indicated to save your work. Front Page Footer The Page Footer on all pages comes from the data entered under Control Panel Site Settings. Website Management System/WMS-rev A Page 14 of 49

15 Google Calendar Link and Front Page Agenda On the Main Menu is a button Calendar which is a direct link to your Google Calendar with the calendars you have requested to be listed by default. On the Front or Home page on the right hand side under the Picassa slide show is a Google Calendar Agenda View with the calendars you have requested to be listed by default. The recommendation is to setup a calendar for the Jurisdiction, one for each Chapter, and one for Masonic Family related events. The Calendar view on the front page can be set for any combination of these calendars, but it also allows for separate display of information. This will allow the Region One website Calendar to be a combination of only the Jurisdictional calendars, and not include chapter information or Masonic fraternity events specific to your jurisdiction. To setup Google Calendar we recommend you use a separate address so the administration can be handed off without compromising a personal address. first create an address (forwarder) for your jurisdiction such as dap@demolayatlantic.org create an address (forwarder) for each chapter in your jurisdiction such as pdc@demolayatlantic.org go to and click Create an Account enter the address created above, and a password for the Calendar. Un-check Stay Signed In Un-check Enable Web History Name the calendar with the Jurisdiction or Chapter name first name Phil Drader Coronation last name Chapter, DeMolay Set the location to your city and state Set your time zone to Eastern Set your DOB Feb Enter the word verification Click the I accept. Create my account You will need to check your and confirm you actually wish to sign up for the Google account. Go back to and sign in as your new account Click the little sprocket in the top right corner and select Calendar Settings Change week starts on to Sunday Change the default view to Month Enter Location as the normal address of your chapter meetings or the town / city / state used as a base of operations Click save Click the little sprocket in the top right corner and select Calendar Settings Click on the Calendars tab Website Management System/WMS-rev A Page 15 of 49

16 Click on Share this Calendar and turn on sharing Check Make this calendar public Share with with permissions to Make changes and manage sharing. Click Add Person. Click save Click yes to confirm warning message Click the little sprocket in the top right corner and select Use Classic Look The IT Staff will assist in adding the link to your web site. Please for assistance. To add an event First go to the website and add the event to the main system (pg 8 Adding New Events) While you are adding or editing the article go to the line at the top of your browser window and look for a line like this { } Make note of the number at the end of the line, in this example 74 go to Sign in with your address provided for your chapter, and the associated password. On the left hand side click Create Event Fill in the blanks as above with as much information as you have available. In the details section paste this line replacing the number o do not include the o at the beginning of the line o o o o be sure to change the medemolay.net to reference your specific site for example nhdemolay.net or ctdemolay.net <a href=" here for more details</a> For an RSVP in the entry, in the details section paste this line replacing the o do not include the o at the beginning of the line o be sure to change the address to reference your event coordinator o o RSVP Please <a href="mailto: winterfest@ctdemolay.net " target="_blank"> winterfest@ctdemolay.net </a> o Scroll to the bottom and click Save To add a recurring event such as a regular Chapter meeting go to Sign in with your address provided for your chapter, and the associated password. On the left hand side click Create Event Fill in the blanks as above with as much information as you have available. Click to check the box Repeat Enter the first date in September of the year and complete the rest of the information as shown. Most Chapter regular meetings are 1 per month for 10 months excluding July and August. Website Management System/WMS-rev A Page 16 of 49

17 Click Done Scroll to the bottom and click Save To add an event to a different Calendar go to Sign in with your address provided for your chapter, and the associated password. On the left hand side click Create Event Fill in the blanks as above with as much information as you have available. beside Calendar click the drop down and select the alternate Calendar Click Done Scroll to the bottom and click Save ** Important Note, it is not proper etiquette to add something to someone else s calendar without their permission. If you have been granted access to another calendar, Before making an entry on their Calendar, please ensure you have permission to do so. Picassa Link and Front Page Slide Show On the Main Menu is a button Photos which is a direct link to your Picassa account and the albums you have listed. Once you have the Google Account created, you can add the Photos application to the account which gives you a photo album. You can create several different albums and upload pictures. You can give others access to this account and allow them to also upload photos. On the Front or Home page in the top right hand corner is a Picassa slide show pulled from images you place in a specific named album in your Picassa account. In your Picassa account do not remove the front_web_page_slides album. All pictures you place in that album will appear on the front page of the web site. The slideshow will only appear if the album is set to "Public for the web". Please ask if you require assistance. bill@bigisolutions.com for assistance. Website Management System/WMS-rev A Page 17 of 49

18 User Management The entire management system as outlined in this document is based on having a valid user name and password to access the different levels of data entry. To Add a new User To add a new User, click on Users then Add User. For each User you must enter; Username is the user name that will be used by this user for the Jurisdiction, not for the chapter (explained in the next section) Password goes with the username Access Level should be set based on the level of the user being entered o Members can change their own settings and can view but not edit other o Authors can view the list of articles and submit new articles, can edit articles they have written, but cannot edit others articles, nor can they approve any articles. o Editors can write edit and approve all articles o Admins can do all of the above plus view add and edit users should be the forwarder address of the user as setup by the Jurisdiction. We recommend you use a forwarding address to help prevent spam bots from gathering a personal address. User Info - is relative to the user being who they are. User Organization - Not necessary Website Not necessary List this user on the Users page? must NOT be checked Signature - Not necessary You *must* scroll to the bottom and click Add or Save as indicated to save your work. To Edit a new User To edit a User, click on Users then Manage Users. For each User you can; Edit User allows you to access all the information as previously set for the user You *must* scroll to the bottom and click Add or Save as indicated to save your work. Reset Password allows you to change a user s password if they forget it. Users are able to change their own passwords when they wish. To Delete or Remove access for a user To Delete or Remove access for a User, click on Users then Manage Users. Website Management System/WMS-rev A Page 18 of 49

19 Reset Password allows you to change a user s password to something they do not know thus preventing them access. The Chapters page The top section shows the contents of the details from the Chapters editable page, underneath that is a 3-column alphabetical list of links to chapter sections, underneath that is a list of chapter names and details separated by horizontal rules. To Add a new Chapter To add a new Chapter, click on Users then Add User. For each chapter you must enter; we recommend you use a separate address so the administration can be handed off without compromising a personal address. create an address (forwarder) for each chapter in your jurisdiction such as pdc@demolayatlantic.org You can use the same address as created for the Google Calendar Username is the user name that will be used if the chapter has someone to update their information Also the username is used as a link from the top section to the individual chapter on that page Password goes with the username Access Level should be set as member (see Website User section) User Info - is shown as the chapter details Avatar is a graphic image to be associated with the Chapter and is displayed left aligned (should be less than 200px x 150 px) To add an avatar to a chapter, you must add it first and save it, and then edit the Chapter and the option to add the avatar will be available. User Organization - is the name of the Chapter as the page header on the Chapter Details page Website is the url of the external website of the chapter if they have one List this user on the Users page? must be checked for this chapter to appear Signature - follows as the page body, starting on the right side of the Avatar (if present) and flowing underneath If the Signature is not empty, the Chapter Name (User Organization) becomes a link to a Chapter Details (User Info) page (see above description) If the Website is not empty, the Chapter Name (User Organization) becomes an external link to the Website URL You *must* scroll to the bottom and click Add or Save as indicated to save your work. To Edit a Chapter To edit a Chapter, click on Users then Manage Users. For each Chapter you can; Website Management System/WMS-rev A Page 19 of 49

20 Edit User allows you to access all the information as previously set for the Chapter You *must* scroll to the bottom and click Add or Save as indicated to save your work. Reset Password allows you to change a Chapter s password if they forget it. Users are able to change their own passwords when they wish. To Delete or Remove a Chapter To Delete or Remove a Chapter, click on Users then Manage Users. Find the specific Chapter in question and click Edit User on the right hand side List this user on the Users page? Uncheck for this chapter to not appear You *must* scroll to the bottom and click Add or Save as indicated to save your work. Website Management System/WMS-rev A Page 20 of 49

21 Explanation of the icontact Integration Some Jurisdictions have opted to use an icontact account for distributing their newsletters and other communications as desired. Your icontact will be configured with a special interface to allow s sent via icontact to automatically be posted to your news system on the web site. bill@bigisolutions.com for assistance. To add a link to an icontact message for an Article on the web site It is the desire of all jurisdictions to increase the amount of traffic their website receives. One important way to do this is to add links to your website everywhere you can. When using icontact to distribute information about an upcoming event or news on a recent event, you should include enough information to wet their appetite and then include a link to the full article on your web site. This may take a bit of help in determining exactly how much or how little to include in the icontact message. Please ask for assistance. First go to the website and add the event to the main system ( Website Management System/WMS-rev A Page 21 of 49

22 Events - Adding new Events) or (Introduction to Articles The CMS (client management system) allows users with different levels of access to create and maintain the content of their respective web sites. The fundamental component of this system is based on articles. Everything is an article and different articles are handled or displayed in different ways. The system has no audit capabilities which means you can put information about an upcoming event in the news section for publicity, as long as you understand what will and will not happen to this article. News articles appear on the site under the left hand menu button labelled What s New. The articles are displayed in reverse order of date submitted, meaning the most recently posted article will appear at the top of the list. Further to this the top five most recent news articles also appear on the front or home page in the center window. News Articles do not leave the display of the system, and can be set to a status of archived to be moved to the history area. Event articles appear on the site under the left hand menu button labelled Activities. The articles are displayed in order of date of occurrence, meaning the event to happen the closest to today s date will appear at the top of the list. Further to this the top three closest Events also appear on the front or home page in a box on the right hand side below the Google Calendar agenda view. Event Articles follow the rule if today s date is after the end date, do not display the event on the live site. Editable Pages refer to the entire menu system and the content of those pages being dynamic or changeable. In most all cases of Main Menu and Sub Menu items, the Article Title becomes the menu button name and the Article Details becomes the content of the page. Editable Pages use the date submitted to determine the order of the menu items. Website Management System/WMS-rev A Page 22 of 49

23 News Articles - Adding new News Articles) While you are adding or editing the article go to the line at the top of your browser window and look for a line like this { } Make note of the number at the end of the line, in this example 74 go to your icontact account Create your for distribution as you normally would. In the body of the message paste this line replacing the number o do not include the o at the beginning of the line o o o o be sure to change the medemolay.net to reference your specific site for example nhdemolay.net or ctdemolay.net <a href=" here for more details</a> Website Management System/WMS-rev A Page 23 of 49

24 Explanation of the Facebook Integration The overall plan is for each jurisdiction to have an icontact account for distributing their newsletters and other communications as desired. The integration between icontact and Facebook allows for anything sent via icontact, to automatically be posted to your Facebook page, reducing the numbers of steps required to cover all the distribution media at our disposal. Further to this, there is a youth protection policy that suggests adults should not friend request youth on Facebook. Adults are allowed to accept friend requests if initiated by the youth, however there are times when we as adults may forget our duty as an advisor in DeMolay to always try to set the example. Some adults in the past have posted to their personal Facebook wall comments, items, links, and other things that may not be suitable for a younger audience, and may or may be considered not to follow the 7 cardinal virtues. To facilitate the ability to friend request and to break the need for a link between a space where an adult can if he or she chooses to exercise the rights to freedom of speech, the intention is to create a Facebook user in the name of your jurisdiction or your chapter. The user name should be an forwarder and it should be forwarded to at least two adults and any youth involved in maintaining the page, who each have the password. This Facebook user can then friend request to everyone, knowing the posts on this account will always be in the light of the 7 cardinal virtues, and any posts to this account will be forwarded to more than one person. Use the process on Facebook to create a new user PAGE with a first name Atlantic Provinces (insert your name) last name DeMolay with an address dap@demolayatlantic.org (insert your newly created forwarder) enter a password and a date of birth of Feb This user name and password is required by the person configuring the integration between icontact and Facebook. Then issue a Friend request to your existing Facebook user account and accept it. Then issue a Friend request all the friends of your first account. Do it at a time as there is a limit to the number of friend requests Facebook will allow at any one time. It would be the intention to add this user to the group page for the jurisdiction, and make it an admin of the group. Management of the group would happen through this new user account. Website Management System/WMS-rev A Page 24 of 49

25 New Article Editor Options A new editor screen with many new options is part of the system. Each of the functions will be detailed here. Toolbar Button Description View or edit the source code of the document (for advanced users. This was the same as putting a check mark in the box at the bottom of the window View Source). See Document Source. Do Not Use this Button. You must scroll to the bottom and Click Save Changes. Clear the editing area and create a new page. See Creating a New Page. Show a preview of the document in the shape that will be displayed to end users. See Document Preview. Print document contents. See Printing. Select a layout template. Actually gives you three basic page layouts to use. See Templates. Cut the selected text fragment to the clipboard. See Cut. Copy the selected text fragment to the clipboard. See Copy. Paste content copied to the clipboard along with formatting. See Paste. Paste content copied to the clipboard without formatting. See Paste as Plain Text. Paste content copied from Microsoft Word or similar applications along with formatting. See Paste from Word. Undo or redo the most recent action performed. See Undo and Redo. Find a word or phrase in the document. See Find. Find and replace a word or phrase in the document. See Replace. Select all contents of the document. See Text Selection. Check spelling of the document text or turn on the Spell Check As You Type (SCAYT) feature. See Spell Checking. Maximize the editor in the browser window. See Resizing and Maximizing CKEditor. Highlight all block-level elements in the document. See Show Blocks. Show information about CKEditor. See CKEditor Version. Website Management System/WMS-rev A Page 25 of 49

26 Text Styling Toolbar Button Description Text Layout Toolbar Button Description Apply bold, italic, underline or strike-through formatting to the text. See Bold, Italic, Underline, and Strike-through. Apply superscript or subscript formatting to the text. See Subscript and Superscript. Remove the formatting of the selected text. See Remove Format. Apply pre-defined combinations of various formatting options to block and inline elements. See Formatting Styles. Apply pre-defined block-level combinations of various formatting options. See Paragraph Format. Change the typeface of the text. See Font Name. Change the font size of the text. See Font Size. Change the color of the text. See Text Color. Change the background color of the text. See Background Color. Create a numbered or bulleted list. See Creating Lists. Increase or decrease text indentation. See Text Indentation. Format a block of text as indented quotation. See Block Quote. Create a new div element in document source. See Creating Div Container. Set text alignment (left, centered, right or justified). See Text Alignment. Set text direction as from left to right (default value for most Western languages) or from right to left (languages like Arabic, Persian, Hebrew). Website Management System/WMS-rev A Page 26 of 49

27 Rich Text Toolbar Button Description Form Elements Toolbar Button Description Create or remove a hyperlink in the text. These features may also be used to manage file uploads and links to files on the web server. See Links, s and Anchors. Insert a link anchor to the text. See Anchors. Insert an image into the document. See Inserting Images. Insert an Adobe Flash object into the document. See Inserting Flash. Create a table with the defined number of columns and rows. See Creating Tables. Insert a divider line (horizontal rule) into the document. See Horizontal Line. Insert an emoticon image (smiley or icon). See Inserting Smileys. Insert a special character or symbol. See Inserting Special Characters. Insert a page break. This only impacts the printed version. See Page Breaks. Insert an inline frame (iframe). See Inserting IFrames. Insert a new form into the document. See Creating Forms. Insert a checkbox into the document form. See Checkbox. Insert a radio button into the document form. See Radio Button. Insert a text field into the document form. See Text Field. Insert a multi-line text area into the document form. See Textarea. Insert a selection field into the document form. See Selection Field. Insert a button into the document form. See Button. Insert an image button into the document form. See Image Button. Insert a hidden field into the document form. See Hidden Field. Website Management System/WMS-rev A Page 27 of 49

28 Inserting Images The Editor allows you to add images to your documents in an easy and intuitive way. In order to insert an image, position your cursor in the article where you want to place the image, and simply press the button on the toolbar. The Image Properties dialog window that will open lets you set configuration options that define image source, its size, display properties, or other advanced properties. The Image Properties dialog window includes four tabs that group image options: Image Info Link Upload Advanced Image Info The Image Info tab is the default tab that opens after you press the button on the toolbar. It allows you to set the image URL and configure the way it will appear in the document. Website Management System/WMS-rev A Page 28 of 49

29 Image Info tab of the Image Properties window Below is an overview of all Image Info tab elements: URL the web address of the image. The image may be located on the same server as the web site you are currently in or on an external server. o External server: If you want to use an external address, use the full absolute path. Example: o Local server: If the image is located on the same server, you can use an absolute path that omits the domain name and starts with a slash. Example: /images/image2.jpg You can also use the Browse Server button to select an image from the ones that are available on the server. Website Management System/WMS-rev A Page 29 of 49

30 Browse Server will open a new dialogue box, displaying all the images currently uploaded to the server. o If the image is not already uploaded, select the upload button. o You are now presented with a window allowing you to browse to find the picture on your computer, select it, and then click Open. It will be automatically uploaded to o the server. Find the image you want and Double left click it. You will be returned to the Image Properties window. Alternative Text a short textual description of the image that tells users with assistive devices (like screen readers) what the image is about. You should always provide your images with meaningful alternative text in order to make it accessible to users with disabilities. Width the width of the image in pixels. By default this is the size of the original image. o You should reduce this to 550 maximum to fit the space available on the site. Height the height of the image in pixels. By default this is the size of the original image. Border the size of the solid border around the image in pixels. HSpace the horizontal spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels. VSpace the vertical spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels. Align the alignment of the image in the document. Available options are Right and Left. Preview a preliminary view of the selected image formatted according to the options chosen on the left. Image manipulation With the new editor you do not have to worry about resizing your image. If the image is too big, you can alter its dimensions by entering new values into the Width and Height fields. By default the image ratio is locked, which you can see thanks to a button. This means that when you change one of the size values (width or height), the other one will be adjusted automatically. If you want to freely modify both dimensions, click the button in order to unlock the ratio. The button will now change to and modification of one dimension will not automatically cause the other one to be adjusted. To lock the image ratio again, click the button once more. You can easily return to original image size by pressing the button. This will reset the image size; the original width and height will now appear in appropriate text boxes. Website Management System/WMS-rev A Page 30 of 49

31 Link The Link tab lets you assign a link to an image inserted into the document, effectively converting the image into a clickable link. The link can point to any kind of object available in the Internet, like a simple URL address, a PDF document, or an online video. This might prove especially useful if, for example, you want to add a thumbnail that would lead the reader of your document to a full-size copy of the image or add a company logo and point to its website. Link tab of the Image Properties window To use the Link functionality, first you need to insert an image into a document using the Image Info tab. After you configure the display options, switch to the Link tab and configure the image target using the available options. Below is the overview of all Link tab elements: URL the web address that the image should be pointing at. This may be a plain website address, an image, or other file that is located on the same server as the web site you are currently in or on an external server. o External server: If you want to use an external address, use the full absolute path. Example: Website Management System/WMS-rev A Page 31 of 49

32 o Local server: If the target location is on the same server, you can use an absolute path that omits the domain name and starts with a slash. Example: /howto/images /images/largeimage2.jpg You can also use the Browse Server button to select a file from the ones that are available on the server. Browse Server will open a new dialogue box, displaying all the files currently uploaded to the server. o If the file is not already uploaded, select the upload button. o You are now presented with a window allowing you to browse to find the file on your computer, select it, and then click Open. It will be automatically uploaded to the server. o Find the file you want and Double left click it. You will be returned to the Image Properties window. Target the window where the assigned link will open after clicking the image. You can choose between New Window (_blank), Topmost Window (_top), Same Window (_self), or Parent Window (_parent). If you want to edit an image that is connected to a link, use the context menu and choose the Image Properties option. The Image Properties window will let you modify both the image and the link that it is pointing to. If you double click such image instead, you will open the Link dialog window that will only allow you to edit the link properties and not the image itself. Upload The Upload tab of the Image Properties dialog window allows you to send your own images to the server, and works the same as the current upload Images under the File menu option. Website Management System/WMS-rev A Page 32 of 49

33 Upload tab of the Image Properties window To upload an image file, click the file input field or the Browse button next to it. When the file browser of your operating system opens, navigate to an appropriate folder and choose a file by double clicking it or using the Open button. To send the file to the server, click the Send it to the Server button of the Editor. Advanced The Advanced tab lets you configure additional image options such as assign it an ID, a class, a longer description, a tooltip, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the image is concerned. Website Management System/WMS-rev A Page 33 of 49

34 Advanced tab of the Image Properties window Below is the overview of all Advanced tab elements: Links Id a unique identifier for an image element in the document (id attribute). Language Direction the direction of the text: left to right (LTR) or right to left (RTL) (dir attribute). Language Code the language of the image element specified according to RFC 1766 (lang attribute). Long Description URL the web address of an HTML page containing a longer description of the image (longdesc attribute). Stylesheet Classes the class of the image element (class attribute). Note that an image element might be assigned more than one class. If this is a case, separate class names with spaces. Advisory Title the text of the tooltip that is shown when the mouse cursor hovers over the image (title attribute). Style CSS style definitions (style attribute). Note that each value must end with a semicolon and individual properties should be separated with spaces. Links and s The Link feature of the Editor is a powerful option that lets you add clickable hyperlinks or addresses to your documents as well as control the way they look and work. Website Management System/WMS-rev A Page 34 of 49

35 To insert a link to you document, press the button on the toolbar or use the Ctrl+L keyboard shortcut. If you want the link to be assigned to a text fragment, select it first. If no text is selected, the link URL or address will appear in the document as-is. The Link dialog window that will open lets you choose the link type and configuration options pertaining to your choice. It contains two or four tabs that group link options, depending on the link type: Link Info Target (this tab is only available for URL link type) Upload (this tab is only available for URL link type) Advanced Link Type: URL URL is the default link type that lets you add a website address to your document. For this sort of link all four tabs of the Link dialog window are available. Link Info The Link Info tab is the default tab that opens after you press the button on the toolbar. It allows you to choose the link type as well as set the link protocol and URL. Link Info tab of the Link window for the URL link type Below is an overview of all Link Info tab elements: Link Type the category of the link that will be inserted into the document. You can choose between the following options: Website Management System/WMS-rev A Page 35 of 49

36 o URL the web address of any resource available in the Internet, like a website, a PDF document, or an image. Example: o Link to anchor in the text an internal link pointing the reader to a designated point in your document. Example: #anchor1 o an address. Example: myname@example.com Protocol the communication protocol used with the web address. You can choose between the following options: ftp://, news://, or <other>. URL the web address of the resource that the link is pointing to. It may be located on the same server as the web site you are currently in or on an external server. o External server: If you want to use an external address, use the full absolute path. Example: o Local server: If the resource is located on the same server, you can use an absolute path that omits the domain name and starts with a slash. Example: /about/mission.html /howto/printing.avi You can also use the Browse Server button to select a resource from the ones that are available on the server. Target The Target tab is only available for the URL link type. It specifies the location where the link will open after you click it. By default the target of the URL is not set and the link will open in the same browser window or tab as the document. Website Management System/WMS-rev A Page 36 of 49

37 Target tab of the Link window for the URL link type This tab contains only one element: a drop-down Target list that lets you choose the location where the link will open. The list contains the following options: <not set> the default setting that opens the link in the same browser window or tab as the document. <frame> the setting that opens the link in the frame specified in the Target Frame Name text box. The text box is only visible after you choose <frame> as the target. Website Management System/WMS-rev A Page 37 of 49

38 Target tab of the Link window for the URL link type with frame chosen as target <popup window> the setting that opens the link in the pop-up window specified in the Popup Window Name text box. The text box is only visible after you choose <popup window> as the target. Target tab of the Link window for the URL link type with pop-up window chosen as target If you choose to open the link in a pop-up window, you may configure some further options that control the appearance of the pop-up. Note, however, that the users' browser Website Management System/WMS-rev A Page 38 of 49

39 Upload settings might override these options and make the pop-up window appear in a standard new browser tab or window instead. The following options are available: o Resizable this parameter controls whether the pop-up window may be resized. o Status bar this parameter controls whether the pop-up window will contain the status bar. o Location bar this parameter controls whether the pop-up window will contain the location bar. o Toolbar this parameter controls whether the pop-up window will contain the toolbar. o Menu bar this parameter controls whether the pop-up window will contain the menu bar. o Full screen this parameter controls whether the pop-up window will be maximized (full-screen). o Scroll bars this parameter controls whether the pop-up window will contain the scroll bars. o Dependent this parameter controls whether the pop-up window will close when the window that opens it closes (works in Netscape only). o Width the width of the pop-up window. o Height the height of the pop-up window. o Left Position the offset of the pop-up window from the left side of the screen. o Top Position the offset of the pop-up window from the top of the screen. New Window (_blank) the setting that opens the link in a new window. Topmost Window (_top) the setting that opens the link in a window that is positioned on the top. Same Window (_self) the setting that opens the link in the same window as the document. Parent Window (_parent) the setting that opens the link in the window that the document window is nested in. The Upload tab is only available for the URL link type. The Upload tab of the Link dialog window allows you to send your own resources to the server. Website Management System/WMS-rev A Page 39 of 49

40 Upload tab of the Link window for the URL link type To upload a file, click the file input field or the Browse button next to it. When the file browser of your operating system opens, navigate to the appropriate folder and choose a file by double clicking it or using the Open button. To send the file to the server, click the Send it to the Server button of the Editor. The Link Info tab will open and the URL of the uploaded file will automatically appear in the URL field. Advanced The Advanced tab lets you configure additional link options such as assigning it an ID, a class, a tab index, a tooltip, or CSS style properties. It is meant for advanced users with knowledge of HTML and CSS and gives nearly endless possibilities as far as the presentation of the link is concerned. Website Management System/WMS-rev A Page 40 of 49

41 Advanced tab of the Link window Below is the overview of all Advanced tab elements: Id a unique identifier for the link element in the document (id attribute). Language Direction the direction of the text: left to right (LTR) or right to left (RTL) (dir attribute). Access key a keyboard shortcut to access the link element (accesskey attribute). Name the name of the link element (name attribute). Language Code the language of the link element specified according to RFC 1766 (lang attribute). Tab Index the tab order of the link element (tabindex attribute). Advisory Title the text of the tooltip that is shown when the mouse cursor hovers over the link (title attribute). Advisory Content Type the content type of the link (type attribute). Stylesheet Classes the class of the link element (class attribute). Note that an link element might be assigned more than one class. If this is the case, separate class names with spaces. Linked Resource Charset the character set of the linked resource (charset attribute). Relationship the relationship between the current document and the link target (rel attribute). Style CSS style definitions (style attribute). Note that each value must end with a semicolon and individual properties should be separated with spaces. Website Management System/WMS-rev A Page 41 of 49

42 Link Type: Link to anchor in the text If you want to point to an anchor previously set in the document, select Link to anchor in the text from the Link Type drop-down list. When you choose this link type, two Link dialog window tabs will become available: the Link Info tab and the Advanced tab. Please note that if you do not have any anchors defined in your document, a message telling you so will be displayed in the Link Info tab. Link Info tab of the Link window for no anchors defined in the document When you add an anchor to your document, you will be able to select it from the drop-down lists of the Link Info tab. Website Management System/WMS-rev A Page 42 of 49

43 Link Info tab of the Link window for the Link to anchor in the text link type The Link Info tab contains the following options that make selecting an anchor an easy task: By Anchor Name a drop-down list containing the names of all anchors established in the document. By Element Id a drop-down list containing the identifiers of all anchors established in the document that contain the id attribute. Note: in order to add an id to an anchor, you need to modify the document source. For a detailed description of all Advanced tab elements, refer to the Advanced section above. Link Type: The Editor makes it easy to insert clickable addresses to your documents and even add a subject and body of the message that will be created when you click the link. If you want to add a hyperlinked address to document, select from the Link Type drop-down list. When you choose this link type, two Link dialog window tabs will become available: the Link Info tab and the Advanced tab. Website Management System/WMS-rev A Page 43 of 49

44 Link Info tab of the Link window for the link type The Link Info tab contains the following fields that let you configure the recipient and the message content: Address the address of the recipient of the message. This field is obligatory for the link to work. Message Subject the default text that will be pasted into the subject line of the message. Message Body the default text that will be pasted into the message as its content. For a detailed description of all Advanced tab elements, refer to the Advanced section above. Removing a Link Removing a link is just as easy as adding it. When the cursor is placed in a link, the button on the toolbar becomes active. Pressing the button removes the link and leaves plain text. Alternatively you can also open the element's context menu by pressing the right mouse button or using the Menu/Application key on your keyboard, and choose the Unlink command. Anchors The Editor supports placing anchors in document text. To insert an anchor, press the on the toolbar. The following Anchor Properties window will appear: button Website Management System/WMS-rev A Page 44 of 49

45 Anchor Properties dialog window in CKEditor In order to create an anchor, enter its name in the Anchor Name text box. Once you click OK, the icon will appear in the document. Please note that the anchor may either lead to a point in a document (when nothing was selected while creating it), and look like in the example below: An anchor inserted into a document, with no text selection Or if it leads to some content that was selected in the document, this selection will be displayed with a blue dotted border around, like in this example: An anchor inserted into a document with some text selected You can now create a link to your anchor with the button. Once it is ready, the link will take the reader of your document to the section marked with the anchor. Website Management System/WMS-rev A Page 45 of 49

46 An anchor inserted into a document with a link pointing to it Removing an Anchor Removing an anchor is just as easy as adding it. When the cursor is placed in an anchor, the Remove Anchor context menu command becomes available. Open the element's context menu by pressing the right mouse button or using the Menu/Application key on your keyboard, and choose the Remove Anchor command. This option removes the anchor from the document and leaves plain text. Remove Anchor context menu command available for an anchor Website Management System/WMS-rev A Page 46 of 49