OpenCart – Add Custom CSS

A simple tutorial on how to add a custom CSS style sheet to your default installation

WHAT IS CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. It’s most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. To the layman, CSS is just a way to hold the design structure of your website together in a manner that is going to be Cross Browser Compatible. Opencart has a few style sheets that come with the install. The main style sheet that you will see is found in /catalog/view/theme/default/stylesheet/stylesheet.css You will find that if you remove this stylesheet from its directory the entire website will fall apart in its design. Sometimes you may have a need to add your own stylesheet in addition to what is already there.

Adding your own CSS stylesheet

First, open up your notepad or a code editor like Dreamweaver and save the file with the extension .css For this example we will call it test.css. Now you can open it up whenever you want to and go back to it. If you are referencing an external stylesheet to declare styles within HTML then you won’t need to open the css with any TAGS. Rather, you simple start writing your style rules at the top of the sheet. I went ahead and prepared a little stylesheet in a code editor so you can see exactly what a css style rule looks like. For this example we are going to be styling a DIV CONTAINER with the ID of “container1″. We will style the actual container as well as the paragraph inside it.

css

Save the file again and upload it to the following directory: /catalog/view/theme/default/stylesheet/

In /catalog/view/theme/default/template/common/header.tpl your Div container would look like this:

<div id=”container1″> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

Just place it at the top of the tpl.

Now that we have our simple CSS file done, saved, and uploaded we have to reference it somehow. Instead of opening up the header.tpl and manually hacking the line in the header we can use php to add the stylesheet dynamically. Open up /catalog/controller/common/header.php and find this block of code:

php

Right below the line: $this->data['title'] = $this->document->getTitle(); add this:

$this->document->addStyle(‘/catalog/view/theme/default/stylesheet/test.css’);

Save the file, upload it to the server and go to your home page. You will see the text at the top, styled just like you specified in the CSS sheet :)

THINGS TO REMEMBER

  1. Make sure that you are using separate individual UNIQUE names for the names of your HTML ELEMENTS because there can be conflict if not. The name “container” is already taken in the default Opencart stylesheet so you will want to use something like I did which was “container2″.
  2. Keep it simple. Just because CSS offers a lot of features to design your web page doesn’t mean you should go using all of them.
  3. HACKS: Sometimes you need to perform special CSS hacks to ensure it will work in ALL browsers. A good example of this is applying opacity / alpha to an element. You actually need to specify multiple rules for all browsers like this:
<code>.transparent {
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	width: 100%; 

	/* Theoretically for IE 8 &amp; 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	/* This works in IE 8 &amp; 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);

	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;

	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;

	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;
}</code>

Looking for quality OpenCart Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *


× 5 = 15

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>