Jump to content

Invision Community Blog


Managing successful online communities

Matt
Sign in to follow this  
 

4.0 - Introducing Themes

IPS Social Suite 4 is a modernization of our software line and rather than just refactor existing work, we are rewriting the code from scratch which gives us a chance to really evaluate the interface elements and labels. We felt that "themes" was a much more modern and better understood term than "skins". Of course, the name is just the start, here are some of the other improvements:

Managing Themes in IPS Social Suite 4
As you would expect, the interface has been completely overhauled in IP.Social Suite 4. All the familiar elements are there but we've simplified areas and made it easier to manage your themes.



As you can see from this screen shot, theme authors can now inform customers when they have an update available for them. The interface makes use of the new IPS Social Suite 4 Trees model which means you can quickly search for theme names and re-order themes.

In IP.Board 3, you could change the logo of the suite. We've made this even easier in IP.Social Suite 4. The upload fields are easily accessible on the edit theme form. You can even upload a Facebook sharer image and favicon!


Downloading and Uploading Themes
In IPS Social Suite 4, downloading and uploading a new version of a theme could not be easier. Just select the menu item and it's done. You no longer need to navigate to separate areas of the Admin CP to do this.



Conflict Management
What happens if you upload a new version of a theme but it contains changes to templates you have also changed? You'll get a chance to review these changes and select which version to use on the conflict management page.


Editing templates and CSS
The template and CSS editor should be familiar for any existing customers. The editor is now fully syntax highlighted which will make writing and editing code so much easier.



The template syntax is now much more compact as you can see from the above screen shot. We've also added a few things to reduce the amount of template logic required.

A common need is to load a template if a condition is matched:

{{if member.isAdmin()}}
{template="admin_bar"}
{{endif}}


You can now put the conditional inside the template tag like so:

{template="admin_bar" if="member.isAdmin()"}


This is much easier to read and reduces a lot of visual clutter. The combination of the better template syntax and HTML 5 mark-up results in a dramatic reduction in size and complexity of often edited templates such as the globalTemplate which is commonly used to add your own site chrome.

The screenshot below shows all of the IPS Social Suite 4 globalTemplate and for comparison, part of the IP.Board 3.4 globalTemplate which is over 340 lines long!


The CSS framework much like the javascript framework has been completely rewritten and is now modular. This means that most CSS files are very small which makes looking for specific selectors much easier. In addition, upgrades are less destructive to your themes. If you made edits to the button styles, then only that one style sheet is altered leaving the rest as default. Of course, IPS Social Suite combines and minifies these separate CSS into fewer files when saved.

This blog entry is just an overview of the theme section in the Admin CP. We'll go into more detail in a later entry on the new tools available designed to make theme creation and management a breeze for theme authors. We know you will have a ton of questions but please be patient with us if we keep saying "wait for next blog entry" :smile:

Sign in to follow this  

Comments



Recommended Comments

I note this part: 

<body class='ipsApp ipsClearfix{{foreach output.bodyClasses as $class}} {$class}{{endforeach}}' data-controll...

Which I suspect came from my suggestion here: http://community.invisionpower.com/topic/384665-make-it-easier-to-give-elements-unique-styles-based-on-page-type/

 

Could you give any information on the solution you decided to go for here? What would be printed on the frontpage and in a topic for instance?

 

Admin interface looks nice! :)

Share this comment


Link to comment
Share on other sites

Looking forward to the changes. Hopefully Google Chrome doesn't highlight the editor text as misspelled words in the next version. It bothered me and slowed down the editor in IPB 3.4 because it highlighted nearly half of the text in large files like ipb_styles.css which was an annoyance. Everything I see so far in here looks great. Especially the ability to notify and update existing skins.

Share this comment


Link to comment
Share on other sites

I note this part: 

<body class='ipsApp ipsClearfix{{foreach output.bodyClasses as $class}} {$class}{{endforeach}}' data-controll...

Which I suspect came from my suggestion here: http://community.invisionpower.com/topic/384665-make-it-easier-to-give-elements-unique-styles-based-on-page-type/

 

Could you give any information on the solution you decided to go for here? What would be printed on the frontpage and in a topic for instance?

 

Admin interface looks nice! :smile:

 

We currently pass in classes so we can define some pages as non-responsive and also separate out the globalTemplate from other wrappers. However, it can also be used in a way similar to your suggestion.

Share this comment


Link to comment
Share on other sites

Is that "Xeon Blue" the default theme or one that's included or just a 'test' skin theme so you can demo the Theme pages more efficiently ?

 

It's just a test theme I created. I renamed it from "Test" as this didn't seem a very attractive name to have in a list for the purpose of the screen shot!

Share this comment


Link to comment
Share on other sites
Hi,

 

First of all, I would like to say that it's really good work, the IPS team is really strong and I would like to congratulate them. ;)

 

Now, I'd like to have a system for creating different works easily as on XenForo (style properties). This system allows to implement features on the skins that can be enabled/disabled easily, as for example, a background picker.
 
This kind of system will be on the new version of IP.Board?
 
Thanks.

Share this comment


Link to comment
Share on other sites

 

Hi,

 

First of all, I would like to say that it's really good work, the IPS team is really strong and I would like to congratulate them. ;)

 

Now, I'd like to have a system for creating different works easily as on XenForo (style properties). This system allows to implement features on the skins that can be enabled/disabled easily, as for example, a background picker.
 
This kind of system will be on the new version of IP.Board?
 
Thanks.

 

 

Like the visual skin editor?

 

The VSE has been available in one form or another for about 3 years.

Share this comment


Link to comment
Share on other sites

Nice work guys, well tought out! Love the look of the AdminCP theme too. Here's hoping members can finally create easy themes and header, logo, background images and colours for themselves in Blogs. Not designs and layout but main colours and images.

Share this comment


Link to comment
Share on other sites

No, a complete system to enable/disable features (A background picker, a color picker...) implanted in the skin. This has nothing to do with the design.

 

I assume that the "Custom Settings" option in that menu in the third image is actually what you want, but we'll see if I'm right in a future blog entry.

Share this comment


Link to comment
Share on other sites

 

I assume that the "Custom Settings" option in that menu in the third image is actually what you want, but we'll see if I'm right in a future blog entry.

Yes, this is perhaps in "Custom settings".

Share this comment


Link to comment
Share on other sites

As long as I can make a skin do exactly what I want it to do, without having to do any other editing than templates and css, I am happy enough :).

 

So please keep both granularity and modular structures in mind at the same time :).

 

IOW, do make it possible to override any user interface elements in css and templates, please., without having to write javascript or php code.

 

It just looks like that may be possible indeed, but I'd rather repeat myself than end up having to pull out my last few hairs ;).

 

Thank you for this highlight, however. It certainly looks a lot fresher and crisper than the current incarnation of the Suite, even if still minimalist :D.

 

Warm regards, Wim

Share this comment


Link to comment
Share on other sites

How hard would it be to do a module/application/mod/whatever it's called in IPB4 to allow the site logo to auto random rotator? I know this is a premature question base on things currently; but humor me.

Share this comment


Link to comment
Share on other sites

I personally liked how everything you needed in IPB 3.x was inside the globalTemplate, I didn't mind the long lines of code. It kept me from opening multiple templates at once, and it was just easier to manage in my opinion. :S

 

But other than that, I am liking the new look. I'll judge the theme editor when I get a hands-on feel of it. :)

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