Jump to content
Matt
 Share


4.0 - Theming: Easy Mode Editor

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!

 Share

Comments

Recommended Comments



 

I'm sure they will given the fact they're using pure CSS for background colours & gradients. Also font icons - which will automatically scale for retina screens :smile:

 

Yep - and the few images we use have retina versions too.

Link to comment
Share on other sites

 

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.

 

Very clever! :-)

Link to comment
Share on other sites

I suppose after you convert the theme to "manual mode" you can't go back to "easy mode"? I haven't seen this mentioned but I guess it works just like the visual editor works in 3.x.

 

it is mentioned in the images ;)

Link to comment
Share on other sites

Very good changes, also for "live" feature. I hope that sidebar editor is available also for other apps this time :P . But is possible show a button that "filter" css based on inspected selector? More user don't know firebug and similar tool... This will useful for begin to learn the new framework code more quickly and when use manual theme.

Link to comment
Share on other sites

If i am not mistaken third image has front end style inside.

 

blogentry-62-0-61720100-1386683902_thumb

 

 

 

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

 

This was sort of pointed out :)  The sentence above was added right after that image specifically, because it's the only one with a hint.

Link to comment
Share on other sites




Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...