The reason for this is that WYSIWYG editors on Joomla by default look for template.css and some will only look for this. When editors can use this file they can apply the default template styling into the WYSIWYG editor window making things look the same as they will display for the end user.

Currently Gantry does not have a template.css and as such WYSIWYG editors have no styling.

Not all WYSIWYG editors have an option to use custom CSS files and indeed other extensions (which I cant think of at the minute) could have the same issue.

For completeness I will outline both ways I can get JCE editor to have the gantry styling in the editor itself just in-case someone mentions that you can use custom CSS files as this feature request is for more than JCE editor.

Option 1 - template.css

This is the template.css emulation method I would like to see.

create the file /g5_helium/css/template.css and add the following into it:

@import "../custom/css-compiled/helium_13.css";
@import "../../../media/gantry5/engines/nucleus/css-compiled/joomla.css";
@import "../custom/css-compiled/helium-joomla_13.css";
@import "../custom/css-compiled/custom_13.css";

This effectively loads the gantry styling into the template.css which the WYSIWYG editor can use without affecting any gantry code

Option 2 - in JCE Editor

In the JCE editor component you can specify the custom css files with the following lines. This method might be a little bit quicker than using the template.css method.

templates/$template/custom/css-compiled/helium_13.css,
../../../media/gantry5/engines/nucleus/css-compiled/joomla.css;
templates/$template/custom/css-compiled/helium-joomla_13.css,
templates/$template/custom/css-compiled/custom_13.css

This also works, $template is changed for the active template name

templates/g5_helium/custom/css-compiled/helium_13.css,
../../../media/gantry5/engines/nucleus/css-compiled/joomla.css;
templates/g5_helium/custom/css-compiled/helium-joomla_13.css,
templates/g5_helium/custom/css-compiled/custom_13.css

Other Notes

This is a full collection of the Gantry Template files loaded in the frontend of Joomla.

@import "../../../media/gantry5/engines/nucleus/css-compiled/nucleus.css";
@import "../custom/css-compiled/helium_13.css";
@import "../../../media/gantry5/assets/css/bootstrap-gantry.css";
@import "../../../media/gantry5/engines/nucleus/css-compiled/joomla.css";
@import "../custom/css-compiled/helium-joomla_13.css";
@import "../custom/css-compiled/custom_13.css";

these are not needed for the WYSIWYG

• nucleus.css - this is to do with g-content and layout and a css reset sheet
• bootstrap-gantry.css - modified gantry code but as bootstrap is not running in the browser it is not needed