Draft TinyMCE User Guide: Constructive Comments Wanted

The Following is a first draft towards creating a good User Help with various TinyMCE editors on the Drupal platform. I’m looking for constructive comments.

Note: I’m expecting many problems due to the fact that this attempts to be the same set of User Instructions regardless of the following:

Different Drupal modules used to integrate TinyMCE to Drupal.
Differences between Drupal 5 and Drupal 6 implementations
Differences between Moxiecode’s Vers 2 and Vers 3.
A large range of options within Drupal’s installation procedures.
A large range of plugins within Moxiecode’s TinyMCE that may or may not be implemented.
Differences in use with different browsers.

With all the above there’s no way I can check everything that I have written in all configurations and environments.

Please help with CONSTRUCTIVE comments.

TinyMCE WYSIWYG Editor
=====================

Why TinyMCE.
---------------------

There are a large number of editors available for Drupal. Each is meant to allow a user to easily create a web page without having to know how to code in HTML, CSS or PHP. Like TinyMCE, a lot of these are WYSIWYG (What You See Is What You Get). Where TinyMCE stands out is that it's by far the most powerful or flexible editor. This is also its main problem.

It's possible for a designer to set up TinyMCE with a small subset of its abilities and then restrict the users to only have certain capabilities. If the only places that you'll use this are places that you'll be doing that, then there are probably better Drupal editors, or at least ones that are as good and a lot easier to set up. The reason you use TinyMCE is because you want to give maximum power or flexibility to one or more of the users. It's rare that you would want or need this sort of power for anyone that you would not consider a site administrator. Such users need to be fully trusted users.

A typical TinyMCE implementation has far more buttons than other editors. A number of these buttons will give a large number of options, many of which the average user will never need. This creates the problem that you need to know which parameters are important and to understand exactly what these do. Many of the parameters are ones that I will not detail. In general, they have a close correspondence to parameters of HTML or CSS.

The other problem with TinyMCE is that it is extremely hard to install. You have to follow exactly all the instructions and there are a lot of them. Further, to use it well it requires an extra program (normally IMCE) to allow the user to upload files. The interfacing between these programs cause a complete new set of installation problems. Note: While there are several options for uploading files, IMCE is the most powerful and the documentation here assumes IMCE.

At the time of writing this, the next most powerful editor within the Drupal set is FCKeditor. This is still a lot more powerful than the other available editors but is nowhere near as powerful as TinyMCE. The current version of FCKeditor misses out most of the CSS capabilities that TinyMCE has and that, while one of the most complex parts, is probably the best part of TinyMCE. It also has very limited Table capabilities. Although still hard to set up it's a lot easier than TinyMCE. It includes its own file handling capabilities so you don't have to link it in with another module like IMCE.

I should also point out that the use of any of these editors is controversial among many Drupal professionals, particularly those working on large projects. In many large projects, all web content is constrained to be input through carefully constructed forms or fields that constrain the input to a specific format or range.

This occurs even when the people inputting the content are all employees. It ensures that the web pages are consistent in their look and feel. This can also be used to ensure that important fields that the designer wants filled out, such as those used for search engine keywords or popup descriptions etc are always filled out. With a WYSIWIG editor like TinyMCE, these will only be optional.

There's also a concern , by some but not all, that even a trusted employee could cause damage to a live site. Drupal is heavily used in these types of projects and this type of reasoning has kept any powerful WYSIWYG editor from being included in the standard Drupal implementation and will probably remain doing so.

Some Installation Notes:
--------------------------------

Due to the number of people having problems with the complexity of installing TinyMCE and getting it to work with IMCE, there's been a number of attempts at creating simpler installation. With all of them, you need to be certain to read and follow their INSTALL.txt instructions.

The editor itself is created by Moxiecode. Most installations require that you separately go to the Moxiecode site at

http://tinymce.moxiecode.com

and download the latest copy of the TinyMCE editor. This editor is then added into the Drupal TinyMCE module before being installed and setup on your Drupal site.

The original Drupal TinyMCE module gives the greatest flexibility in the installation (greatest number of options) but is also the most complex. This can be found at http://drupal.org/project/tinymce

A videocast of the installation instructions can be found at

https://drupal.org/node/228270

An auto installation package for the above TinyMCE can be found at

http://drupal.org/project/tinymce_autoconf.

Unfortunately, both the videocast and the auto installation package have been created for Drupal 5, not Drupal 6.

Recently a new TinyMCE Drupal module has been created called TinyTinyMCE. This can be obtained at

http://drupal.org/project/tinytinymce

This TinytinyMCE Drupal module is a bit simpler to install than the earlier TinyMCE Drupal module. In its Drupal 6 version it's a major advance in simplicity in the way it integrates with IMCE. Install IMCE before installing it. It has been designed to work with the latest (Vers 3) version of the Moxiecode code with both its Drupal 5 and Drupal 6 version.

The TinytinyMCE does have a few restrictions compared to the standard TinyMCE Drupal module but most people will not be concerned. Note: although it doesn't have all the options that the earlier TinyMCE Drupal module had, it's still a full TinyMCE installation. It is in no way a tiny installation.

Brief User Instructions
================

Author: Ken Dawber
http://AusValue.com

Draft: July 1, 2008

{Note: The below index is to be converted to a set of internal links}

INDEX
=====

TinyMCE WYSIWYG Editor
------------------------------------
Why TinyMCE.
Some Installation Notes:

Brief User Instructions
------------------------------
Introduction
Pasting in Text
Pictures and their upload. (IMCE)
To Upload and Insert an Image:
Centering an Image
Spell Checkers
Links
Edit CSS
Confirm Button
Tables
Zoom

Advanced Stuff
--------------------
Layers
Blocks of Content for Background, Border and Other Parameters
Negative values for Margin
Image Maps
TinyMCE Keyboard Shortcuts

Introduction
----------------
These instructions assume that you already know how to use standard editors such as Microsoft Word. This document only describes differences. Most of the icons within the editor work as expected. You can bring your mouse up to each item and it will give a brief description of its use.

If you don't see the editor where you expect it, scroll to the bottom of the page. Internet Explorer and possible some other browsers will often reposition the editor to the bottom of the page if it can't fit it into the normal area for it.

There is a help button within TinyMCE but it's not very useful. It tends to either tell you what's obvious or tells you information that only an advanced programmer would need. There's nothing in the middle. It's for this reason that these User Instructions were created.

If you have problems with TinyMCE with installation or getting it to work, one of the first places to try is the following FAQ

http://groups.drupal.org/node/4114

These instructions assume that the TinyMCE is installed with IMCE for performing file uploads.

The concept of having a WYSIWYG editor such as TinyMCE implies that you can create web pages without knowing any HTML or CSS. To some degree you can, but you won't get the full power and versatility out of this editor without knowing some HTML.

The more HTML and CSS you learn, the more power and versatility you will get from this editor. In general, parameter and facilities within TinyMCE have a close correspondence to parameters of HTML or CSS. This simple user guide cannot describe every parameter and most of those not described are quite useful in certain circumstances.

Pasting in Text
---------------------

When you directly paste in text in the editing area it will often have incorrect HTML. It will generally look as if it works but the faulty HTML may have side effects in some browsers. Before copying the text you should ensure that the there is a blank line between each paragraph. To correctly paste text into the page use the 'paste as plain text' button. This gives the editor a chance to analyse the text.

The main faults observed when directly pasting without using this button are as follows:

It doesn't break the code up into paragraphs. It incorrectly adds line breaks (br) tags instead of separating into paragraphs.
It doesn't use correct codes for special characters such as quotation marks

For short pieces of text such as headings when there are no special characters within in it, it will normally be OK to directly paste into the editing window.

Although there are facilities for pasting text from word documents, there are often problems in doing so. Many people find it better to convert the word document text to plain text first and then use the plain text for creating web pages. Converting to plain text can be done by saving the document to plain text or, on Windows, by copying and pasting the text into Notepad first and then copying from Notepad into the 'paste as plain text' button.

Pictures and their upload. (IMCE)
------------------------------------------------

It is recommended that all images used be either JPEG (has a .JPG extension to the name) or GIF or PNG. Others may appear to work but will have problems with some browsers and will be slow to download.

JPEG is best for photos in that it compresses to a smaller size and yet shows in better quality. JPEG will always show in a square or oblong shape.

GIF and PNG are better for Graphics. When creating a .GIF or PNG image you can specify one colour of the image to be transparent. This gives the effect of an image that can have any shape.

You can also create a GIF image that is animated. Once created, the animated GIF image is just a single file and is treated within the editor just like any other image.

To Upload and Insert an Image:
-------------------------------------------
First click within the Edit window at the position where you want to insert the image.

Click on the 'insert/edit image' icon (picture of a tree)

The first line within the General Tab is 'Image URL'

At the Right Hand Side of this line should be a small window square called a 'browse' button Click on this and a new browse window (created by the IMCE module) comes up.

{The following is instructions for IMCE for Drupal 5}

At the bottom of this browse window is a section where you can upload pictures and other files to the server.

All files you've previously uploaded will show in the top section. Click on an image file name and it'll show in the middle section

Click on the 'add' at the far right of the name and it places the image address into the Image URL

{The following is instructions for IMCE for Drupal 6}

Navigation and display of previously loaded images is reasonably obvious in the new Drupal 6 version of IMCE.

To upload, click on the Upload button at the top, then click on the Browse button, select the file on your local computer, then click on the Open button, then click on the Upload button that's next to the browse button.

All files you've previously uploaded will show in the top section. Click on an image file name and it'll show in the middle section. Options are available to create additional thumbnail images from any of the files.

Select a file then click on the 'send to editor' at the top right and it places the image address into the Image URL

You should now have returned to the 'insert/edit image' dialog of TinyMCE with the image URL filled out.

Fill out Image Description and Title with a description of the image. While you should incorporate keywords for search engines in this it should be a readable sentence or paragraph description.

The Image Description is very important. This creates the ALT attribute for the image. This is seen 'under the image' before the image loads or if it doesn't load and is used by visually impaired users. Search engines such as Google take particular note of this in creating keywords.

Description and Title can use the same text. (eg Ctrl-A, Ctrl-C in Image Description then Ctrl-V in Title)

The first field within the Appearance TAB is Alignment. Most of the time you will only use the ‘Left’ or ‘Right’ parameters from this selector. Note: If you want the image centered horizontally, do not set this parameter.

Other than the ‘Left’ or ‘Right’ alignments, all alignments end up positioning the image to the left of the enclosing block and then they show a single line of text to the right of the image. The difference between the various alignments is simply the position of that single line of text.

With the ‘Left’ alignment the image is also positioned to the left but with this alignment it allows paragraphs of text to flow around the image to the right of the image. Similarly, the 'Right' alignment positions the image to the right of its contained block with the following paragraphs of text flowing around the left of the image.

As you try different alignment options, you can observe the typical effect in the Lorem ipsum demonstration block.

Similarly, with the Vertical space, Horizontal space and Border under the Appearance TAB, the effects can be seen in the Lorem ipsum demonstration block. The Vertical Space, Horizontal space and Border setup HTML parameters in the img tag that have been depreciated in the HTML specification. This means that future browsers may not obey them. A better way to specify these is to use Edit CSS Style (see below).

The actual Dimensions of an image should always be specified. This allows the browser to set aside the correct space for the image before it downloads the image. This Insert/edit image plugin does this automatically.

You can use the Dimensions parameter to get the browser to show the image at a different size to what it is. This is very inefficient. For example, if you have a 100 x 300 pixel image but asked the browser to display it in the webpage as 50 x 150, the browser displaying the webpage is downloading the full 100 x 300 pixel image but only displaying it as 50 x 150. With the same image, if you asked it to display it as a 200 x 600 image it will attempt to do so but it will look very pixelated. You should try to create the correct sized picture that you want to be displayed before uploading the picture.

Sometimes you want a paragraph to always be positioned directly after an image that has the left or right alignment. For example, one paragraph may be related to the image and consequently sensibly placed next to it. The next paragraph, not being about the image, should start after the image. A problem occurs here with fluid width themes as the author doesn’t know how much room in height the first paragraph takes. It will change as the width of the browser window changes. As it changes, the gap between the first paragraph and the next paragraph needs to change in order for the second paragraph to start after the image.

The solution to this problem is to give the second paragraph the CSS ‘clear’ attribute. More information on this is found in the description of the Edit CSS button.

If you going to give the image a link (done separately with link button), many browsers will show the image with a border to indicate the link. If you don't want this border then you should place a 0 in border

Centering an Image
-----------------------------

It seems strange that while HTML has direct attributes on images to allow them to be positioned to the left or right, it has never had a direct attribute to position an image in the center of its window. People have developed about a dozen different methods in HTML and CSS in order to do it. Almost all of these use illegal HTML that won't work on all browsers or use attributes that have now been depreciated from the HTML specifications meaning that future browsers may stop supporting them. Many of the tutorials on the internet are still teaching illegal or depreciated methods.

The correct method (see http://www.w3.org/Style/Examples/007/center ) is as follows:

1)Select the Image and click the Image Button. Ensure that you have not set the Alignment parameter within the Appearance TAB of the Image Button.

2) Select the Image and click the Edit CSS Button. (Edit CSS Style has an AA symbol on the button). On the Block TAB, for the Display parameter select 'block' then click on the Apply button at the bottom.

3) Still within the Edit CSS, on the Box TAB, unclick the 'same for all' within the margin box. Beside 'right' type auto. Beside 'left' type auto. These are also within the margin box. You can leave the next column set at pixels as this will not be used with the auto parameter. Now click on the Update button at the bottom.

The image should now be centered. Within the HTML img tag this will have created the following parameter

style="display: block; margin-right: auto; margin-left: auto;"

If for any reason the above is unsuitable another method that works on all the main browsers, is legal in HTML and CSS, and is not depreciated is as follows:

Note: A discussion on these problems is found at

http://www.netmechanic.com/news/vol7/html_no10.htm

The image is wrapped in paragraph (<p>) tags and the paragraph is given the CSS style with the text-align attribute with the value of center. This method of centering an image can also be done directly within the TinyMCE WYSIWYG editor without touching the HTML code. Follow these steps

1) Select the image. From the Paragraph drop down in the menu bar, select Paragraph. The picture normally changes color. The status bar at the bottom should now show
Path: p
(Not Path: p >> img )
If it shows Path: p >> img then click on the p and it should change to Path: p

2) Select Edit CSS Style from the menu bar (Edit CSS Style has an AA symbol on the button). From the Block Tab set the Text Align parameter to center. Click Apply Button

3) Optional: From the Box Tab set both padding and margin to 0 pixels for all sides. Click Apply Button
Click Update button

Notes:
Without setting padding and margin to 0, the paragraph wrapper will add space above and below the image. Setting all sides to zero is simplest but only the top and bottom are needed to stop these spaces.
If at some later stage you want to change parameters to the paragraph wrapper, to select the wrapper first select the picture. The status bar will now show Path: p >> img. You then click on the p in the status bar Path.

Another method that's also possible is to use tables. See the section on Tables.

Spell Checkers
----------------------
There are two different spell checkers that may have been included. IESpell will only be seen if you use the editor with Internet Explorer. This is the better of the two spell checkers. The first time you use this, it asks for you to allow it to download a program. If you are going to use the IE browser it’s worth doing this.

For information on how to get spellchecker working with TinytinyMCE see the following issue:

http://drupal.org/node/279367

When creating webpages, it is also well worth adding a spellechecker into your browser. This allows you to spellcheck other fields such as the Title field and menu description fields etc.

Some Notes for those that use the Firefox Browser.

Firefox includes a spellchecker but it’s default is not to activate in text fields. To use in places such as the Title field when creating a Drupal Web Page:

Right Click on the Text field.
Select ‘Spell check this field’.
Right Click on each word that has a red underline and select the correct spelling.

To enable this to occur automatically (ie without the initial Right Click)

Enter about:config in Firefox’s Location bar
Type layout.spellcheckDefault in the "Filter"
Double-click the layout.spellcheckDefault preference and change it to 2.

If you use this a lot then it may be worth while updating Firefox’s Dictionary. Do an internet search on update firefox dictionary or check the following article:

http://labnol.blogspot.com/2006/11/firefox-2-spelling-dictionary-hacks.html

Links
-------
Select some Text before clicking on the Link button (picture of a chain link). The text will become the visible link. Instead of text, you can click on an image (selecting it) before using the link button in order to give the image a link.

NOTE: You must select something before using the Link button. It won’t work without doing so.

In the Link URL you need to place the URL (Universal Resource Locator). For links to other sites this needs to be the full URL. This typically starts with http://.

Links within the website can use relative links. In this case it only contains the right hand part of the full link. Do not include the http://, the domain name or the first part of the directory structure.

It is recommended that the Path module be enabled in Drupal and each Webpage is given a 'URL path setting'. This is particularly helpful for making keywords for the search engines. In this case the relative URL is just the name given in the URL path setting.

Most of the time you will only need to fill in the one field - Link URL, but placing a single sentence in the Title field is useful for adding keywords for search engines. For some browsers this shows as a hover description when the viewer brings their mouse over the link.

If you are linking to one of your own documents such as a .pdf document you can use the browse button (IMCE) that is at the Right Hand Side of this Link URL line to upload the document and setup the Link URL. With large pictures, rather than editing it into a web page, it can sometimes be easier to make the picture itself the complete web page. Similar to uploading the .pdf you can use the browse button of the Link URL line in the Link button to upload the image and then setup the Link URL.

Once a link has been created to a stored .pdf document or to a large image, you can edit the link, copy the URL from the link and then use that as a Path for a new menu item that links directly to the .pdf or image.

If you wish to create a link to a place within the same web page (eg links to Top of Page):
- First, select position within document where you will link to and use the insert/edit Anchor button to create an Anchor In creating the Anchor you will give it a unique name.
- After creating the Anchor, come back to where you want the link and use the link button. You should now be able to select the Anchor that you created.

Anchor names can also be added to links to other pages in order to link to a specific place within a webpage. A hash (#) followed by the anchor name is added to the Link URL.

Edit CSS
-------------
The Edit CSS button (this has a symbol that looks like AA on the button) is a very powerful way of changing most display parameters relating to most elements within the HTML code. By using CSS it creates code that is compatible with the declared future direction of the internet.

In order to use it on an object you must select the object first. When doing so, take note of the 'path' in the status line at the bottom of the edit window. This shows the type of HTML tag that is currently selected. When several HTML tag types are shown, it is the one on the right that is selected. For example if TABLE>>TR>>TD is shown in the status then it is a TD (one Table Data (TD) cell Item of a Table Row (TR) of the TABLE) that is selected and not the table as a whole. To select the full Table rather than the Data Cell, you need to click on the TABLE tag from the Path: in the Status line.

When Edit CSS is used with text it normally works on the full paragraph or header that you click on. You just click on any part of the text, within the paragraph, and then click the Edit CSS button. For most functions, if you try to select text first, Edit CSS will ignore the selection and apply the parameters to the complete paragraph.

The select text color and select background color buttons within the TinyMCE editor buttons can be used for individual words within a paragraph or for selecting across a number of paragraphs by selecting the text or paragraphs first.

To use the Edit CSS on selected text within a paragraph or Header, do as follows:

- Select the text
- Use the select text color drop down to set or change the color of the text (or background)
- Click on the text and then click on the Edit CSS button. Settings within the Edit CSS will now just affect the earlier selected text.

Edit CSS can also be used on other elements within the page such as images, links, lists elements, headings and table cells. In the case of lists, if you click on an item within the list it will only select that item. To select the full List rather than the List Item, you need to click on the tag name from the Path: in the Status line. For an Unnumbered List it is UL and for an Ordered (ie numbered) List it is OL

Selecting a Layer (see below) after the layer has data in it is similar to selecting a table except that you click on DIV. In this case it sometimes works when you double click on an unused part of the layer.

Use the font selection with caution. When you set text to use a particular font or font family, it will only show in that font to those users that have that font installed in their particular machine. Try to only use common fonts and don't expect it to have the same results for all viewers.

The items under the Box tab are very useful. You need to understand the following aspects of their use

Padding is the distance between the object (such as text or image) and any defined border.

Margin is the distance from the outside of the border to the beginning of the next object. Margin is particularly useful for positioning an object and for positioning nearby objects.

Margin can be specified with a negative number. This is sometimes used on one side of an object to make it overlap with another object or to shift the object outside the column or block that it is being defined in. This is discussed more in 'Advanced Stuff' below

Padding, Border and Margin can be specified individually for each side or for all sides at once.

Background (color or picture) will extend across the Padding but not across the Margin. Most of the time you will find that specifying these in px (pixels) is easiest.

While width of an object is often specified, height of an object is rarely specified as you need to allow most objects to expand or contract within their window. With a reduced width, it is common to specify the object to 'float' to the left or right side of its window. In this case, text or other objects will flow around them. To ensure that a following object is positioned below the earlier object, you need to set the following object with a 'clear' (this is also under the Box TAB) with a left, right or both parameter so that it clears everything to the left right or on both sides.

Edit CSS has mainly used standard CSS terminology. To get extra information on any parameter within Edit CSS type CSS following by the parameter name into your search engine. For example to get more information on the use of Margin you can type CSS Margin into Google.

Confirm Button
---------------------
You may or may not have the Confirm Button depending on how the TinyMCE was installed.

The Confirm Button is a safety feature that gives a warning should you navigate away from the editing page. Accidental navigating away can occur in a number of ways such as clicking on a link within an email or in some other program. These other programs can try to use the browser page that you are doing the editing in and that would result in a loss of your current work on that page.

In some version this feature has a problem in that it also comes up when you have finished editing and have hit the Submit button. It’s worth having the warning as you can lose work that you have done. You just have to click on the OK button each time.

The warning button states the following:

"Are you sure you want to navigate away from this place?
The changes you have made will be lost if you navigate away from this page.
Press OK to continue, or cancel to stay on the same page."

At the time of writing, the default settings for TinytinyMCE don’t include this safety feature. To install it, simply go to

Administer >> Site configuration >> TinytinyMCE administration

in the Drupal menu system. Within the ‘TinyMCE init script for advanced mode:’ locate the plugins : line and add

,autosave

into the list of plugins. Finally click on the ‘Save Configuration’ button at the bottom

In the case of Drupal 6 TinytinyMCE combined with Vers 3 of the Moxiecode TinyMCE this plugin works well. It doesn’t give the annoying message when you hit Submit or Preview and yet gives a warning if you accidentally try to navigate away.

Tables
---------
You may hear that in today’s designs you should not use tables. For most people using TinyMCE, they need to ignore this advice. Regardless of all the power and all the CSS options that TinyMCE gives, it still doesn't give the user the capabilities required to fully separate presentation from content. For most of this it doesn't matter in Drupal as a large part of the separation of content and presentation has already been done for you by the implementation of a Drupal Theme.

While tables can give fewer problems than CSS, there are still a number of problems with their use that you need to design around.

1) Do not use the table’s own parameters to specify aspects such as backgrounds. Instead use Edit CSS to apply the parameters as CSS styles. This particularly applies to backgrounds (background colors or background pictures) as they were interpreted differently in different browsers.

2) Ensure that pictures and other embedded media objects all have their sizes specified. If the browser doesn't have the size of picture specified then it has to complete the picture's download before it knows how big any surrounding table will be.

3) It is best not to have too much depth of tables within table type structures.

Tables are often used without borders or lines in order to more precisely position objects such as positioning a number of small pictures.

Zoom
-------
The zoom drop down can only be seen if you use the TinyMCE editor with Internet Explorer. Later versions of TinyMCE don't have this as default but it can still be added.

Advanced Stuff
===========

Layers
----------

You may or may not have layer buttons depending on how the TinyMCE was installed.

At the time of writing, the default settings for TinytinyMCE don’t include these buttons. To install it, simply go to

Administer >> Site configuration >> TinytinyMCE administration

in the Drupal menu system. Within the ‘TinyMCE init script for advanced mode:’ locate the plugins : line and add

,layer

into the list of plugins. Also within the ‘TinyMCE init script for advanced mode:’ locate the theme_advanced_buttons4_add : line and add

,insertlayer,moveforward,movebackward,absolute

into the list of buttons. Finally click on the ‘Save Configuration’ button at the bottom

Creating a layer creates a DIV block in the HTML source. Unless you are doing reasonably sophisticated positioning of images or similar objects or have a good understanding of CSS, it is better not to use these. Regardless of being told otherwise, unless you understand CSS very well, you will generally find it easier to use tables. See the section on Tables.

These layer blocks can overlap each other. You can force which object goes over the top of which other one by giving the top object a high positive z-index value (under the positioning Tab of the Edit CSS). The object you want to be underneath can be given a negative value. (This is the opposite from that used for floating/sinking menu items in Drupal)
Layers are blocks to which you assign CSS parameters using Edit CSS. As opposed to the use of a cell of a table, these blocks do not expand to hold all their content.

When initially created the TinyMCE layer is set up as 'position' absolute. As these absolute positioned blocks don’t adjust to the width of the window they are in, they are unlikely to be useful unless you have a fixed width theme. They also don’t adjust to different fonts and different sizes of fonts that the user may set for their browser. This will cause problems if you attempt to have paragraphs of text inside them.

You may have a button within the layer buttons for changing the block back to the default. You can also change this under the positioning TAB of the Edit CSS but it is here incorrectly called ‘type’. (The correct CSS parameter/terminology for this attribute is 'position' not 'type'). With it having the CSS position attribute set to absolute it has a fixed position within the block. It also has a fixed (specified) width and height.

To select the block in order to use Edit CSS on it, ensure that the letters DIV are the rightmost letters in the PATH status line at the bottom. If not, then click on the DIV within the PATH status line and wait until the letters DIV are rightmost.

These absolute layers plus the contents of the layer are not considered to take up any area within the page. That is, regardless of how much or what you add into the layer or how much you expand the layer it does not push the lower contents of the page downwards. Also, the position of this layer does not change as the surrounding objects change their position or expand

Due to the above, if you use these layers at all, then you should place all contents of the containing block within layers. This could be useful for specifying the position of a group of small images (thumbnails) plus small colored background areas. In this case, all paragraphs or larger areas of text are best positioned at the bottom of the block.

This is due to the fact that different users will have different fonts and different text sizes. Also text is likely to be edited with changes causing the text area to expand. If there are a number of layer blocks after the text then they will have to be repositioned with each change to the size of the text area.

Converting this to relative or static allows it to be used with the float attribute to be floated to the left or right. Once converted to relative or static, the content of the layer pushes all the non absolute content down below it. It is suggested that you only try this after spending some time studying the differences between CSS absolute, relative and static blocks.

When the layer was created, it was created at the absolute bottom of the HTML code regardless of the position it was created in. Due to this, converting a layer to relative or static will often require cutting and pasting the layer to the correct position within the HTML source. If you lose a layer while doing this, you will often find it by changing to editing in the full screen mode.

Margins and Padding for layers should be declared explicitly. Different types of browsers have different default values for these.

Note: For some reason, actual borders that you define in CSS do not show up within some versions of the WYSIWYG editor. You need to click the preview to see the final borders.

I should point out that the way these layer buttons have been set up, makes them extremely hard to use. Many people will find that it is a lot easier to go into the HTML source code and directly add DIV blocks rather than to use these buttons. The next section shows how.

Blocks of Content for Background, Border and Other Parameters
--------------------------------------------------------------------------------------

The following can be used so that CSS parameters can be applied to the complete editing area. Alternatively, these DIV blocks can be used to surround a number of paragraphs or objects.

Click the Edit HTML
At the beginning of the HTML area insert

<div>

At the end of the HTML area place the following:

<p style="clear: both">
&nbsp;
</p>
</div>

then click on the Update button.

Click inside the general editing area
Click on the DIV in the status line just after the word Path.
Select Edit CSS
In Edit CSS you can set parameters that apply to the whole area such as background color or background picture or a border around the whole area.

Note: I had problems with editing in IE where IE would split up the DIV block under certain circumstances when doing further editing. This doesn't seem to occur with other browsers. If using IE then it is best to do this after all the other content is finished.

Negative values for Margin
-------------------------------------
Negative values of Margin are often used to make objects overlap. Overlapping objects within the editing area is simple. You can force which object goes over the top of which other one by giving the top object a high positive z-index value (under the positioning Tab of the Edit CSS). The object you want to be underneath can be given a negative value. (This is the opposite from that used for floating/sinking menu items in Drupal)

Due to the complexity of the rules on which object goes over the top of which, different browsers will give different effects when trying to get an object to overlap outside of the current editing window.

For example, the following results were found when attempting to place an object at the left of the main central column then shifting it left with a negative margin so that it partly covered part of the left menu area.

- It generally worked when only shifting the object up to about 30 px
- With Netscape or Mozilla or Firefox it generally works for several hundred pixels into the left menu area with a number of themes such as Zen.
- With Internet Explorer, the image would be cut off about 30px into the menu area with most themes. An exception to this was the Newspaper and Newspaper2 themes which allowed the image to show up.

Image Maps
-----------------

Download, unzip and install X-Map from
http://www.carlosag.net
This is a free program.

To use the program
1) Load image or a copy of the image. If this is just a copy of the image, ensure that it is same size and resolution as the actual image.
2) Create Hotspots that cover the areas that want to have links from. You can drag to move the hotspot or to change the dimensions.
3) For each hotspot fill in the ALT and the HREF parameter on the top left side. The HREF is the full address (URL) where you are linking to. Note: Most of these will start with http:// The ALT is a description of where you are linking to. Include keywords in this.
4) About 4 or 5 lines from the top of code (in the bottom half of the program window) is the following
<map name='map'>
Change the final map within quotations to a name of your choice.
5) In the Outline area (bottom left), just below body click on the map#myname
where myname is the name you created in 4) above. Copy using control C.
Note: you are copying everything from <map name= .... through to </map> to the paste buffer.
6) Go back to the TinyMCE editor. Click on the Edit HTML Source button
7) Paste the above map definition into the very beginning of the HTML Source and click update.
8) Select the image. Click on the insert/edit image button. Under the Advanced TAB within Miscellaneous is Image Map. Type here the name you created in 4) above and click on the Update button.

TinyMCE Keyboard Shortcuts
----------------------------------------
Ctrl-Z Undo
Ctrl-Y Redo
Ctrl-B Bold
Ctrl-I Italic
Ctrl-U Underline

The Ctrl-Z is particularly useful. This allows you to retrace through a number of your last operations.