Learning to Edit a Joomla Template

Video Showing How To Edit a Joomla Template

Learning to Edit a Joomla Template

Seeing Your Template Code

This tutorial will show you how to start editing Joomla templates. I'd recommend starting with a plain Joomla installation - a test site. Don't try this for the first time on your live site! If you need help installing Joomla on your computer we have intsructions for both the P.C. and the Mac. We're going to be using the default rhuk_milkyway template.

We'll start by looking at the index.php file. It is located here: / templates / rhuk_milkway / index.php. Every template has this file and it places all of the different elements on the page.  

  • Go to Administrator >> Extensions >> Template Manager and open the rhuk_milkyway template.
  • Click "Edit HTML" in the top-right corner. You'll see the code that controls your template's output.
  • Backup! Select all of the code and copy it into a text editor. Save the file somewhere safe.

Editing Your Template Code

This is a little trick that will swap the modules in the left and right-hand columns.

  • Scroll down in the code until you see:

    < jdoc:include type="modules" name="left" style="rounded" / > (I've inserted a space at the beginning and end to stop the code from working here)

  • This line of code tells Joomla to show all the module in the "left" position.
  • Then scroll down until we see:

    < jdoc:include type="modules" name="right" style="xhtml" / >

  • Let's do the reverse of what we did earlier and change name="right" to name="left"
  • Click "Apply" and check the front of your site.

Joomla Template Change

Seeing Your CSS Code

Next we'll look at the CSS file which controls the color, fonts, images and much more for your template. There was only one index.php file but often there are many CSS files. Each one controls a different aspect or style of the template - for example, one might control the red variation of the template, another green variation and a third the blue. Template designers split them into different files so you don't have to load them all each time - you don't have to load the green and blue code if you're only using the blue code.

However, 99% of the time Joomla designers put all of the most important code into template.css (fairly logically named). It is located in this folder: / templates / rhuk_milkway / css /.

  • Go to Administrator >> Extensions >> Template Manager and open the rhuk_milkyway template.
  • Click "Edit CSS" in the top-right corner.
  • Scroll down until you find the template.css file and open it up.
  • Backup! As above, select all of the code and copy it into a text editor. Save the file somewhere safe.

Editing Your CSS Code Part 1

First, let's change part of our site's style. We'll modify the design of links on our site:

  • Scroll down in the code until you see:

    a:link, a:visited {
    text-decoration: none;
    font-weight: normal;
    }

  • This line of code tells Joomla how to style the links on your site.
  • Let's change that code so that our links will be underlined:

    a:link, a:visited {
    text-decoration: underline;
    font-weight: normal;
    }

  • Click "Apply" and check the front of your site.
Joomla Template Change

Editing Your CSS Code Part 2

Next we'll move the search box from the top-left to the top-right:

  • Scroll down in the template.css code until you see:

    #search {
    float: right;
    width:320px;
    margin-top: -20px;
    margin-right: 30px;
    height: 40px;
    overflow: hidden;
    text-align:right;
    }

  • Let's change that code so that our search box will move to the left:

    #search {
    float: left;
    width:320px;
    margin-top: -20px;
    margin-right: 30px;
    height: 40px;
    overflow: hidden;
    text-align:right;
    }

  • Click "Apply" and check the front of your site:

Joomla Template Change

Great, I've Got That ... What Next?

If you're feeling confident after these first steps, see if you can follow our tutorial on changing the logo on a Joomla template.

How to debug your Joomla code with FirePHP

Debugging PHP applications has always been a bit of a challenge, as the environment is so distributed. At the minimum, there is a web server, the PHP interpreter, and the web browser. While there are tools that add debugging environments to PHP (such as XDebug), you don’t always have access to install them on the server you’re working with.

Fortunately, you can gain some reasonable debugging capabilities through FirePHP. When you want to dump objects or variables back to your browser without having to do so in your HTML, FirePHP is ready for the task. It can also be used to handle code traces and PHP errors.

FirePHP is both a Firebug extension and a PHP library. When the PHP library is in place, special HTTP headers containing JSON objects are created. Firebug reads the HTTP headers, decodes the JSON, then shows the variables in the console. Since the output body is unaffected, it is extremely useful for debugging XML, JSON, PDFs, images, or other non-HTML output generated in PHP.

Read more: How to debug your Joomla code with FirePHP

Changing Joomla's Date Format to American Format

For one reason or another, American's preferred date format (e.g., February 25, 2010) is not an option within Joomla.

I know there's many people who use Joomla who are not in the U.S., but for those of you who are, if you'd like to change the date format in Joomla to the American format, this one's for you.

You can see the date format appear in a number of different places, but one common place you'll see it is in an article's date created information:

qt2_shot_1

The date format you see in the above image is Joomla's default date format, which is the international date format.

I'll show you two ways you can change this date format: 1) By editing one of Joomla's core files, and 2) installing a US language pack.

Here's how to change the international date format to Month Day, Year (while also removing the time stamp) by editing one of Joomla's core files.

1) Using your ftp software, such as Filezilla, navigate to the en-GB.ini file, which is in this location: your root directory/languages/en-GB/en-GB.ini

2) Open the en-GB.ini file with your plain text editor and look for this line of code towards the top of the file:

DATE_FORMAT_LC2=%A, %d %B %Y %H:%M

3) That's Linux date format code, and you'll need to change it to this:

DATE_FORMAT_LC2=%B %d, %Y

4) Once you make that change, save the en-GB.ini file and upload it back to the en-GB directory.

5) Go back to the front of your site and refresh the page. You should see this date format now:

qt2_shot_2

Now, here's an important note to keep in mind: when you make this change, you're editing a core Joomla file. When you upgrade Joomla, there's a chance that there will be a new language directory, a new en-GB directory, or a new en-GB.ini file.

If that's the case, when you upgrade, your date change will be lost, since the en-GB.ini file that you edited will be overwritten by the new one in the Joomla upgrade package.

If you're fine with potentially needing to make this simple change each time you upgrade, then you're fine.

If you want to avoid that, there's another way to make this change: install the American Language pack by Dave Morgan.

Here's how:

1) Go to this page and download the language pack by clicking on the download link:

English Language pack

2) Install it in Joomla by going to Extensions>Install Uninstall.

Click on Browse, find the language pack file you downloaded, and double click on it when you find it.

Then click on Upload and Install on the Extension Manager page.

3) After it's been successfully installed, go to Extensions>Language Manager.

4) Check the radio button next to English(United States) and then click on the Defualt icon in the upper right of the page to make this language pack your default language pack.

5) Then, go to the front of your site and refresh the page, or navigate to a page that has a date showing and you should see a date format like this:

qt2_shot_3

If you want to edit how that date format is appearing, such as taking the time stamp off, go to language/en-US and open the en-US.ini file. Change the date format for LC2 in a similar way that I described above for editing the en-GB.ini file.

For example, if you wanted to remove the time stamp, you would delete the %H:%M on the line of code for the DATE_FORMAT_LC2 within the en-US.ini file. Currently, that line of code is on line 11 of that file.

When you update Joomla, your date format changes will remain in tact as long as the core Joomla team doesn't create a new language directory named en-US as a new option.

Joomlashack University loves CMS Expo

CMS ExpoCMS Expo IV is ON for this May 3-5th in Chicago, and it's bigger, better, and busier than ever! Joomlashack University is very proud to sponsor this amazing and can't-miss event.

Not only is CMS Expo a hotbed of the world's leading Joomla experts, developers, and trainers, the conference has expanded to include learning tracks and presentations on a wide range of the world's best open source Content Management Systems.

Read more: Joomlashack University loves CMS Expo

How to put modules in Joomla articles

One of the handiest tools you can have in your Joomla toolbox is the ability to put the contents of a module right into the body of an article. (The article you're reading now is using this method. See the message in the box right above this sentence? That's actually content from a module being loaded right into this article.)

This can be a significant timesaver, since you can create a module one time in the Module Manager and then simply place it into any number of articles on your site.

That means you wouldn't have to set up that content individually in every article: you do the work once and then simply tell Joomla where you want that module to appear.

To show you how to do this, I'll show you an example of using this method to put a newsletter sign up form right in an article.

Here's a look at the end result:

qt_scrnshot_1

Here's how to do this:

1) In Joomla go to Extensions>Module Manager. Then click on New to create a new module.

2) Select Custom HTML from the list of available modules. (You can put other types of modules in articles, but for this example I'll show you how to do this with a custom HTML module.)

3) Name your module. In this example, I named the module "Newsletter sign up."

4) Set show title to "No."

5) For the module Position (and here's the key of this trick), put your cursor in the field next to "Position" and type in a new position name. In this example, I've called the new position "newsletter."

qt_scrnshot_2

6) For the menu assignment, you can leave it set to All.

7) In the Custom Output area, enter in whatever content you want to have in this module. In this example, I've got some code entered that's creating the iContact newsletter sign up form:

qt_scrnshot_3

8) When you're done, save the module.

9) Go into the Article Manager (Components>Article Manager) and open up an article where you'd like to put this module.

10) Wherever you want the module to be, type in this syntax (which is sometimes referred to as the "loadposition syntax") :

qt_scrnshot_5

Replace "newmoduleposition" with the name of the new module position you created when you typed in the new position name in the custom HTML module.

For my example, this is how my article with the newsletter module in it looks when opened up in Joomla:

qt_scrnshot_4

11) Save the article and check how it looks on the front of your site. That's it!

Now, whatever article on your site that you want to have this module appear in, all you have to do is enter in the loadposition syntax and it will appear.


Testing a Server for PCI Compliance

Today's security topic is inspired by a recent exercise I went through - testing a server for PCI compliance. For those who are not aware PCI is a security standard for accepting credit cards.

According the website for PCI they state their mission as follows:

"The PCI Security Standards Council’s mission is to enhance payment account data security by driving education and awareness of the PCI Security Standards. The organization was founded by American Express, Discover Financial Services, JCB International, MasterCard Worldwide, and Visa, Inc."

Read more: Testing a Server for PCI Compliance

Will that be cash or credit?

Today's security topic is inspired by a recent exercise I went through - testing a server for PCI compliance. For those who are not aware PCI is a security standard for accepting credit cards.

According the website for PCI they state their mission as follows:

"The PCI Security Standards Council’s mission is to enhance payment account data security by driving education and awareness of the PCI Security Standards. The organization was founded by American Express, Discover Financial Services, JCB International, MasterCard Worldwide, and Visa, Inc."

Read more: Will that be cash or credit?

New Lessons in Joomlashack's Online Joomla Training University

New Lessons in Joomlashack's Online Joomla Training University

We've just released over 50 minutes of new video lessons in the Intermediate course in Joomlashack University.

In the Blogging With Joomla learning module, you'll find two new videos:

Read more: New Lessons in Joomlashack's Online Joomla Training University

How to Use Dynamic CSS in Your Joomla Extension

Something I have run into frequently during module development is the need to allow multiple instances of that module on a single page. Joomla!, of course, handles 99% of the work involved, but there are a few tricky aspects to making this work. One is the need to eliminate styling conflicts, especially in themed modules. If you only use generic classes and then load multiple theme/color stylesheets, the end result can be unpredictable to say the least.

Read more: How to Use Dynamic CSS in Your Joomla Extension

New Intermediate Online Joomla Training at Joomlashack

New Intermediate Online Joomla Training at Joomlashack

Take your Joomla skills to the next level with our Intermediate Joomla Course from Joomlashack University, the leading online Joomla training course.

When we launched Joomlashack University back in October, we knew Joomla beginners would flock to our rich library of step-by-step videos and written tutorials. And then they did in droves. But what to do when they're ready for more?

The Intermediate Joomla Course

With our first crop of students ready to move into new learning territory, we've loaded the Intermediate course with over 2.5 hours of new video tutorials, including:

Read more: New Intermediate Online Joomla Training at Joomlashack