4.0 - Theming: Easy Mode Editor

staff · January 8, 2014

A few years ago we revolutionised theme editing in IP.Board with the addition of the "Visual Skin Editor". This tool quickly became a popular way of making broad color changes to new themes to match in with an existing site or existing branding. For the first time, you could instantly view the changes you were making.

Goodbye Visual Skin Editor, hello Easy Mode Editor.

We have rewritten this tool from the ground up in IPS Suite 4.0 and renamed it the Easy Mode Editor now that it's a fully integrated part of the suite and not just a license add-on. It retains all the features you love and has a much better interface, more control and fully supports gradients. Let's take a look!

When you create a new theme, you have the option of creating an "Easy Mode" theme or a "Manual Mode" theme. As you would expect, the manual mode allows full editing of CSS and HTML. Easy mode allows you to edit the theme with an instant preview.

Once the new theme has been added you can launch it from the Theme list inside the administrator's control panel by clicking the wand button. You can still edit the HTML templates and custom CSS as normal should you need to.

The easy mode editor launches in a new browser tab or window (depending on your browser's settings). The floating palette overlay in IP.Board 3 was a little cumbersome as it took up a fair amount of room and you had to move it out of the way to view your changes. In IPS 4, we've made this a fixed sidebar which means that it doesn't have to reload when you navigate through the suite.

I've cropped out most of the public display as we're not quite ready to reveal that yet!

You can quickly colorise your new theme with the Colorize option. This chromatically changes the main colors of the suite quickly and easily.

A limitation of the Visual Skin Editor in IP.Board 3 was that it couldn't manage gradients so themes had those gradients removed and flat color applied. We now support gradients in IPS 4.0 from the Easy Mode Editor's color editing panel.

We previously blogged about the fantastic new theme settings feature in IPS 4.0. Some of these settings are now available to editing in the settings panel. This is a really quick and convenient way to change these settings.

Although the new Easy Mode Editor allows you to change most of the colors within the suite, there may be times when you want to write a few lines of custom CSS to tweak the theme a little more to your liking. We've got that covered too.

You can leave the theme as an Easy Mode theme for as long as you want. However, you may decide that you want a little more control and need to edit some of the framework CSS that underpins the suite. That's easy to do. Just choose the option to convert it to a Manual Mode theme and you are all set.

Never before has theming been so simple! This re-invented tool allows you to quickly edit your theme without fuss and you can instantly see the changes as you make them. We can't wait to see what you do with it!