Tips for creating a custom IMS theme

sam · 2013-10-15 14:04:14

I recently had to combine a website with an IMS library. This involved restyling a major amount of the basic IMS elements while replacing standard IMS templates for headers, footer, menus etc. I was new to this and therefore didn't get everything right first time. So here is a summary of what I would consider a sensible approach taking into account lessons I have learned from the experience.

Start from a clean theme

Do your editing in a new theme, possibly with a custom user. This is essential if your IMS is live and being used. Having a vanilla backup ready to re-deploy will allow you to break things as you test your new code. Just as useful it allows you to always have the original template code on hand to use.

You can always get back to a default theme by creating a new theme and using it. But starting from a new theme is always wise.

Style via CSS rather than editing a template

Once a template is edited it is no longer automatically upgraded when IMS is upgraded. Wherever possible it is easier to keep edits to template to a minimum and even better to not edit them at all. Use an extra CSS file (see below) and override the IMS styles rather than delete the originals.

Use a Custom CSS file rather than editing the standard CSS files

Once a CSS is edited it is no longer automatically upgraded when IMS is upgraded. Wherever possible it is easier to keep edits to a CSS file to a minimum and even better to not edit them at all.

Use Extra Files

Add extra files whenever you can rather than editing IMS's files. Use a custom CSS file where you override the IMS default styles and link it into header_htmlhead.tpl

If you have extra images, javascript etc, you can put these here too.

    <link rel="stylesheet" href="{$IMS_THEME.themeurl|escape}custom.css" type="text/css" />

Add this *after* the other css files so that it overrides them.

If you want to link to your websites styles this is where you would also put the link.

Use wrapper DIVs to avoid namespace collisions in linked CSS styles

I wrapped my website's CSS in a namespace so I could link it directly into IMS. Then I could use my website styles directly in an IMS templet by simply adding a wrapper 'namespace' div.

In my-website.css:

.my-website .menu { .. }
.my-website .header { .. }
.my-website .footer { .. }
:

In the IMS templates

e.g. header_common.tpl:

<body>
<div class='my-website'>
:

e.g. footer_common.tpl

 
:
</div>
<body>
:

Use wrapper DIVs to create namespaces to override IMS CSS styles

When you need to restyle an IMS element it is sometimes easier to use your namespace (or add another namespace) rather than rely on !important. Especially if you want to style on instance but leave others as they were.
e.g.:-

<div class='my-widgets'>
	:
	<div class="ims_widget_1">
		:
	</div>
	<div class="ims_widget_2">
		:
	</div>
	:
</div>

.my-widgets .ims_widget_1 {
	:
}

.my-widgets .ims_widget_2 {
	:
}

I could then change just the widgets I wanted without overriding every similar widget in IMS.

Add comments around everything you change

Adding good comments should make it possible (if not easy) to diff your changes and reapply them should IMS upgrade the template set. Be sure to put a comment before and after your change.
I wish I'd been a bit more consistent in doing this.

Third Light Developer Exchange

Announcement

If you wish to join the Developer Exchange, please contact your account manager - this is to avoid unnecessary spam in the forums. Many thanks for your understanding.

#1 2013-10-15 14:04:14