Joomla!: What path do I take?

I am writing this for anyone who constantly gets paths wrong while creating templates (like myself)! Sure, you can get it right through trial and error, but when time is money, it’s always good to have a resource you can visit to find the correct answer instantly. Keep reading to find out the correct paths to use in different parts of your templates and in other parts of your Joomla! site.

Code within the Template head

The best way to define a path within the head is with PHP. In this example I will call my print CSS file within the template folder using the following code:

<link href="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/"; ?>print.css" rel="stylesheet" type="text/css" media="print" />

Code within the Template body

The above code works anywhere within the entire template. If you need to link to a place other than your template folder you can call a direct path. With this example I will call up an image from the default images folder in the root…

<img src="images/stories/articles.jpg"/>

Code within the CSS file

This is where it can get a little tricky. Since you can’t use PHP within your CSS file, you have to know all the correct ways to connect to the desired file. The first example here is how I connected to a file in my images folder within the template folder I was using. From what I’ve seen, you may use either of the following codes for this:

#css_image {background: url{images/cssimage.gif}
or
#css_image {background: url{./images/cssimage.gif}

Code within an IE CSS file

Most developers will filter out all the crap that has to be done to make IE display correctly by separating it into another CSS file. They do this so the page will validate. It saves download time for those using a modern browser because it doesn’t have to download all the extra fixes. For those of you trying to find the paths to use with this style sheet, read on.

If you are calling in a .htc file you have to use the absolute path:


img {behavior: url("https://www.corephp.com/templates/corephp/pngbehavior.htc");}

If you are using a filter you also have to use an absolute path:


#top-shadow {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://www.corephp.com/templates/corephp/images/top_shadow.png', sizingMethod='scale');}

Otherwise, you use the same relative path as the other CSS file.

This should cover the basics on which path to use when creating Joomla! templates. More will be added as I run across more examples that frustrate me. Please let me if there you ran into any that took some time to figure out as well.

Thanks!

STAY UP TO DATE

Sign up today to stay informed with industry news & trends