The WYSIWYG editor
The ‘what you see is what you get’ editor allows you to add content and style your pages without knowing html (the language used to write web pages). Below is a guide to the different functions and buttons on the editor.
In this guide:
Menu items
Tabs
The WYSIWYG content menu
Menu items
Pages
This takes you to the main Website Pages area, where you can view a list of all pages you have permission to edit. From this screen you can add, delete and rename pages.
For more information see adding and deleting pages.
Content
This brings up the main content window, where you can use the WYSIWYG editor to add content to and edit your page. For detailed information on the WYSIWYG interface go to the content menu section, below.
Properties
Page Type
There are three types of page type. Normal, email form and redirect. Normal will be your standard pages, email form lets you set up a form page to get information from your members and redirect lets you make a page that automatically redirects to an external page (this is of more use to site admins).
Form page allows you to add standard html form elements to a page and have the contents of the form emailed to a specified email address when the user submits the form. To create a form page, select ‘Form Page’ from the page type options and then select the ‘Edit Form Details’ icon that now appears in the page options. After specifying an email address to send to form results to in addition to the email address the result will come from and the subject line (Which can help in filtering returned forms into a specific email folder), you can build up the form by editing the page’s text and adding any standard html form element. Warning: Be sure not to add an actual <form> tag to the page, this will stop the form from working and no results will be sent.
Page Title
The title of the page appears in your browser and in the breadcrumb navigation. Having an accurate title helps with search engine optimisation.
Page Security
In this area you can set who you allow to see your page. This means you can have members only pages or even a page just for your Exec/committee (the admin only button). If you want a higher level of security than this e.g. a page that only your first team can see you will need to speak to your site administrator.
History
This area lets you roll back your page to earlier versions or access versions you may have edited but not yet saved. You can see who has edited the page and what they have done either by reading the update notes or comparing with other versions.
Style
You will not normally have access to this section, it is for site administration use.
View page
This takes you out of editing mode and to the live version of the page you are editing. If you have made changes to your page, remember to to save your work-in-progress before using this link.
back to top
Tabs
Editing Page Content
To edit a page, click on Website Pages in your admin area. Find and select the page that you want to edit in the site tree and then click the ‘Edit’ button. (You can optionally use the quick ‘Edit Page’ link when viewing the page to do the same thing)
There are two methods of adding text and other content to the pages you create; WYSIWYG editing and HTML editing.
WYSIWYG Editing
The first (and default) method is by using the WYSIWYG (What you see is what you get) editor built in to the website. This editor allows you to both add and style content using a familiar word processor style interface. You can set different headers, format text, add images and change colours etc. in real time.
HTML Editing
The second method is to add the html content by hand yourself. This gives you much greater control over the content that is added (The WYSIWYG editor is not perfect and can cause some content to not appear as you would want it to)
This method is recommended only for people with at least a basic knowledge of how html is written.
CSS and JavaScript
Your page may have some CSS and JavaScript available to it. This will have been added by a site administrator and cannot (by default) be edited. Should you need to edit the CSS or JavaScript you can ask a site admin to grant you access, this will typically only be done in very exceptional circumstances and so the use of inline styles is generally advised.
Widgets
Widgets allow you to add dynamic content to the page such as news lists, rss feeds and photo galleries.
To add a widget to a page click ‘Create New Widget’ and select the type of widget from the list. Many widgets have a number of properties that you can alter. These may change how a widget is displayed, what data it uses or when it appears.
Once you have made a widget, adding it to a page is done by selecting the widget from the drop-down list or by typing the name of the widget into the page enclosed in two curly braces e.g. { WidgetName}.
Preview
The preview tab allows you to see how your content will look once saved. It will load in the widgets you have added and apply any CSS styles available on the page. It is always advisable to preview your changes before saving.
Saving
Once you have made your changes click save and you will be given the option to “save and publish”, i.e. make your changes live, or “save” your changes but keep the live page the same.
Make sure you give a brief description of what you have changed in the notes section to help other editors (and yourself at a later date) understand what changes you have made and why.
Page history
Every time the page is saved it creates a new version of the page allowing you to see all changes that have been made, compare them to each other and roll the live page backwards or forwards. If you have previously saved changes without publishing you can access them here.
back to top
The 'WYSIWYG' content menu
Source
This allows you to quickly look at the html of the page you are editing. If you are copying and pasting text into the editor it can often contain stray html (particularly if copied from a webpage) so it is always advisable to copy your text into Notepad first which cleans out all formatting.
Find
You can find or find and replace text in the page.
Clear Formatting
This allows you to quickly remove inline styles such as bold and italic or text colour from your page without affecting headlines, paragraphs and links.
Hyperlinks and Emails
Text or images in your page can be set as links to either other webpages (links) or other areas of your webpages (anchors) or to act as an email prompt. Select the subject you wish to convert then click on this and fill in the relevant fields. If you have made an anchor on the page this will be automatically available for you to select. In the advanced options you can choose to redirect people to a new window if you do not want them to navigate away from your page.
Anchors
If you have a particularly long webpage that you do not want to make into several smaller pages then you can use the Anchor button. This allows you to select text or an image as an anchor. Once this is made then you can link to this anchor from other areas of your site or a navigation menu at the top of the page. To link to an anchor from the page click on the hyperlinks button. To link from another page or website use the url of th page followed by /#anchorname
Image management
To add an image to your site place your cursor where you want your image to go then select this button (which is also accessible from the html editor).
Click browse and upload to save your image to the site. You can access other images that have been uploaded, browse other pages of the website or upload from your computer.
Select the required image and click OK to add it to the page. There are various tools you can select to change the image size and its justification in the page, whether it has a border and how much of a margin it has.
Make sure you add alternative text describing what the image is so people who are looking at your site with images turned off can still understand it.
Flash
Flash is uploaded and selected exactly like images. Once you have added the flash you can choose whether it loops and autoplays through the advanced menu.
Document Management
Adding documents to your site is easy. Select the image or text you wish to link to the document then click on the button and go to browse and upload. Choose the document you would like to upload to the page from your computer. If the document has already been uploaded to the page you can select it directly. You can upload Word, PDF, Powerpoint, Excel and Publisher documents.
You Tube
To add a You Tube video to your site copy and paste the embed code from the video (highlighted in pink above) into the relevant field.
Tables
Adding a table to your site lets you format it by adding rows and columns. Once your table has been added you can access more editing options (including formatting individual cells) by right-clicking. You can set the size of your table in either pixels or percent and set the padding and spacing of each cell.
Widgets
Once you have created your widget you can select it here to drop it into your site.
Views
This allows you to have different content in your page for different users. You could tell non members why they should join or members that they should log in so they can sign up for trips and comment on news etc.
Select the user group you wish to add the content for and then add it to the site. Add the content you want between the curly braces (where it says content).
To add a view to the site select a view from the drop-down list or add the curly brace tags:
{ msl_view_notloggedin}CONTENT { /msl_view_notloggedin}
{ msl_view_loggedin}CONTENT { /msl_view_loggedin}
{ msl_view_members}CONTENT { /msl_view_members}
{ msl_view_admins}CONTENT { /msl_view_admins}
If the page has system generated content (ie is a code page) use { page_content} as a placeholder for that MSl generated content.
In each of the above there is no space after the Open Curly Braces symbol.
Format
Here you can manage the headings for your text keeping the same style as the rest of the website.
Style
This lets you add several styles to your text including slightly larger and smaller text and strikethrough.
back to top
See also: