In a recent blog entry, we talked about theming in IPS Social Suite 4. More often than not, you'll want to upload a new logo, tweak a few colours, add some custom HTML or work on the global template to incorporate your existing site wrapper.
For this blog entry, I want to talk about the tools we have for more in-depth theming that professional themers will want to use to create downloadable themes for others to use.
Custom Settings
In 3.x, we have a number of system settings throughout the suite that control design decisions, such as displaying sidebars, or controlling the layout of items on a page. This isn't ideal, because we're limiting what themes can do themselves (and of course enforcing what they must support too). Instead, it would be better if these design decisions could be controlled by each individual theme, giving theme designers the freedom to be creative and display content in entirely new ways.
In IPS Social Suite 4, we've added per-theme custom settings. This enables you to create settings that are configurable by administrators when editing a theme. Even if you're not creating a theme to sell, you may want to add settings to control areas of your theme that are managed without making template edits each time you wish to make a change. For example, the default theme will have an option to add a rounded border effect to user photos. This is something that would be unnecessary as a system setting, but makes sense as a custom theme setting. Or you might want to add a setting that allows admins to toggle between showing and hiding a sidebar. There are a lot of possibilities here that would have required extensive custom code in 3.x.
When creating settings, you can choose which tab that they'll show in when editing a theme. This means you can group your settings by specific criteria such as "Colors", "Layout", etc.
Once you have created a custom setting, you're then able to use it in a HTML template or CSS file simply by using the following syntax:
{{if theme.rounded_photos}}
.ipsUserPhoto {
border-radius: 100px
}
{{endif}}
Or, if you want to use it without an IF clause, then you can simple use this:
<div>
{theme="rounded_photos"}
</div>
You can manage the custom settings from the theme edit form. In this screen shot, the tabs "Custom" and "Colors" are theme setting tabs.
Version Check
We've added the ability for theme creators to include a URL that is checked multiple times a day. All you as the theme creator needs to do is return a simple JSON object like this example:
{
"version": "4.0.1",
"longversion": 40001,
"released": 1377688587,
"updateurl": "http://www.exampleurl.com/announcement.php?theme=xeonblue"
}
This is a great way to notify your customers about updates to your themes.
More information is displayed when you mouse over the "Update available" badge.
Designer's Mode
There are times when you want to change many template bits and CSS files using your own development tools. The new ACP template and CSS editor is great for making edits now that it supports full syntax highlighting but for more advanced work you'll want to work with your favourite IDE and make use of its tools such as file compare and searching.
In IP.Board 3 we have the WebDav interface which allows you to work with plain .html and .css files but because it's sent over HTTP and each item needs recompiling to show changes, it's often a little sluggish and can be frustrating to work with if connection speeds start to suffer.
In IPS Social Suite 4 you can work with plain .html and .css files locally; there's no need to fire up a WebDav client. You enable designer's mode by adding a constant into constants.php. This will automatically write out the HTML and CSS files into a directory called "themes" right in your suite's root folder. You can edit these files and the changes are instantly applied to the suite making working very fast indeed.
Once you're done working in designer's mode, simply sync back the changes using the menu item on the theme's row and remove the constant.
This will copy the changes back to the database and remove any stale compiled templates and CSS files.
Diff
It's often very useful after upgrading to see which template bits have changed. The new "diff" tool instantly provides a list of changed, deleted or added template bits and CSS files. You can even download a copy as a stand-alone HTML file to distribute with your theme sets.
These advanced tools will make creating themes for IPS Social Suite 4 easier than ever before. We look forward to seeing what you create with them!