Jump to content

Invision Community Blog


Managing successful online communities

Matt
Sign in to follow this  
 

IP.Board 3.2.0 - Visual Skin Editor

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.



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.
Sign in to follow this  

Comments



Recommended Comments

Great!

One question so far:

Can you use the visual-editor for already made skins? In the video the button "launch visual editor" (or something along these lines) was only available for the "red skin" you have had created with the visual-editor.

What if I want to creat the basics with HTML/CSS and then later use the visual-editor for small tweaks? Possible?

Share this comment


Link to comment
Share on other sites

[quote name='Bitter' timestamp='1308673946'] 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.

I believe, but I'm not certain (Matt took over by that point!) that you can 'finalize' a skin made with the visual editor, allowing it to be edited manually, but you can't go back the other way.

You can't put images into classes yet - but there's always the next version :) We have so many ideas for expanding on this, and that's one of them.

You can't move classes - the classes are basically invisible with the visual editor anyway, you don't need to deal with them. But from a technical point of view, the visual editor needs to understand the CSS it's working with behind the scenes, and we can only do that by allowing the default skin to be edited.

Share this comment


Link to comment
Share on other sites

[quote name='Ikadon' timestamp='1308675767'] Great! One question so far: Can you use the visual-editor for already made skins? In the video the button "launch visual editor" (or something along these lines) was only available for the "red skin" you have had created with the visual-editor. What if I want to creat the basics with HTML/CSS and then later use the visual-editor for small tweaks? Possible?

At this point in time, you can only create new skins with it, or edit skins first made with it. Supporting arbitrary CSS in custom skins is more complex, but something we may be able to support in future with the cooperation of skinners :)

Share this comment


Link to comment
Share on other sites

[quote name='Rikki' timestamp='1308675773'] I believe, but I'm not certain (Matt took over by that point!) that you can 'finalize' a skin made with the visual editor, allowing it to be edited manually, but you can't go back the other way. You can't put images into classes yet - but there's always the next version :) We have so many ideas for expanding on this, and that's one of them. You can't move classes - the classes are basically invisible with the visual editor anyway, you don't need to deal with them. But from a technical point of view, the visual editor needs to understand the CSS it's working with behind the scenes, and we can only do that by allowing the default skin to be edited.

Good enough for me! As long as I can start a skin by applying the basic color palette and then dig in deep and do the hardcore HTML edits and image changes manually, that already saves me a lot of time. Much of the skinning process as you know is just laying down the colors. This will make the things much quicker, and easier too!

Share this comment


Link to comment
Share on other sites

[quote name='.time' timestamp='1308677477'] Will this be able to make one-click colour schemes like the skin generator did? Love it :)

Yep - you click the Colorizer button, and it allows you to change the 4 key colors. From there, you can then go back and edit individual elements to make them better.

Share this comment


Link to comment
Share on other sites

Lots of questions:

- Does it colourize images
Not in this first release. There are very few images in IP.Board that need colourizing. It's something we want to add at some point.

- Can you edit raw CSS as well
You can switch the skin into a 'manual' skin and edit as normal. Once switched you can't switch back

- Can you visually edit a custom skin
Not in this release. We rely on knowing the class names and default colors. It's something we'll look into in a future release.

Share this comment


Link to comment
Share on other sites

Matt: DAMN! where are the filter button color changer!!!! Chaaaaarls!!!!!!!!!

anyways..this is Awesome! Now we dont have to buy other skins xD thanks for this :smile:

Edit: also, should make a member group option for this type :smile: maybe let members make their own skin?

Share this comment


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...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy