Jump to content
Matt
 Share


4.0 Advanced Theming

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!

 Share

Comments

Recommended Comments



The IPB could also automatically add all the links. Css in the header and all the links. Js in the footer of the theme by having the same load faster.
 
It could also be an option included in the generated code, get out now compressed and minimized.
Link to comment
Share on other sites

  • Management

The designer mode option sounds excellent.  Will the base system templates do versioning the way IP.C DB templates do?

 

James

 

How so? Currently a snapshot is taken when the theme is upgraded - either by uploading an XML theme or when the suite is upgraded.

Link to comment
Share on other sites

  • Management

For version check... Will there be a way to link this to the IPS Marketplace so that when you update a file there, the user is updated? Or will this have to remain a 3rd party (developer/designer's site) check?

Right now the developer enters a URL but integration with the marketplace is something we're very keen on.

Link to comment
Share on other sites

  • Management

Great improvements.

 

- Can we create multiple 'custom' tabs ?

 

- 'Designers mode'...Finally! :smile:

Hi Tom - currently there's only one 'custom' tab - can you give some examples of why you'd need more please?

Link to comment
Share on other sites

  • Management

 

The IPB could also automatically add all the links. Css in the header and all the links. Js in the footer of the theme by having the same load faster.
 
It could also be an option included in the generated code, get out now compressed and minimized.

 

Can you expand on this please? I'm not sure I follow.

Link to comment
Share on other sites

Hi Tom - currently there's only one 'custom' tab - can you give some examples of why you'd need more please?

 

It would help massively with organisation. Being able to separate certain features & sections into separate tabs would be great. Eg - 'Typography', 'Layout', 'Slider', 'Footer' etc.

 

Here's a screenshot of a WordPress settings page by WooThemes who are undoubtedly the best themes provider for WordPress.

 

http://i.imgur.com/76P41XM.png

 

If all those settings were confined to a single tab, it would be an absolute nightmare to navigate.

Link to comment
Share on other sites

Something I just noticed, the badge tells you the new version but in the page I can't see anywhere the current version of the skin. It would be useful to be able to compare it. For example a skinner might release a new "major" version of the skin (with big changes) so from 3.x to 4.x compared to a minor release which only fixes 1-2 bugs.

Link to comment
Share on other sites

Right now the developer enters a URL but integration with the marketplace is something we're very keen on.

 

Just so folks are aware, there's an app I created in the Marketplace that makes it very easy for developers to do this, and will be updated for 4.0 as soon as possible:

 

 
I just wanted to throw this out there so as to prevent people from being discouraged that providing this update URL would be a complicated process for them.  With this app, you just enter in the details of your product in a UI in the Admin CP and it generates an update URL for you which you can provide with your product.  You can then update the info about your product in your site's Admin CP as needed and the URL will automatically return that there's an update available if necessary.
Link to comment
Share on other sites

but with curl is not possible to verify if into ipsmarketplace have new version of plugin? directly from the own site!? (such as play store of android or itunes of apple)

I do not understand whether it is possible or not, I know the version with xml json output, but other solutions more "friendly-developer"?

if site of developer is down? (often) leave a multi-type of check version (then from ips tool or developer site if present)

 

awesome work for custom setting and + 1 for multi-tab suggested by tom!!

 

suggestion: is possible to display into new page(or other way) a print_r() of singular class or function..? it would be helpful to have on hand some of the output variable. A sort of quick links to the documentation (sidebar scheme of output template if possible)

Link to comment
Share on other sites

  • Management

 

It would help massively with organisation. Being able to separate certain features & sections into separate tabs would be great. Eg - 'Typography', 'Layout', 'Slider', 'Footer' etc.

 

Here's a screenshot of a WordPress settings page by WooThemes who are undoubtedly the best themes provider for WordPress.

 

http://i.imgur.com/76P41XM.png

 

If all those settings were confined to a single tab, it would be an absolute nightmare to navigate.

 

We agreed and I've added this functionality (and edited the blog entry):

blogentry-62-0-47186200-1382000658.png

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

×
×
  • Create New...