Community Forums

How do I change the default template or create a custom template?

A collective repository of many frequently asked questions

How do I change the default template or create a custom template?

Postby Qphoria » Wed Jan 07, 2009 2:20 pm

How do I change the default template or create a custom template?

FIRST RULE: NEVER EDIT THE "DEFAULT" TEMPLATE!!!

The first thing you want to do is goto /catalog/template/ and copy the "default" folder to a new name like "mytheme".
Now goto 'Admin->Configuration->Setting->Shop tab' and set the template to the new one.

Now all your changes should be in "mytheme"

The reasons you don't want to edit the default theme are:
- When you upgrade to a new version of OpenCart, the default folder will be overwritten and you will lose all your changes. Your custom folders will not be overwritten
- If you make a mistake on a file, you can always recopy the one from default
- If you break something while editing on a live site, you can always revert your customers to default while you fix it.
- There are plans to use default as a fallback, so if you are missing a file in your custom template, it always has a fallback.

Once you've created your new template folder, you can follow the structure of the file names to know which part of the site it controls.

default/content/*.tpl - This handles all the controller page template files: Cart, Login, Product, checkout, etc.
default/module/*.tpl - This handles all the module extension templates: sideboxes, header, footer
default/css/*.css - This handles all css files for all controllers and modules. Note they are named relatively intuitively to know that product.css affects product.tpl. The main/global css file is "default.css" This handles common css settings like font colors and overall layout structure of all the layout stuff.
default/layout.tpl - This handles how the sideboxes and main content are ordered for all pages. If you have a new sidebox contrib, you will need to add it here for it to display.
default/image/*.* - this is where images used for the template design are stored. Also language flags. This is NOT where product images are stored.

It does require that you have basic understanding of HTML & CSS, and know how to code around the inline php code to prevent breaking its functionality.

Start small, change one thing at a time and backup often. Use an editor that offers incremental automatic backups like notepad++.

Remember, if you are looking to change the wording of some message, it is not a template issue. Message wording is handled in the language files, not the template files.
Last edited by Qphoria on Mon Jan 19, 2009 11:16 am, edited 1 time in total.
ImageImage
Donate!|OpenCart Basics|GeoZones
Help me get more development cloud storage - Click Here to get DropBox
User avatar
Qphoria
Administrator
 
Posts: 19164
Joined: Mon Jul 21, 2008 2:02 pm
Donate to Qphoria

Return to FAQs

Who is online

Users browsing this forum: No registered users and 3 guests

Hosted by Arvixe Web Hosting