Jump to content






Photo
* * * * * 36 votes

IP.Board 3.2.0 - Visual Skin Editor

Posted by Matt , in Beta, 3.2.x 21 June 2011 · 30,045 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.


Posted Image

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.

  • AndyF, Kingsguard, Sailfindragon and 8 others like this



Nice interface :)
That is cool.........
I need a "jaw drop" smiley.
Cool :tongue: is it in beta 2 ?
Looking good.
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.
This looks awesome. Great work!
Worth the wait :P
Photo
KittyCanuck
Jun 21 2011 11:03 AM
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.

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.

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.
Very nice guys.... great work.

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!
Impressive!
amazing work guys!
Ooh, Shiney!
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.
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 ;)
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! ;)
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.

October 2014

S M T W T F S
   1234
567891011
12131415161718
19202122232425
26272829 30 31 

Latest Visitors

  • Photo
    ^AuRoN^
    12 minutes ago
  • Photo
    Teascu Dorin
    28 minutes ago
  • Photo
    OSandroid-iOS
    28 minutes ago
  • Photo
    AlfonsoAS
    34 minutes ago
  • Photo
    ZakRhyno
    Today, 09:53 AM
  • Photo
    Michael E
    Today, 09:41 AM
  • Photo
    t-e-d-d-y
    Today, 09:39 AM
  • Photo
    Sinistra
    Today, 09:30 AM
  • Photo
    pidje
    Today, 09:28 AM
  • Photo
    MikePT
    Today, 09:14 AM

Recent Comments

Search My Blog