News and Announcements

  • entries
    500
  • comments
    13,821
  • views
    4,815,958

Contributors to this blog

IP.Board 3.2.0 - Visual Skin Editor

Entry posted

31,008 views

Since the very first release of IP.Board, those with a working knowledge of HTML and CSS have been able to alter the look and feel of the board to better match their site.

Over the years, we've made many improvements to the skinning system. For 3.2 alone we've added remote skin editing and more modular CSS to make editing much quicker.

Last year, we introduced the skin generator for customers with an active license. This has been a very popular service and quickly allows customers to produce a new skin that better matches their site colors. However, we felt that we could do better than this tool and do better than our competitors who allow you to 'blindly' change colors from the Admin CP without seeing the immediate effect it has on the board.

Wouldn't it be so much easier to just change the colors while browsing the board? We thought so.

Introducing the Visual Skin Editor
This brand new innovative new feature allows you to edit the board's colors right from the board itself! You don't need to know CSS, you don't even need to remember hex codes and you don't have to blindly edit oddly named CSS classes from the Admin CP.




Live Demonstration
As this feature is best demonstrated, I've recorded a short video in which I make a brand new red themed skin in about five minutes using this new feature.

The usual disclaimer applies: this is work in progress and contains some rough edges that will be smoothed out before release.

http://vimeo.com/25408269

As you can see from this video, it's a cinch to create a brand new skin in IP.Board 3.2! If you can point and click and use a basic paint editor on your computer then you're able to use this tool.

We're thrilled to announce this feature and look forward to your feedback and questions.




153 Comments



Posted

Nice interface :)

  • Loading...

Share this comment


Link to comment

Posted

That is cool.........

  • Loading...

Share this comment


Link to comment

Posted

I need a "jaw drop" smiley.

  • Loading...

Share this comment


Link to comment

Posted

Cool :tongue: is it in beta 2 ?

  • Loading...

Share this comment


Link to comment

Posted

Looking good.

  • Loading...

Share this comment


Link to comment

Posted

I've not had any problems with using CSS but this should help a lot with starting off new skins reducing the amount of time to get the sort of colour scheme you want. I will be using this.

  • Loading...

Share this comment


Link to comment

Posted

This looks awesome. Great work!

  • Loading...

Share this comment


Link to comment

Posted

Worth the wait :P

  • Loading...

Share this comment


Link to comment

Posted

Oh yes, a million times yes.

Not that it's difficult to just keep two tabs open, one in the ACP adjusting the CSS and one refreshing the live site to see changes, but still.

  • Loading...

Share this comment


Link to comment

Posted

[quote name='KittyCanuck' timestamp='1308672190'] Oh yes, a million times yes. Not that it's difficult to just keep two tabs open, one in the ACP adjusting the CSS and one refreshing the live site to see changes, but still.

So much easier to click to select the area you want to change, though :) And to be able to use a dropper tool to select a color without having to copy and paste.

  • Loading...

Share this comment


Link to comment

Posted

[quote name='Gaffney' timestamp='1308672137'] I've not had any problems with using CSS but this should help a lot with starting off new skins reducing the amount of time to get the sort of colour scheme you want. I will be using this.
That is my hope - that pro skinners can use it to get things going and save that laborious color changing.

  • Loading...

Share this comment


Link to comment

Posted

Very nice guys.... great work.

  • Loading...

Share this comment


Link to comment

Posted

[quote name='Matt' timestamp='1308672391'] That is my hope - that pro skinners can use it to get things going and save that laborious color changing.

Does that mean that you can 'disable' visual mode at some point through development to go back to manual CSS? Will be amazing if you can!

  • Loading...

Share this comment


Link to comment

Posted

Impressive!

  • Loading...

Share this comment


Link to comment

Posted

amazing work guys!

  • Loading...

Share this comment


Link to comment

Posted

Ooh, Shiney!

  • Loading...

Share this comment


Link to comment

Posted

Looks great. Well done, Rikki. Few questions, though.

Can a skin be edited using the visual and manual editor? Or can you only choose one or the other for a given skin?
Also, is the visual editor just for changing colors, or can images be placed into classes as well?
As a continuation of my last question, are classes moveable, or is this editor just for simple color changes?

Regardless, I see it making my job easier...or putting me out of a job if it is a really powerful editor, haha.

  • Loading...

Share this comment


Link to comment

Posted

A great feature that is going to help may, many people! Great work.
I like how you couldn't find how to change something and said you'll just leave that lol. Hopefully that element will be in the editor if it isn't already ;)

  • Loading...

Share this comment


Link to comment

Posted

Certainly great stuff and worth the hype! :D

I have a question:

Can we use this system to edit the existing (custom) skins? For example,. if buying a custom skin and wanting to change a detail or two, without having to sift thru the CSS.?

Or does this aply only for (creating) brand new skins?

Thanks and keep up the good work! ;)

  • Loading...

Share this comment


Link to comment

Posted

Awesome! I wish that there was some way to enable viewing the actual CSS in the visual editor for more complex edits, but I guess you just want it to be a simple editing tool, not a full-fledged skinning tool.

In any case, nice work.

  • Loading...

Share this comment


Link to comment

Posted

incredible - awesome!

  • Loading...

Share this comment


Link to comment

Posted

Very cool! :)

Can we switch between visual and manual editing when we would like, or are vi locked to only use manual OR visual?

  • Loading...

Share this comment


Link to comment

Posted

Awesome :o

Will this be available for testing in 3.2.0 b2?

  • Loading...

Share this comment


Link to comment

Posted

Cool, I like it

  • Loading...

Share this comment


Link to comment

Posted

Very impressive - nice job - Matt, Ricky and anyone else involved.

  • Loading...

Share this comment


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now