JCK Editor Settings

I've had a few challenges in getting the JCK editor to work well with custom stylesheets. This is caused by my lack of understanding more than problems with JCK I believe. But, as a result, here's what I've found to work for getting a subset of custom styles to show up in the Styles drop-down list box in the JCK editor.

  1. Edit the JCK Editor settings by going to Components | JCK Manager.
  2. Click JCK Editor.
  3. Set "Use Template CSS Classes for Editing Area" to Yes.
  4. You can leave "Use Custom CSS Classes for Editing Area" empty.
  5. Set "Use Template CSS Classes for Styles ComboBox" to No.
  6. In "Use Custom CSS Classes for Styles ComboBox" enter the path to a custom CSS file such as /templates/mytemplate/css/template_editor.css.
  7. Create the template_editor.css and include just the styles that you want to appear in the list. Put them in the order in which you want them to appear.

Here's an example of a CSS file that works. I don't think it's necessary for all the parameters of each style to be in the style sheet as long as the styles are there with at least one parameter.

@charset "UTF-8";

/************************ format layout styles ******************/
.blue1 {border-top: 1px solid #769BD1; border-bottom: 1px solid #769BD1; float: right; margin-top: 10px; margin-bottom: 20px; clear: both; width: 400px; color: #000;}
.bluebox585 {width: 565px;}
.bluebox60 {width: 380px; }
.indent60 {margin-left: 60px;}
.nocolor td {padding: 4px 0;}
.norm {width: 100%; clear: both;}
.table_caption {clear: both; font-weight:bold; float: right;}
.width60 {width: 400px;}
.width100 {width: 100%; }
.width585 {width: 585px;}
#areds_study {float: right;  }

Main Menu