how to wrap text around images in the Oxygen Builder

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.

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on tumblr
Share on reddit
Share on delicious
Share on stumbleupon
Share on digg
Share on email
Share on print