Guide - 7.8 Migration Branding Package

1 Introduction

With the Responsive Starter Store 3.0.0 - corresponding to Intershop Commerce Management 7.8.0.0 - the default way of including the storefront styling and the inclusion of an optional branding package has been changed. This change was necessary to provide an automatic cache busting for the CSS that comes from the deployed cartridges. CSS files that are changed via changing the branding package were already taking care of the cache busting via changed brandid.

If the automatic cache busting is not important or if the higher flexibility regarding the styling changes via branding packages is important then the CSS styles inclusion without automatic cache busting is still valid and possible in the Responsive Starter Store 3.0 and no migration is necessary.

2 CSS Styles Inclusion - Default and Branding

2.1 Without Automatic Cache Busting (7.6-7.7)

The Responsive Starter Store in its original version (1.0) introduced the inclusion of the storefront styling with only one reference to the theme.css. The automatic generation from Less already takes care of combining and minifying the resulting theme.css. Even the optional usage of a branding package is handled with this one stylesheet reference.

BaseCSS.isml - Responsive Starter Store 2.0 - ICM 7.7
<iscontent type="text/html" charset="UTF-8" compact="true">
<!--- Branding package hook --->
<link rel="stylesheet" type="text/css" media="all" href="<isinclude url="#URL(Action('IncludeBranding-Resource'), Parameter('Resource_Name','/css/theme.css'))#">"/>

A branding package for this way of referencing the theme.css needs to have the following structure in the uploaded branding.zip file.

Branding Package Structure - Responsive Starter Store 2.0 - ICM 7.7
|
+---css
|       theme.css
+---img
        logo.png
        logo@2x.png
        logoEmail.png

The content of the theme.css in such a branding package can be as simple as in the demo branding packages (e.g., branding-inTRONICS.zip).

 @import url("../../../css/theme.css");

With this @import the default theme.css of the deployed cartridges is used.

Including the theme.css in the branding package structure allows to add additional styling to the default styling, but also makes it possible to completely replace the styling from the cartridges' theme.css by using a modified theme.css that is not importing the styling information of the cartridges at all. This way of including the storefront styling provides the most flexible customization options.

A shortcoming of this way of including the default theme.css that it cannot take care of automatic cache busting via a last modified date. This made it necessary to change the way of including the default theme.css and optional branding styles.

2.2 With Automatic Cache Busting (7.8)

Beginning with the Responsive Starter Store 3.0 the default was changed as can be seen in the BaseCSS.isml listing below.

BaseCSS.isml - Responsive Starter Store 3.0 - ICM 7.8
<iscontent type="text/html" charset="UTF-8" compact="true">

<!--- include the default theme.css generated from Less with a lastModified time stamp for automatic cache busting --->
<isfilebundle name="/css/theme.min.css" processors="CSSCompressor,CSSURLRewriter">
    <isrender><link rel="stylesheet" type="text/css" media="all" href="#webRoot().'/'.encodeValue(File:Name).'?lastModified='#<isprint value="#File:LastModified#" formatter="0">"/></isrender>
    <isfile name="/css/theme.css"/>
</isfilebundle>
<!--- include an additional branding.css if a branding package is installed --->
<isinclude url="#URL(Action('IncludeBranding-StyleSheetHook'), Parameter('Hook_StyleSheet_Name','branding.css'))#">

<!--- Use this way of referencing the theme.css instead of the activated inclusions 
      if the branding package should be able to completely replace the theme.css instead of adding to it.
      This way does not provide automatic cache busting for the theme.css. --->
<!--- <link rel="stylesheet" type="text/css" media="all" href="<isinclude url="#URL(Action('IncludeBranding-Resource'), Parameter('Resource_Name','/css/theme.css'))#">"/> --->

The Less generated theme.css is now included via <isfilebundle> that provides means of determining the LastModified date of the current file. This date can be used to generate a distinct reference to the CSS file that will change whenever the file is changed. These different references will then ensure to the automatic cache busting for the theme.css.

With this way of including the default styling it is necessary to include the branding styles separately in the branding.css. For this reason the branding package structure needed to be changed too.

Branding Package Structure - Responsive Starter Store 3.0 - ICM 7.8
|
|   branding.css
|
+---img
        logo.png
        logo@2x.png
        logoEmail.png

The separate branding.css allows for adding styles to the default styling of the storefront cartridges. A complete replacement of the default styling is not possible with this referencing.

For convenience reasons the original styling inclusion was kept in ISML comments and can still be used. If doing so, this requires the former branding package structure and results in the shortcoming regarding the automatic cache busting for the theme.css.

Disclaimer

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.

Customer Support
Knowledge Base
Product Resources
Support Tickets