Introduction to editing responsive template packages


	Introduction to editing responsive template packages
	Last Edited - 08/16/2013 3:09pm PDT
	Category Path - Shopping Cart Software Components > Administration Area > Design > FAQs & Tutorials

The responsive template packages produced by Modular Merchant are designed using the Twitter Bootstrap "Fluid layout".

There are two main types of template package customization: customizing the appearance, and customizing the content.

Customizing the appearance of a responsive template package

The appearance of a responsive template package is determined by several layers of CSS styles. At the top layer are styles contained within the template_styles.css stylesheet. These styles create the unique appearance of a specific template packages, such as colors, fonts, sizes, images, and textures.

For simplicity's sake, it is recommended that custom CSS styles are added to the template_styles.css stylesheet.

As an alternative, a brand new custom stylesheet could be created to contain all of the customizations. It would be necessary to add a link to this new stylesheet in the head section of each template in the template package. The new link should be immediately after the existing stylesheet links. The new custom stylesheet would then be the top CSS layer, and template_styles.css would be the layer immediately below it.

example

With this approach, it would be possible to reset the template package back to the default CSS simply by deleting the link to the custom stylesheet from all templates. It could also simplify the customization process, since it would not be necessary to search the template_styles.css file for the rule set to be customized. Adding the desired rule set to the new custom stylesheet would automatically overwrite the rule set in the template_styles.css stylesheet, because of the cascading nature of CSS. Styles within a stylesheet that is linked later in the template have a higher priority than styles within a stylesheet that is linked earlier in the template.

The layer below template_styles.css consists of styles within the bootstrap-responsive.css stylesheet. The bootstrap-responsive.css stylesheet contains style variations for different screen sizes. This stylesheet includes a large number of media queries, and may be a useful reference when determining which elements have different rules based on different screen sizes. However, it is strongly recommended to avoid altering the bootstrap-responsive.css stylesheet. Customizations should be made to the top level template_styles.css stylesheet instead.

The layer below bootstrap-responsive.css consists of styles within the bootstrap.css stylesheet. The bootstrap.css stylesheet contains the default styles of the bootstrap framework itself. This stylesheet is a huge file, and it is strongly recommended to avoid altering the bootstrap.css stylesheet. Customizations should be made to the top level template_styles.css stylesheet instead.

At the base layer, there are styles from the shopping cart's universal.css stylesheet. The universal.css stylesheet is used by all template packages created by Modular Merchant, but by default is not included for editing in any template package. The universal.css stylesheet includes styles for elements common to all template packages, such as error and success messages, "More Info" and "Add to Cart" buttons, etc.

Although the universal.css file is not present in template packages by default, it is possible to add include the file when downloading a template package through the Download link in the Template Package Sandbox. The downloaded template package may then be uploaded through the Upload a new Template Package link in the Template Package Sandbox, and the universal.css stylesheet will then be available for review and editing.

A simpler option for customizing universal styles, and the recommended solution, is to simply overwrite the default universal styles with by adding the desired customizations to the template_styles.css stylesheet.

Customizing the content of a responsive template package

The content of a responsive template package is determined by the content of the templates within the package. A template primarily consists of HTML code and QuickCode Tags, but may also contain JavaScript, PHP code, and CSS (in addition to the CSS stylesheets contained within the template package).

For simplicity's sake, it is recommended to restrict the template package to as few templates as possible.

Every template package must contain the universal template, and the universal template will be applied to every storefront page that does not have an individual template assigned and present in the template package.

In order to customize the content and layout of the navigation header of a responsive template package, it is necessary to edit the HTML templates within that template package. If the only template in the package is the universal template, then customizations to that one template will automatically be applied to the entire storefront.

However, if the template package contains multiple templates, then each template must be edited individually in order to apply the same customizations to the entire storefront. For instance, a template package might contain universal.tpl and index.tpl. If the navigation header in universal.tpl is customized, but the navigation header in index.tpl is not customized, then the store's index page will continue to use the default navigation header, while all of the other storefront pages will use the custom navigation header from the universal template.

Common customizations for the navigation header include adding or removing options from the horizontal navigation menu, and adding or removing options from the customer account dropdown menu.

regarding customized html templates

We're always happy to help when we can, but once a template's HTML code has been customized by a third party, troubleshooting those customizations falls outside of what Modular Merchant can provide within our range of free technical support.

Fixing larger template issues may require paid development time. We evaluate each request on a case-by-case basis. If a request is so large that it requires a custom web design project to resolve, we will always provide a proposal for the client's approval prior to performing any billable work.