After much searching, exploring and many failures I finally found a system that worked for me.
Here's for all the help you all have given me.
- Add your customs styles to portal.css in the portal root (Site Settings > Style Sheet) and save. These styles will be applied to your module text outside of the editor.
- Create a text file: FCK.xml. Here is where you will define styles to appear in the style list inside the FCK editor.
- Using the information in the FCK Editor Wiki help site, create your custom styles in FCK.xml. There should be an entry for each style you want to appear in the editor and in the order you want them to appear. See example below.
- Create a text file: FCK.css. These styles give the formatting to the styles you defined in FCK.xml so text in the editor will be formatted properly.
- Add your custom styles to FCK.css. This file contains ONLY your custom styles which are exactly the same as the custom styles you added to portal.css. There should be an entry for each style in FCK.xml you want to format.
Using these lists limits the styles that appear in the editor to only those you want, rather than the long list of styles in portal.css.
- Upload FCK.css and FCK.xml to your portal root using the File Manger.
- Log in to your portal as Host and edit an HTML/Text module with the FCK Editor.
- Select "Show custom editor options"
Select "Portal" for Settings Type.
- Expand "List of available styles for the editor"
Select "URL" for Style list generation mode. Do not choose "Dynamic" or you will get a style list of garbage.
Select "File" for Custom XML file, and select FCK.xml you uploaded to the root.
- Expand "Editor area CSS"
Select "URL" for CSS Generator mode. Again, do not select "Dynamic".
Select "File" for Custom CSS file, and select FCK.css you uploaded to the root.
- Confirm "Apply custom settings to: Portal" and click "Apply"
Close the FCK Editor custom options page and Cancel module editing.
- Refresh your browser with Ctl-F5 to force a refresh of the cache.
Now you can edit your module again and look for your nice custom list of styles. See how nicely they format your text when applied. They should match the formatting you see after updating the editor.
If you don't see your styles and the formatting is not right, you might try deleting files in your cache. Also, check for mistakes in FCK.xml, FCK.css and portal.css. They must all be in sync and correct.
Anyone have more suggestions or corrections?
Here is some sample FCK.xml adapted from FCK:
<?xml version="1.0" encoding="utf-8" ?>
<Styles>
<Style name="Image on Left" element="img">
<Attribute name="style" value="padding: 5px; margin-right: 5px" />
<Attribute name="border" value="2" />
<Attribute name="align" value="left" />
</Style>
<Style name="Image on Right" element="img">
<Attribute name="style" value="padding: 5px; margin-left: 5px" />
<Attribute name="border" value="2" />
<Attribute name="align" value="right" />
</Style>
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style>
<Style name="Topic" element="span">
<Attribute name="class" value="Topic" />
</Style>
<Style name="Custom Bold" element="span">
<Attribute name="style" value="font-weight: bold;" />
</Style>
<Style name="Custom Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style>
<Style name="Code" element="span">
<Attribute name="class" value="Code" />
</Style>
<Style name="Heading H1" element="H1" />
<Style name="Heading H2" element="H2" />
<Style name="Custom Ruler" element="hr">
<Attribute name="size" value="1" />
<Attribute name="color" value="#ff0000" />
</Style>
</Styles>
And corresponding FCK.css:
body, td
{
font-family: Verdana, Sans-Serif;
font-size: 13px;
}
.Title
{
font-family: Ariel, sans-serif;
font-size: 16px;
font-weight: bold;
color: red;
}
.Topic {
font-family: Ariel, sans-serif;
font-size: 14px;
font-weight: bold;
color: red;
font-style: italic;
}
.Bold
{
font-weight: bold;
}
H1 {
font-family: arial, sans-serif;
font-size: 1.7em;
font-weight: bold;
color: #006699;
}
H2 {
font-family: arial, sans-serif;
font-size: 1.3em;
font-weight: bold;
color: #006699;
}