Jump to content
Matt
 Share


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:

 Share

Comments

Recommended Comments



You have got to be kidding me

 

Just looking at that globalTemplate ... it looks a nightmare to me

 

There are so many templates being 'parsed' into globalTemplate which means if want to change anything in them got to go and find the template to make the change rather than it all being in globalTemplate

 

Wonder how many other templates will have a load of other templates 'parsed' into it ?

 

I am not a coder but would have thought that by 'parsing' all those templates into globalTemplate would slow page loading as it has to 'go and load' the template before continuing loading rest of page rather than it all being in same template ... does it not also put more resource onto server to go and 'grab' the template to load it .... as said am not a coder so I could and likely am wrong ?

Link to comment
Share on other sites

  • Management

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.

 

As Tera says, there are "Theme settings" but we'll get to that in the next blog entry. :)

 

 

 

Looks great Matt. I'd like to think that the 'theme update' notification was influenced somewhat by my suggestion a while back.

 

Also - any explanation on how the parent & child themes work or is that the same as IPB3?

 

What would you like to see changed?

Link to comment
Share on other sites

  • Management

You have got to be kidding me

 

Just looking at that globalTemplate ... it looks a nightmare to me

 

There are so many templates being 'parsed' into globalTemplate which means if want to change anything in them got to go and find the template to make the change rather than it all being in globalTemplate

 

Wonder how many other templates will have a load of other templates 'parsed' into it ?

 

I am not a coder but would have thought that by 'parsing' all those templates into globalTemplate would slow page loading as it has to 'go and load' the template before continuing loading rest of page rather than it all being in same template ... does it not also put more resource onto server to go and 'grab' the template to load it .... as said am not a coder so I could and likely am wrong ?

 

The templates are compiled into grouped classes, so from an efficiency point of view, an embedded template has no more overhead than calling a PHP method.

 

One thing to keep in mind is that we're reusing templates heavily. So the includeCss and includeJs templates are universal for both the front end and the ACP. This means in this instance including the templates is the sensible thing to do otherwise you just have copy and pasted code. And we're against that. :)

 

Also keep in mind that a popular feature of IPB 2 was the "wrapper" whereby you had the skeleton of the document without much HTML markup and you could add your site chrome there. We dropped this in 3 as the system became more powerful but we lost the simplicity of this feaure. A lot of clients were confused about where to add their site header and footer. We've taken this on board and made the globalTemplate a shrine to simplicity so you can easily see where you need to add your own markup.

Link to comment
Share on other sites

  • Management

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.

 

Sounds like a great mod!

Link to comment
Share on other sites

Kind-of-unrelated question that has been in my mind for a quite a few of these blog entries...

 

With the fact that you're rewriting the whole platform code from scratch, does it potentially mean that previous bugs that have been fixed throughout the 3.x years could possibly return? Or are you keeping track or all of them and their respective fixes so that when you rewrite the code you're sure to not possibly reintroduce them? :tongue:

Link to comment
Share on other sites

I'm not clear on the template option to select the original or the newer one. Can you also edit the newer one to add markup that may or may not have been included in the older template? Or would you have to select one, then make any changes to that one later?

Link to comment
Share on other sites

  • Management

Kind-of-unrelated question that has been in my mind for a quite a few of these blog entries...

 

With the fact that you're rewriting the whole platform code from scratch, does it potentially mean that previous bugs that have been fixed throughout the 3.x years could possibly return? Or are you keeping track or all of them and their respective fixes so that when you rewrite the code you're sure to not possibly reintroduce them? :tongue:

 

 

We've learned a great deal over the course of maintaining 3.x so we know what to avoid. In terms of actual bugs, it's hard to really answer it. The new code is new, so there won't be the old bugs in there. But if you mean in broader terms with the encoding and editor issues, for example, then no, these bugs won't be reintroduced as we are much wiser now. :)

 

I'm not clear on the template option to select the original or the newer one. Can you also edit the newer one to add markup that may or may not have been included in the older template? Or would you have to select one, then make any changes to that one later?

 

The conflict screen simply gives you the option of which template bit to use. You can edit it after you have made your selections.

Link to comment
Share on other sites

I hope that !important will be used sparingly in the CSS files this time around.

 

After upgrading to 3.4.5, I've had to take my forums offline for two weeks now and counting, just trying to customize some of the colors and background colors in the CSS files. This has been time-consuming because I will go to make a logical change to a CSS class but nothing will happen. 

 

Trying to analyze what's going on with "Inspect Element" doesn't help much either because I see more broken (crossed out) CSS rules than not. I have resorted to changing every single hexadecimal to #ff0000 !important in a quest to find CSS classes (or simple lines) that are actually alterable. Most of these classes, however, appear to do absolutely nothing—no matter how many elements I change using !important.

 

Further, there are often so many imperceptible CSS clashes going on that sometimes if I try to invent my own class—just for the sake of using a single span tag in a template—it won't even work because something else is overriding it.  

 

If I was unclear I apologize. I am just hoping for a more user-friendly CSS system, and it looks like you are trying to do this. To state the obvious: even if you divide the CSS into many smaller parts rather than dumping them all into ipb_styles, if a class is not "active" then it's worthless. Please make sure that something actually happens if/when colors or font-sizes and the like are changed in the classes. 

 

I have been going through each of my classes one by one adding // apparently does nothing to each unresponsive line. If changes to that class or commenting out that class entirely has no apparent effect on anything, then it probably shouldn't be there.

 

But from an untrained end-user perspective, I had obvious reservations about commenting out "seemingly-unneeded" classes, which is why I'm hoping that you will be able to trim most of this out yourself from the top-up. It should follow that custom skins derived from a simpler "master" skin would be  easier for the users to modify successfully. 

Link to comment
Share on other sites

I hope that !important will be used sparingly in the CSS files this time around.

 

After upgrading to 3.4.5, I've had to take my forums offline for two weeks now and counting, just trying to customize some of the colors and background colors in the CSS files. This has been time-consuming because I will go to make a logical change to a CSS class but nothing will happen. 

 

Trying to analyze what's going on with "Inspect Element" doesn't help much either because I see more broken (crossed out) CSS rules than not. I have resorted to changing every single hexadecimal to #ff0000 !important in a quest to find CSS classes (or simple lines) that are actually alterable. Most of these classes, however, appear to do absolutely nothing—no matter how many elements I change using !important.

 

Further, there are often so many imperceptible CSS clashes going on that sometimes if I try to invent my own class—just for the sake of using a single span tag in a template—it won't even work because something else is overriding it.  

 

If I was unclear I apologize. I am just hoping for a more user-friendly CSS system, and it looks like you are trying to do this. To state the obvious: even if you divide the CSS into many smaller parts rather than dumping them all into ipb_styles, if a class is not "active" then it's worthless. Please make sure that something actually happens if/when colors or font-sizes and the like are changed in the classes. 

 

I have been going through each of my classes one by one adding // apparently does nothing to each unresponsive line. If changes to that class or commenting out that class entirely has no apparent effect on anything, then it probably shouldn't be there.

 

But from an untrained end-user perspective, I had obvious reservations about commenting out "seemingly-unneeded" classes, which is why I'm hoping that you will be able to trim most of this out yourself from the top-up. It should follow that custom skins derived from a simpler "master" skin would be  easier for the users to modify successfully. 

 

Are you editing a skin that was originally created using the Visual Skin Editor, by any chance? That uses !important to ensure the customized styles overrule the default ones, and it's the only place !important is used extensively

Link to comment
Share on other sites

Not sure how the skin was made, I was using "Pulse" as a primary skin. It's light on images and uses mostly solid colors, so you'd think it would be easy to change some basic colors. I tried asking the author for some help, but he wasn't interested. Giving him the benefit of the doubt, he might not have known how to change it. But when a skin author doesn't even know how to change the background color for simple IPS blocks, then you know something is too complicated.  

Link to comment
Share on other sites

Not sure how the skin was made, I was using "Pulse" as a primary skin. It's light on images and uses mostly solid colors, so you'd think it would be easy to change some basic colors. I tried asking the author for some help, but he wasn't interested. Giving him the benefit of the doubt, he might not have known how to change it. But when a skin author doesn't even know how to change the background color for simple IPS blocks, then you know something is too complicated.  

 

If you've found any instances of !important in any of my skins, let me know in the support topic and I'll look into it. I also thought that I'd made it pretty clear that theme modifications are not part of the support package offered with my themes. If you want to develop my themes further, that's up to you. It has nothing to do with me 'not being interested'.

Link to comment
Share on other sites

Was expecting a reveal of the new 4.0 skin. :/

 

You and me both... the current thinking by IPS staff is that they don't want to reveal the new look & feel until much closer to release, because apparently we'll all get so excited that once we see it, any delay will break the momentum, cause dramarama, or whatever... I don't really appreciate this sort of "customer psychoanalysis" because it reminds me vaguely of recent vBulletin experiences; if the theme has been more or less finalized, I think it would be responsible to let people know what it looks like, to assist with planning. I for one would love to get a head start on considering the impact & potentially modifying my current site so that IPS4 will be more of a drop-in and not require extensive customization, but I can't do that until we've got SOME idea what it will look like. Responsive email templates have been shown, the ACP has been shown, and both share a very clean, flat aesthetic. I'm a fan, and it seems like the general reaction has been positive. Even though IPS staff have stressed that these two DON'T represent the actual forum theme, wouldn't it be rather... odd... if they were THAT far off? End users do actually SEE the email notifications, and wouldn't it be kinda goofy if those notification emails looked nothing like the forum software that was sending them?

 

I'm kinda assuming the cat is 20-30% out of the bag and that the IPS4 theme actually does resemble the responsive emails & ACP on some level; while I respect the decision to delay unveiling the theme as being IPS staff's to make, I wish they'd reconsider a tiny bit and give us all a bit more time to respond to & plan for what constitutes a key component of the new release...

Link to comment
Share on other sites

 

 wouldn't it be kinda goofy if those notification emails looked nothing like the forum software that was sending them?

 

As a result, we've taken the approach of creating email templates which are simple in appearance and would work well for most sites, with the goal of hopefully avoiding the need of most sites to edit them at all (though you can, if you wish). The colors we've used are fairly neutral, for this reason.

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