Customizing Joomla Templates

template code

First off we wanted to recommend that choose a GoDaddy when you have Joomla websites, mainly because of their renewal coupons (click here to view some) as well as a myriad of open-source Linux distributions that will play nice with your Joomla website.

So let’s say that you want to create a custom theme for your website that matches your branding and looks exactly how you want it, but you don’t want to start the whole design process from scratch. I’ll be honest with you guys, I rarely ever build a website from a complete blank, it’s a lot more time efficient to find a template that is close to what you are looking for in terms of layout at least and hopefully color scheme and just modify it to suit your needs. Remember that this is open source, people have made their code freely available to you so that you might use and change it as you see fit.

Make a copy of the template

I really can’t stress this enough: always, always, always make backups of your files. I like to make backups with version numbers before I make any major change, that way if something goes wrong and breaks it’s really easy to roll back to a previous version. You also want to put your modified theme in it’s own unique folder because otherwise all of your changes might get overwritten when you are installing updates. This article shows you how to make a copy of a template and then have the Joomla backend ‘discover’ it so that you can use it as your active theme.

Customizing

Now that you have a copy of the theme that you want to use in place as a base, you can start changing things around. Colors fonts, and size of things are all easy to adjust through updating the css files. If you want to add or remove elements, or move them around that can be accomplished by updating the index.php file. It’s a PHP file, but you will only be changing the HTML elements of the page. Again, remember to always make a backup before you change something in case you make a mistake and the template breaks.

Web development is 80% just trying things to see if the work/how they look. Have fun and good luck!

Building a Joomla template from scratch

joomla template design

It might sound like a daunting undertaking, but if you are pretty handy with building webpages in static HTML then all you really need is a few Joomla codes to turn your design into a functioning Joomla template.

Designing a layout

The first thing you will need to decide is what you want your website to look like. I will be the first to admit that I am no expert in graphic design, but there are a few things you should keep in mind when you are coming up with your layout: keep it simple and free from clutter, black text on a white or light colored background is the easiest to read, strive for ease of use and navigability rather than ‘unique’ layouts.

A good place to start is with pen and paper, and to create a wireframe or schematic version of your site. Don’t be too worried about cramming all of your information ‘above the cut’ on the home page (above the point where the user would have to scroll down to view content), but you should think about making it easy for users to find the most important information. There is software such as Balsamiq that you can use to help you plan out your website, but I don’t really see much point in shelling out $80 for a license when a pen and paper will do just fine!

From wireframe you can mock up what the layout will look like in a graphics program like Photoshop. This will help you get the color scheme down, choose fonts, and make sure that everything looks good together.

Marking up your layout

Once you’ve figured out how you’d like your website to look it’s time to start turning it into functioning HTML. At this point don’t worry about the content or anything like that, just set it up as if it was going to be a static HTML page. If it helps you visualize everything you can put in dummy content as a placeholder for now. Remember to check for cross-browser compatibility to make sure that your design doesn’t look funny in certain browsers (*cough cough*probably Internet Explorer*cough cough*). Make sure that you use the HTML5 doctype declaration and standards, and by NO MEANS should you be setting up your layout in tables, the 90s are long gone.

Adding Joomla tags

So now that you have your layout, how do you get your content from the Joomla interface to show up in your template? You use specialized Joomla code called Jdoc statements to tell Joomla what to display where. The component tag is for the main article content, and then the module ones include the modules you have set up for your theme in the templateDetails.xml file. This article has a great walkthrough on the whole template setup process, and how to setup your templateDetails.xml file.

And that’s it! Once you work through it the first time it’s not an especially difficult process. Have fun and good luck!

Introduction to Joomla

joomla templates

So what is Joomla anyways? Well, it’s an open source content management system. Didn’t understand any of that last sentence?

Open source is software that is made freely available for public use, whether that use is commercial or otherwise. Open source projects are also freely available to contribute to by anyone. You can use them as is, or you can change them, develop them further, write plugins, make new skins or themes, etc.

A content management system (CMS) is pretty much what it sounds like, it’s software that helps you to publish and organize content for your blog. Most of them (including Joomla) go way beyond just managing the content of the website and also provide you with the tools to manage the look, feel, and functionality of your website. Before you would make static HTML pages, and you’d have to go through the code and find your content to update it. A CMS will keep your content separate from the code making it easy for you to update if you are not a web developer or programmer. If you can update a Word doc, you can use a content management system!

Why Joomla?

A lot of reasons!

Joomla isn’t the only content management system out there, but it’s the one that I’ve been using for almost 10 years now with no complaints. There are so many resources available, and if you are stuck on something guaranteed somebody has already had the same issue and resolved it. Anytime I get stuck I just put “Joomla how to ~” or “Joomla problem with ~” into Google and do some research. I haven’t come up empty handed yet!

I’d recommend spending some time on the Joomla website (especially the documentation) and poking around in the community forums before you get started to familiarize yourself with some of the terminology and best practices. And then download it and start tinkering around! I’m a big fan of hands on learning, the best way to figure this stuff out is to just start experimenting. You always want to set yourself up with a test server, I like to use XAMPP on my local machine for testing.