Paste with Code Editor

The Swiss Knife Pro feature allows you to write simple HTML code and convert it to Oxygen Elements during import.
The entire code editor is powered with Code Mirror autocomplete and Emmet.io. Emmet will be a huge time saver in repetitive tasks since it supports Multiplications.

section>div.container.grid>.col*5

<section>
  <div class="container grid">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</section>

1. Tip: To nest elements one inside another, use “>” div>div>div
2. Tip: To multiply elements, use “*number” div*5
3. Tip: If you use HTML Tag elements, it will be converted in Oxygen as well “header, footer, section, main…” will be div with applied HTM tag
4. Tip: If you want multiple classes applied simultaneously, add “.” between class names. container.grid will be <div class=”container grid”>

Learn more about emmet.io in their official documentation.

To work even faster, we provided a Shortcut option that you can set up under Shortcuts manager > Paste with Editor and assign a preferred shortcut.

Paste with Firefox Dev edition.

Paste for Firefox Dev is fixed. Only Chrome has a clipboard function, so we needed to build one from scratch. When you try to paste with Firefox, you will get a notification that the clipboard does not exist, and you should paste it into a custom textarea so we can capture it. After you press CTRL + V and paste it, the text area will be closed automatically, and Oxygen Elements will be pasted. Remember that the clipboard to work website needs to be on HTTPS protocol. HTTP will not work.

Watch video presentation

Paste feature is now expanded and you don’t need to do anything under the settings page. 

If you copy any HTML element and paste it inside Oxygen builder, it will be converted to Oxygen elements. Any attached class that the element has, will be added. Any HTML tag that element has will be applied inside Oxygen builder.

Now you are not limited to only design sets that are inside oxygen ecosystem. You can use any free or premium HTML design set and convert it to Oxygen with single paste. 

We are fully compatible with Tailwind so If you are owning Winden you can use any free or premium design. 

In video bellow we are showing how to add Bootstrap and Tailwind components. 

And the last if someone give you string [text code] from Hydrogen you can paste it with Swiss Knife without any need to install Hydrogen on your website. 

Version 4.1.0 is bringing you the feature to convert any HTML page to Oxygen Builder as native Oxygen elements. Just copy HTML and Paste it as any other oxygen elements with Shortcut, Topbar icon or Right Click.

This is going to be real time saver in your journey to build websites. Imagine the possibilities. You can now convert any static design set to Oxygen.

In beta will explain how to remove Oxygen defaults so they don’t mess up with styling.

Oxywind compatibility

It is fully compatible and made for Oxywind where you can convert any TailwindCSS design set as native Oxygen elements.

New features introduced in Swiss Knife 4.0.0

Features

• Lorem Ipsum generator
• Random Unsplash Images
• Class manager (and merged lock class to this feature)
• Advanced Settings tabs on the left side
• Bigger Padding and Margin boxes
• When you are on template page added button to go back to all templates
• Right Click
  • Cut
  • Copy
  • Copy Conditions
  • Paste
  • Duplicate
  • Make Reusable
  • Rename
  • Set Conditions
  • Change ID
  • Wrap with div
  • Delete
• Delete Data when plugins is uninstalled
• New keyboard shortcuts
  • Cut to Clipboard
    Copy to Clipboard
    Paste to Clipboard
    Copy conditions
    Advanced – Background
    Advanced – Size & Spacing
    Advanced – Layout
    Advanced – Typography
    Advanced – Borders
    Advanced – Effects
    Advanced – Custom CSS
    Advanced – Javascript
    Advanced – Attributes
    Advanced – Background – Gradient
    Advanced – Effects – Animate On Scroll
    Advanced – Effects – Opacity
    Advanced – Effects – Transition
    Advanced – Effects – Box Shadow
    Advanced – Effects – Text Shadow
    Advanced – Effects – Filter
    Advanced – Effects – Transform

Faster and better way to write classes in Oxygen Builder. Experience native code editor class manipulation.

SCSS Source Maps

If you are using SCSS Partials this is we important update for you. Go to Scripts Organizer > Features and enable “Create a SCSS Source Map”.

Creating source maps gives you the ability to see where partial code is coming from. Before you got only a link to 4-header.css inside the development tools. However, when you open code block with “ID 4”, you
are unsure of where partial code is coming from.

Once feature is enabled, it will display you SCSS Partial name instead of code block name.
You can easily recognise SCSS Partial name as it have prefix “_”.

The code is coming from partial _6 and is actually on the first line. Number after scss: indicates where the code is located within the code editor.

A new feature is added to the preview.

When you hit the home button, the url of the website home page will automatically be added and a request will be submitted. You do not have to copy, paste, and submit anymore.

HTML, CSS, SCSS and JS inside Admin area only

We now have the ability to load HTML, CSS, SCSS and JS inside WP Admin area without making those scripts visible to front end users. Customise them and make them white labeled without having to install any extra plugins.

Before, only PHP was possible and you would have to write inline CSS or JS for it. That wasn’t a good experience since users lacked full autocomplete power.

Below, you can grab the code to start modifying WP Dashboard.

:root{
    --admin-bg--1: #2c3338;
    --admin-bg--2: #2c3338;
    --admin-action: #33a3ff;
    --admin-text: whitesmoke;
}


body{
    background-color: var(--admin-bg--1);
    
}

.wrap {
    * {
        color: var(--admin-text);
    }

    a{
        color: var(--admin-action);
    }
    
}

.postbox{
    background-color: var(--admin-bg--2);

    input, textarea{
        background-color: var(--admin-bg--1);
    }
}

Put things in order and focus on what you need.

We added a 3rd tab under WP Admin Cleaner: Menu Order.
All menu items have a drag-and-drop feature and their icons for easier preview.

At this point only top lever items are available for sorting.

If you are working with Oxygen you know that disable themes, but you still need to deal with update messages from the themes.

Thats why I created Oxygen Bare Minimum Theme that does not need any effort.

Theme is not branded by dPlugins and you can use it for free without any connection with us.

Theme is light and only 10kb with the screenshoot.png

If there is problem with Oxygen you will get blank not branded page with the message:

Your Oxygen Builder is not active.

Edit theme