How to add & use JCE Style: Clear

yellowwebmonkey web services

When creating articles with different sections, you may find that your images overlap into other sections.  You can create clear breaks between the images and the start of the following section by adding a custom style, Clear, to JCE and applying that to your articles.

Adding “Clear” as a custom style:

Go to Components –> JCE Editor

JCE Clear Tut 1


Choose Editor Profiles, then Default.


JCE Clear Tut 2

Click on the Plugin Parameters tab, scroll down the left side menu and select Styles.

JCE Clear Tut 3

JCE Clear Tut 4

Title: Clear All.  Tag: None (Apply to selected Tag).  Classes: clear  Styles: clear:both.  Then, Save and Close.

JCE Clear Tut 5


Using the Clear style in an article:

Now that you have the style set up, go to the article where you need to use it.  In this example, we only want the image to be with the first section, and have the second section begin after the floating image.

JCE Clear Tut 6

Highlight the line space between the end of the first section, and the heading of the second section. Select Clear All from the Styles drop down menu.

JCE Clear Tut 7


You will see that the second section now starts after the image in the first.


JCE Clear Tut 8


About YellowWebMonkey

YellowWebMonkey Web design offers reliable website design, SEO and digital marketing services for Joomla, WordPress and Shopify sites. We strive to be a one-stop shop for all your web needs.

Recent Posts

Follow Us