I’ve just released an update to autoFacebook 2. I know it’s been awhile and it’s not so much an update as it is just updated video instructions. I also go over enabling automatic facebook posts on update as well as new products, adding an icon to your app so that it displays on your page’s feed, and enabling different forms of currency. If you need help feel free to comment, or go to http://www.zen-cart.com/forum/showthread.php?t=153528

What’s new:

  • Slightly updated code
  • Video install instructions


  • This Zen Cart modification is licensed under the GNU General Public License: http://www.gnu.org/licenses/gpl-3.0.txt


After spending the better part of a work day trying to figure out how to set it up so that modules could be positioned throughout my theme in more places than the default “content top,” “content_bottom,”  “right,” “left,” etc. and after rubbing away the Z on my keyboard. I managed to get my module and theme to behave as intended. This article will explain how.

What you should know:

  • I should start by saying that I am by no means an OpenCart expert. In fact, This is on my third day every using OpenCart. As such, I have no idea if this works with 1.5.1 or older versions of the platform.
  • The changes in this tutorial are made to files that might be overwritten with upgrades or make future updates more difficult. You may be able to include all catalog files into your custom theme folder, however… I have not tested this theory.
  • This is a relatively exhaustive process that much be done to every module for every new position you wish to add. (though it gets easier once you get the hang of it).
  • This tutorial only adds positioning to the “Home” layout. I would assume to add it to other layouts you would just need to edit the corresponding template files (below) but there I go assuming again.

Getting Started:

I started by downloading and installing Hildebrando’s Free Youtube Video module for OpenCart v1.5.1.1. I chose this mod mainly because it was highly rated and didn’t involve too much back-end functionality. I assume you could modify any module similarly, however we all know that they say about assumption. If you’re unsure I would get the feel of HildeBrando’s version first so as not to waste your time.

Adding Positions in Admin:

First, you need to open the module’s language file located in; /admin/language/english/module/ and add your new position. For this tutorial we’re going to be adding a new position called: Content Middle.

$_['text_content_middle']       = 'Content Middle';

Second, you need to open your module’s admin template file located in; /admin/view/template/module/ and add a new “if position is set” statement at around line 50.

<?php if ($module['position'] == 'content_middle') { ?>
<option value="content_middle" selected="selected"><?php echo $text_content_middle; ?></option>
<?php } else { ?>
<option value="content_middle"><?php echo $text_content_middle; ?></option>
 <?php } ?>

and in the same file add the option to the javascript function at around line 140:

    html += '      <option value="content_middle"><?php echo $text_content_middle; ?></option>';

Third, you need to open the module’s controller file located in; /admin/controller/module/ and add a new line anywhere around like 35.

$this->data['text_content_middle'] = $this->language->get('text_content_middle');

You should now be able to see the new position in your modules settings. Also make sure the module’s layout is set to “Home.”

Adding Positions to Your Template:

First, you must add the position to the array located in; /catalog/controller/common/home.php around line 20.


Second, you’ll need to create the corresponding PHP file in /catalog/controller/common/ (for example: “content_middle.php”). Add the following code, pay attention to lines 2, 50, 79, 80, and 82) as will need to reflect your position’s name:

class ControllerCommonHomeOne extends Controller {
	public function index() {

		if (isset($this->request->get['route'])) {
			$route = $this->request->get['route'];
		} else {
			$route = 'common/home';

		$layout_id = 0;

		if (substr($route, 0, 16) == 'product/category' && isset($this->request->get['path'])) {
			$path = explode('_', (string)$this->request->get['path']);

			$layout_id = $this->model_catalog_category->getCategoryLayoutId(end($path));

		if (substr($route, 0, 15) == 'product/product' && isset($this->request->get['product_id'])) {
			$layout_id = $this->model_catalog_product->getProductLayoutId($this->request->get['product_id']);

		if (substr($route, 0, 23) == 'information/information' && isset($this->request->get['information_id'])) {
			$layout_id = $this->model_catalog_information->getInformationLayoutId($this->request->get['information_id']);

		if (!$layout_id) {
			$layout_id = $this->model_design_layout->getLayout($route);

		if (!$layout_id) {
			$layout_id = $this->config->get('config_layout_id');

		$module_data = array();


		$extensions = $this->model_setting_extension->getExtensions('module');

		foreach ($extensions as $extension) {
			$modules = $this->config->get($extension['code'] . '_module');

			if ($modules) {
				foreach ($modules as $module) {
					if ($module['layout_id'] == $layout_id && $module['position'] == 'home_one' && $module['status']) {
						$module_data[] = array(
							'code'       => $extension['code'],
							'setting'    => $module,
							'sort_order' => $module['sort_order']

		$sort_order = array();

		foreach ($module_data as $key => $value) {
      		$sort_order[$key] = $value['sort_order'];

		array_multisort($sort_order, SORT_ASC, $module_data);

		$this->data['modules'] = array();

		foreach ($module_data as $module) {
			$module = $this->getChild('module/' . $module['code'], $module['setting']);

			if ($module) {
				$this->data['modules'][] = $module;

		if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/home_one.tpl')) {
			$this->template = $this->config->get('config_template') . '/template/common/home_one.tpl';
		} else {
			$this->template = 'default/template/common/home_one.tpl';


Third, create the corresponding TPL file in /view/theme/your-theme/template/common/ (for example: “content_middle.tpl”). Add the following code:

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

Now you can call your insert your position anywhere in your theme’s home.tpl file by calling

<?php echo $content_middle; ?>

Now, any modules you assign to Content Middle will appear here in your theme.

Well that’s it, I hope it helped. It’s definitely not the most straight forward thing in the world but after a while it does start to make sense. I do feel like there’s plenty of opportunity to improve, but even still, OpenCart is the cleanest eCommerce solution I’ve worked with.

If this tutorial has helped you, if you have any questions, or know a better way, please don’t hesitate to leave a comment.

In this little tutorial we’re going to create simple playing cards using only HTML and CSS (without image files). The purpose of this article is to cover the basics of how CSS and HTML work together. This should work no matter what versions you’re using (CSS2.1, CSS3, HTML4, HTML5, etc.). Note: This tutorial assumes you have a basic knowledge of HTML.

Intro to CSS:

First lets go over how and where to use CSS. There are three main ways to use CSS in an HTML document.

1. Inline Styling

The first way you can use css is to place the CSS code in and HTML element’s style attribute. For example:

<p style="font-style: italic">My CSS formatted text.</p>

All the text between the specific styled <P> tags will be italic. No other text will be italicized unless the same style attribute is added to that text’s HTML element. This method is generally frowned upon due mainly to the fact that it creates much longer and larger web pages that are harder to maintain in the long run.

2. Internal Style Sheet

Another option is to place your CSS in between <STYLE></STYLE> tags usually in the <HEAD> of your HTML document. For example:

<style type="text/css">
 p { font-style: italic; }

Now any text in the entire HTML document that is in between <P></P> tags will be italicized. There is no need to use style=” “ anymore because it’s already defined. This method is best for page specific styling like a custom blog posts and should also be avoided when possible. You can use this anywhere you’d like in an HTML document but keep in mind that any the CSS loaded prior to the CSS in a style element will be overridden by the new style.

3. External Style Sheet

The 3rd and most common way to use CSS is through an external file containing all the style tags to be used on an entire website, server, program, etc. The file is usually hosted on the same server, ends in .css, and is called in the head of a HTML document through the <LINK> element. For example.

<link rel="stylesheet" type="text/css" href="style.css" />

the file “style.css” could look like this:

BODY { font-family: verdana,arial,helvetica,sans-serif; font-size: x-small; background-color: #FFFFFF; color: #000000; }
p { font-style: italic; }
a {text-decoration: none; }
h1 { font-family: verdana,arial,helvetica,sans-serif; color: #E47911; font-size: small; }
h2{margin-bottom: 0em; }
h2 { margin-bottom: 0em; }
h3 { margin-bottom: 0em; }
.small { font-family: verdana,arial,helvetica,sans-serif; font-size: xx-small; }
#big { font-family: verdana,arial,helvetica,sans-serif; font-size: x-large;}

Note: .small would apply to any HTML element with a class name of “small.” #big would apply to any HTML element with an ID of “big.” For example:

<div class="small">This text will be extra-extra-small.<div>
<p id="big">This text will be extra-large.</p>

Creating Playing Cards

Now that you know a little about CSS and HTML, lets make some cards.


In the BODY of your HTML create One DIV element with the class name “outline” with 2 DIVS inside named “top” and “bottom.”

<div class="outline">
<div class="top"></div>
<div class="bottom"></div>

The first DIV will be the “outline” of the card and hold everything else we need in our card. The “top” and “bottom” DIVs will hold our card’s number or letters, and symbols respectfully. So lets add our card’s content.

<div class="outline">
<div class="top"><span>A</span><span>&hearts;</span></div>
<div class="bottom"><span>&hearts;</span><span>A</span></div>

As you can see we’ve added our card’s suit and rank. I’ve decided to use &hearts; for a heart suit here but you can use any suit you’d like by using &spades; &clubs; or &diams; Also notice we’ve added SPAN tags to individually wrap our card’s suit and rank in the top and bottom divs.

When rendered, we get something like this:



Not quite a playing card, but we can see we’re getting there. Now for the styling!


Now lets style our card. I like to start with the standard HTML elements first then work my way down the page.

body { background: #339900; }
span { display: block; }

Through our BODY styling we’ve changed our pages background color to a “poker table” green. We’ve also set up our SPAN tags so that they align one on top of another instead of side by side. We now have something like this:



So lets style our DIV’s.

body{ color: #CC0033; background: #339900; }
span{ display: block; }

.outline{ width: 110px; text-align: center; padding: 10px; margin: 10px; background: #FFF; color: #cc0033; }
.top{ text-align: left; }
.bottom{ text-align: right; }

Through .outline we’ve defined the width of our card, centered the text, added 10px of padding and margin for spacing, changed the background color of the DIV to white, and changed the text color to a dark red (in that order). For the .top and .bottom div we’ve just aligned our text to either the left or right accordingly. So now we have something like this:




Well that’s more like it. We could stop here as technically we have a card but we want our card to be a little more realistic. To do this, we can use CSS to add rounded borders and drop shadows. Unfortunately this currently will not work in Internet Explorer however IE9 will be here soon! So for Opera, Firefox, Chrome, etc let’s add the following to our CSS

body{ color: #CC0033; background: #339900; }
span{ display: block; }

.outline{ width: 110px; border: 0px solid black; text-align: center; padding: 10px; margin: 10px; background: #FFF }
.top{ text-align: left; }
.bottom{ text-align: right; }

.shadow{ box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; }
.rounded{ border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }

This is sort of a catch all method for creating shadows and rounded corners using box-shadow, or a browser specific box-shadow. The settings edit the shadows distance and blur amount as well as color and the rounded border’s corner radius. Feel free to play around with these for a better understanding of what each one does.
You may have noticed that we didn’t add .shadow or .rounded anywhere in our HTML. Luckily, we can add more than one class to an element’s class attribute. So to tie in our CSS we need to go back and add ” shadow rounded” to our “outline” DIV in the first line of our HTML like so:

<div class="outline shadow rounded">
<div class="top"><span>A</span><span>&hearts;</span></div>
<div class="bottom"><span>&hearts;</span><span>A</span></div>

Finally, you should have your completed playing card! Only 51 more cards to go.




Well I hope you enjoyed this article. Play around with the height and width, add texture/images if you’d like. Let me know what you think.

Download the files used in this tutorial: Playing Card Files
Downloaded 624 times.