Making better use of Bootstrap with the JCE-Editor (css download)

StylesDropdown13-03-2013-15-31-34 The JCE-Editor is the first choices when it comes to the question: "Which aditional components should I install in Joomla! ?" The free communiy version will do for the tipps in this article. With the premium subscription you get some aditional plug-ins that save you a lot of time and for that small fee it is a no-brainer.If you are also using a template that is based on the Bootstap-Framework, we have a small treat for you.

It is a small CSS-file that let´s you set bootstrap formatations with the JCE.

The nice thing is that the file let you see otherwise "invisible" elements. So editing can be a lot easier. For example the striped backgrounds are only shown while editing, for normal visitors your site will look as usual.

 

BootstrapJceScreenshot Some of the formatatios can be done via inline-CSS (<p style="color: orange">some warning</p>). But as the project develops your content (HTML-Code) will get more and more bloated and harder to maintian. Many sensible formatations are allready included in Bootstrap, so it makes perfecct sense to use them.

Often one changed to code- or htm-view to enter the styles ( class="warning" ) manually into the paragraph (<p class="warning">some warning</p>). For "webguys" (nerds?) this is easy, but this can be achieved quicker. Simply select the text and set the style via the JCE provided dropdown menu. So even "normal people" an use it.

To reduce the learning curve and to avoid beginner errors, "invisible" elements will be shown with a bckground-color (only in the editor-window). These are clearfix-commands (.clearfix) as well as grid-commands (.span1 to .span12).

Download:

zipBootstrapForJCE-Helper-V1.0_2013-03-13.zip98.48 KB

The zip-file contains the following:

  • MyEditor.css (needed for the JCE)
  • TestContentBootstrapAndJCE.html  html-text to test the configuration
  • BootstrapJceScreenshot.png Screenshot how the test-text should look like.

Installation

(ok a bit "over the top" but it sounds better than "how do I get this thing to work")

Prerequisite you have a running Joomla! installation with installed JCE and use a template that is based on bootstrap.

  1. upload MyEditor.css in a folder of your choice
    I personaly would suggest that you use the css folder provided by your template
    /templates/somebootstraptemplate/css/MyEditor.css
  2. To configure the JCE that it uses that file go to
    components > JCE Editor > Global Configuration
    area: Formating & Display
  3. set the Editor Style to Custom CSS File
  4. Custom CSS Files: enter the path to the MyEditor.css file
    in our example his would be templates/somebootstraptemplate/css/MyEditor.css
  5. Testing if everything works corrrectly:
    1. copy the content of the TestContentBootstrapAndJCE.html file
    2. create a new content
    3. use the Troggel Editor to copy the html-code into the text-area
    4. switch back to normal editing mode (press Troggle Editor again)
    now it should look about as colorfull as the screenshot - congratulations! If not - don´t worry look at the screenshots and then go to the troubleshooting section below.

 

JCE Config13-03-2013-15-37-52 enteringDemoCodeStep1 enteringDemoCodeStep2 enteringDemoCodeStep3 BootstrapJceScreenshot

 

Troubleshooting

Most of the time when something does not work out as planed, one entered the wrong path into the JCE-Editor configuration (misspelled the template name, or disregarded that the names and paths are case sensitive).

After saving the configuration, clean your browser cache (just to be sure) and finnaly open a new editor-window and try the demo-content (test HTML-Code) again.