open cart template structure

[seamus]

righty,

the open cart template structure is pretty straight forward.
It runs on an MVC format  and uses jquery for all its javascript, for example the image slider and the image handler on the product page, all the fancy bits in other words. jquery is a javascript framework that makes writing javascript seriously easy, as all the functions are prewritten for you. I've installed plenty of jquery plugins for zen cart, wordpress, forums etc, aswell as writing a few myself.

The MVC format, Model View Controller
Models deal with database queries, views are what you would expect, they build the web page that a visitor would view and controllers control the info between the models and the views and contain any extra functions and code needed. This means all the business logic is kept out of the way and the views (page templates) in theory should stay quite clean and should only contain calls to functions that are within the controller like this:

Code:

<?php foreach ($modules as $module) { ?>
<?php echo $module; ?>
<?php } ?>

that file being the content_top.tpl

that piece of code loops through info given to it by the module function within the controller and then echos out the result of that function, using the data that has been passed to it.
It basically makes it seriously easy to re-arrange your page templates by massively reducing the amount of code in the page template.
Although by doing that it does make creating new functions slightly more difficult if you have never came across the MVC pattern before, but if all you want to do is change the look of your site, its pretty easy to do.

If you want to just change the look of your site then the only bit you really need to bother about is the Views, these are your page templates and within the views folder are your css files aswell.

via ftp you would go into catalog/view/theme/ and then into the directory for your template.
If you want to create your own template then go into
catalog/view/theme/
and copy the default folder to your computer, change the name of the folder to what ever you want and upload it back into catalog/view/theme/
then go into  catalog/view/theme/your-template-name-here/template/common/header.tpl

and change the stylesheet file paths

Code:

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie7.css" />

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />

these are on line 19, 35 and 38

change default to whatever you named your new template, save the header.tpl and upload it back to the server.

To be honest, these should not be hard coded. There should be a quick function that figures out which directory your stylesheets are in and should auto generate the stylesheet url for you, as most other carts do. Seems the coders have been lazy and these file paths need hard coded.

Then go into admin > system > settings and click on edit
on the next screen, click on the store tab and select your template from the drop down list, there wont be a preview image because you haven't uploaded one yet.
Once you have finished the design of your new template, save a screen shot of your template as a png file and name it the same as your newly created template.
ie, if you created a new template called "my-new-template" then the image should be saved as "my-new-template.png" and uploaded to image/templates

That's you ready to start customising your template.

As always, you'll need a good ftp client and a good text editor, I tend to use notepad++ and filezilla
(filezilla is by no means perfect and can on occasion cause your hosts security to lock you off the server, even with that, I've not found an ftp client that I like, so Im sticking with filezilla just now)

You will also need a developers toolkit addon to your browser, I use the firebug addon for firefox, I prefer it to the developers tools in safari, chrome and IE (IE is awful, and so is opera IMO)

The developers tools (or firebug) let you find out which element is controlled by what div and on what line of your stylesheet the css code is that controls the element.

When viewing your website, right click on your mouse, click inspect element and a panel will open displaying the stylesheet entries that control your page. You can change the css code in firebug, but remember, this only changes what your browser is showing you, it doesn't save any information to your stylesheet, it just lets you see changes before you write them into the file.

If you know your way around css then you should be fine from here, if you arnt too sure about css and how to change things, I'll fire up another thread explaining how to change specific parts of your template, but that should do for a brief explaination of the template structure.

[seamus]

righty

some basic customisation.

to get rid of the "powered by open cart" there are two ways to do this.
The first way removes both the "powered by" and the "your store copyright 2011"

to do that, go into catalog/view/theme/your-template-name-here/template/common
and open footer.tpl
on line 37 find this code and remove it

Code:

<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donatation.
Please donate via PayPal to donate@opencart.com
//-->
<div id="powered"><?php echo $powered; ?></div>
<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donatation.
Please donate via PayPal to donate@opencart.com
//-->
</div>

the $powered function also contains the copyright bit aswell, to keep the copyright and remove only the "powered by" then you want to leave the footer.tpl as it is, dont remove the piece of code mentioned above, instead go into
catalog/language/english/common
and open footer.php
on line 18 you should see this code

Code:

$_['text_powered']      = 'Powered By <a href="http://www.opencart.com">OpenCart</a><br /> %s &copy; %s';

change that to this

Code:

$_['text_powered']      = '%s &copy; %s';

you can then use the powered div to control where the copyright text sits

in catalog/view/theme/your-template-name-herer/stylesheet/stylesheet.css
on around line 1568 you should see this

Code:

#powered {
    clear: both;
    margin-top: 5px;
    text-align: right;
}

change the text-align: right;
to
text-align: center;
 or
 text-align: left;

depending on where you want the text to sit. If you want to ad a slight gap above that text or below the text then you would increase the px size in margin-top to what ever height you want the gap to be, and to add a gap at the bottom you would add margin-bottom: 5px; to the stylesheet like this

Code:

#powered {
    clear: both;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: right;
}

obviously you would increase the px size to whatever you want the gap to be.

to change the width of the template, at around line 66 in your stylesheet, you should see this code

Code:

#container {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 980px;
}

just change 980px to whatever you want the size of the center container to be.

to change the background colour or add a background image, in your stylesheet at around line 6 you should see this code

Code:

body {
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
}

to add a background colour to that you would add an extra line in like this

Code:

body {
    background: #cccccc;
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
}

#cccccc is a light grey colour, you would change that to whatever colour code you want.

to add a background image to that, you would do this

Code:

body {
    background: url("../image/background1.png") repeat scroll 0 0 transparent;
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
}

the image that is being called is a image file named background1.png
you would change that to echo your own image file name

the image file will need to be uploaded to
catalog/view/theme/your-template-name-here/image/

to prevent the image from being repeated, you would change it to this

Code:

body {
    background: url("../image/background1.png") no-repeat scroll 0 0 transparent;
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
}

or you could repeat the image horizontally only, then instead of no repeat, you would use repeat-x
or just vertically then it would be repeat-y

if you want the image to sit at the top of the page and centered then you would do this

Code:

body {
    background: url("../image/background1.png") no-repeat scroll center top transparent;
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
}

just change center top to whatever you want, left bottom for example to make the image sit where you want it to.
Bear in mind that center is always written the american way, if you use centre instead of center, it'll do nothing at all, same with colour, it needs to be written as color (american spelling)

to change the colour of the header menu bar, in your stylesheet at around line 316 you should see this code here

Code:

#menu {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #000000;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 2px 2px #DDDDDD;
    height: 37px;
    margin-bottom: 15px;
    padding: 0 5px;
}

change #cccccc to what ever colour you want (the original colour isnt #cccccc I've changed that at some point)

you can change the box shadow colour aswell and you can change the round edges to the box by changing
    border-radius: 5px 5px 5px 5px;
and alter the 5px to suit.

the four digits work in a clockwise motion, ie, the first number controls the top left corner, second digit top right corner and so on in a clock wise motion.
to add a background image to the menu bar, you would do exactly the same as mentioned in the body tag above.

to alter the featured box, in your stylesheet at around line 611 you should see this code

Code:

.box .box-heading {
    background: url("../image/background.png") repeat-x scroll 0 0 transparent;
    border: 1px solid #DBDEE1;
    border-radius: 11px 7px 0 0;
    color: #333333;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    padding: 8px 10px 7px;
}

again, same rules apply with the background colour and image and the border radius.

the background image being used above is just a small square with a gradient, this is repeated vertically to save loading a full length image.
to change the text colour, you would alter this part from the above code

     color: #333333;

color always controls the text colour only within the div or class entry in your stylesheet.
padding will move the contents inside the div or class where as margin would move the whole div or class, these can de written in two ways, either with all four sides in one line (like above)
   
   padding: 0px 0px 0px 0px;

^^ again, clockwise motion, the first 0px controls the distance from the top, second 0px controls the distance from the right, third is bottom, fourth is left. the same applies to margin

  margin: 0px 0px 0px 0px;

you can write them out one side at a time like this

   padding-top: 0px;
or
   padding-left: 0px;
etc,

same with margins,

  margin-top:0px;
etc

obviously you probably wont have the distance set to 0px Im just using that as an example.

I need a tea break, I'll continue with this in a mo'