[IPS] 4.0 - Introducing Themes

Administrator · September 26, 2013

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: