RocketTheme templates usually contain multiple Style Variations that can be selected when the template is configured for your site, or dynamically using a module. These style variations may contain different colors and images for changing the theme or look and feel of the site.

JCE uses your default (assigned) template's CSS file, (template_css.css in Joomla! 1.0.x or template.css in 1.5.x) to style the editor content area and populate the 'Styles' dropdown list with its CSS classes. The template css file usually contains a full set of styles for the template, but in the case of RocketTheme templates, may only contain a limited set, with all the colors and image styles contained in the variation style sheet. Editing content in JCE may therefore not appear the same as the final, saved output.

There are two methods to correct this problem, the simplest being to combine the style variation css file with the template_css.css. To do this, open the styles variations css file (most likely found in templates/rt_nameoftemplate/css/ and copy the contents of this file to the template_css.css file (also found in the templates/rt_nameoftemplate/css/ folder). This method has an added bonus in that all your Print Preview and E-Mail popups will now also be styled correctly, but the disadvantage of having to stick with one style.

The second method involves creating a custom stylesheet for JCE to use, that contains a combination of the template_css.css styles and the selected style variations css file. The difference here is that you don't edit the templates files directly, but merely create a specific stylesheet for JCE, for display and selection purposes only (does not affect your template output). A tutorial is already avilable for this, and can be found here - Creating a Custom Style Sheet for JCE