021 785 1282

How to wrap text around images in the Oxygen Builder

The Oxygen Builder is fantastic. It takes WordPress Design and Development to the next level.

One of the things you might want to add, that doesn't come standard with the OxygenBuilder , is to wrap your text around images in the classic editor. If you don't  add the custom css to Oxygen, your text will not wrap around your images in your inner content.

This is the css code that you need to insert into your stylesheet.

img.alignright { float: right; margin: 0 0 2em 2em; }
img.alignleft { float: left; margin: 0 2em 2em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

Add CSS Code to StyleSheet in the Oxygen Builder

  1. Open an Oxygen Template (Oxygen >Template >Edit Template)
  2. Manage > Stylesheets > Click Add New Stylesheet and Enter name for Stylesheet or edit your existing stylesheet.
  3. Copy and paste the code below and then click save.
img.alignright { float: right; margin: 0 0 2em 2em; } 
img.alignleft { float: left; margin: 0 2em 2em 0; } 
img.aligncenter { display: block; margin-left: auto; margin-right: auto; } 
.alignright { float: right; } .alignleft { float: left; } 
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

Video Tutorial on how to wrap text around images in the Oxygen Builder

I created a quick video tutorial to show you how to add the code to your main stylesheet in Oxygen.

Contact Details

©  Web Design Cape Town 2020
back to top button
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram