Friday, 30 October 2015 00:00

Getting the joomla editor to match the front end

Written by
Rate this item
(0 votes)

Well this one had me stumped for quite a bit.  I tried several different editors and all of them were totally willing to ignore the content styling from the front-end.  This sounds like a minor issue but with a dark background and light text it could become problematic fast.  This solution works, at a minimum, for JCE and probably many other MCE variants.

  1. Create or edit a stylesheet
    My tools, by default, create an editor.css stylesheet.  That's neat but it doesn't have the required items to style the editor content.
  2. Find the body selector
    Note, mine had more than one.  You might want to just put your own down at the bottom.
  3. Add the needed styling.
    In my case, it looked like this:

    body {
    color: #ffffff!important;
    background-color:#1a1a1a!important;
    font-family:Tahoma,Verdana,Arial,Helvetica,sans-serif!important;
    font-size:14px!important;
    }

    Note that every attribute is tagged with !important to ensure it doesn't get overwritten later.
  4. Save the stylesheet
  5. Flush any site caching going on
    Not so much Joomla's content caching but any caching being done by your hosting provider.
  6. Clear your browser's cache
    Yes, this is really important.  If you don't you will not see the changes.
  7. Smile because things look right in your editor now.
Read 3894 times