Themeum

<p>This plugin integrates Tutor LMS with the popular Oxygen Page Builder plugin. It adds all the functionalities needed to create a complete WordPress LMS website using Oxygen Builder.</p>
<p>To use this plugin, you must first have all the plugins installed and activated. The required plugins are:<br />
 *<a href="https://wordpress.org/plugins/tutor/" rel="ugc">Tutor LMS (Free/Pro)</a><br />
 *Integration Plugin<br />
 *<a href="https://oxygenbuilder.com/" rel="nofollow ugc">Oxygen Builder</a></p>
<h4>What Oxygen Builder Brings to Tutor LMS</h4>
<p>Oxygen builder is a very unique and robust page builder, and you can practically create your custom made theme for an LMS platform. Thus you don’t have to rely on other third-party themes and make your website from the ground up exactly the way you want it.</p>
<p>Oxygen Builder provides a plethora of features like the header builder, huge design library, and full responsiveness controls. Moreover, it also comes with a library of pre-made design sets that can be imported directly to create rich webpages. We believe with this integration activated, you can create an amazing platform for your instructors and students alike.</p>
<h4>Oxygen Visual Editor</h4>
<p>Like all other Oxygen enabled sites, installing Oxygen will strip out all the visuals of your old site. The visuals will now be controlled by Oxygen’s templates. Therefore, your theme will basically be useless. You will have to create Oxygen templates to properly show your content in a usable layout.</p>
<p>With this integration plugin enabled, you will see a brand new tab in the editor. This tab labeled “Tutor LMS” contains all the necessary elements needed to build a perfect LMS website. Whether you’re a designer or a WordPress developer, it will suit all your needs.<br />
There are two ways of creating a course page, for example:</p>
<ul>
<li>Add a single course template</li>
<li>Build your custom design using single course elements</li>
</ul>
<p>If you add the single course template, you’ll be able to edit each of the elements. But you won’t be able to change the layout of the course page itself. To do so, you’ll need to create a custom course layout with all the necessary elements.</p>
<p>If you’re familiar with the Oxygen Builder plugin, creating a new custom layout with custom headers and footers should be a breeze. We’ve added all the necessary elements needed to create a full Tutor LMS website. We’ve broken down all of Tutor LMS into small elements that you can now use to create a customizable layout for all Tutor LMS pages like course page, quiz page, archive page, and so on.</p>
<p>To read about every aspect of this plugin, please refer to our <a href="https://www.themeum.com/docs/oxygen-builder-introduction/" rel="nofollow ugc">documentation on the Oxygen Builder</a> integration plugin. You will find all the information on this plugin in our documentation website.</p>


Oxygen Tutor LMS

Build E-Learning website by Oxygen Builder and Tutor LMS Integration plugin

Levels Branding and Webdevelopment

<p>Levels Block Editor Styles for Oxygen Builder automatically injects your Oxygen Builder CSS into the WordPress block editor, ensuring that what you see in the editor matches what appears on the frontend.</p>
<h4>Features</h4>
<ul>
<li><strong>Automatic Style Detection</strong> – Automatically finds and loads all relevant Oxygen CSS files</li>
<li><strong>Scoped Styling</strong> – All CSS is scoped to prevent affecting editor UI elements</li>
<li><strong>Reusable Block Support</strong> – Detects and loads styles for embedded reusable blocks</li>
<li><strong>Smart Context Detection</strong> – Only loads in the block editor for users with edit permissions</li>
<li><strong>Performance Optimized</strong> – Live-read approach with minimal overhead</li>
<li><strong>Responsive Images</strong> – Automatically converts img tags to responsive versions with srcset and sizes attributes</li>
<li><strong>Per-Image Size Control</strong> – Use the <code>data-image-size</code> attribute to override the default image size per element</li>
<li><strong>Settings Page</strong> – Configure features under Oxygen > Block Editor Styles</li>
</ul>
<h4>Block Editor Styles</h4>
<p>The plugin collects CSS from four sources:</p>
<ol>
<li><strong>oxygen.css</strong> – Core Oxygen framework styles</li>
<li><strong>universal.css</strong> – Site-wide Oxygen styles</li>
<li><strong>Page-specific CSS</strong> – Cached page styles</li>
<li><strong>Reusable block CSS</strong> – Styles for embedded reusable blocks</li>
</ol>
<p>All CSS selectors are automatically rewritten to be scoped within the editor content area to prevent affecting the WordPress admin UI.</p>
<h4>Responsive Images</h4>
<p>When enabled, the plugin automatically replaces <code><img></code> tags in your content with responsive versions that include <code>srcset</code> and <code>sizes</code> attributes. This provides optimized images for all screen sizes without any manual work.</p>
<p><strong>How to use in Oxygen Builder:</strong></p>
<ol>
<li>Go to <strong>Oxygen > Block Editor Styles</strong> in the WordPress admin</li>
<li>Enable “Responsive Images”</li>
<li>Choose a default image size (e.g. “large”)</li>
<li>All images in your content will now automatically get srcset attributes</li>
</ol>
<p><strong>Per-image size override:</strong></p>
<p>You can override the default size on individual images using the <code>data-image-size</code> attribute:</p>
<ol>
<li>Select your Image element in Oxygen</li>
<li>Go to <strong>Advanced > Attributes</strong></li>
<li>Add attribute: <code>data-image-size</code></li>
<li>Set value to any registered image size: <code>thumbnail</code>, <code>medium</code>, <code>medium_large</code>, <code>large</code>, or <code>full</code></li>
</ol>
<p>The <code>data-image-size</code> attribute is automatically removed from the final HTML output – it only serves as a control attribute for the plugin.</p>
<h4>Requirements</h4>
<ul>
<li>Oxygen Builder 4.x (must be installed and activated)</li>
<li>WordPress 5.8 or higher</li>
<li>PHP 7.4 or higher</li>
</ul>
<h4>Related Plugins</h4>
<p>Looking to speed up your Oxygen workflow? Check out <a href="https://wordpress.org/plugins/ready-made-oxygen-integration/" rel="ugc">Ready Made Oxygen Integration</a> – Turn Figma designs into editable Oxygen Builder sections – copy & paste, just like that.</p>
<h4>Optional Dependencies</h4>
<p>For 100% reliable CSS scoping, you can install the CSS parser library via Composer:</p>
<pre><code>composer install --no-dev
</code></pre>
<p>Without the library, the plugin uses a regex fallback that works for most cases.</p>
<h3>Credits</h3>
<p>Developed by Levels Branding & Webdevelopment OG</p>


Levels Block Editor Styles for Oxygen Builder

Syncs Oxygen Builder 4.x styles into the block editor for visual parity between editor and frontend. Includes responsive images with automatic srcset  …

Oxygen Tutor LMS vs Levels Block Editor Styles for Oxygen Builder