Back in the day when the internet was just emerging websites were primordial  beasts created merely for displaying and collecting information. These early sites made no distinction between how the website was structured and how it was represented visually. One problem that early designers encountered was that HTML was really never intended for displaying things nicely. Consequently, if you wanted to create a user friendly and visually appealing website you were forced to work with unwieldly nested tables, inefficient repetitive markup, and clunky HTML attirbutes. As the web grew and changed people started expecting more and more from thier online experience. A way was needed to separate the HTML structure of the site and its visual representation. Cascading Style Sheets (CSS) provided this ability allowing web designers greater control over the way thier sites looked and worked.

If you look at Joomla! like a sports car then the template manager is the driver’s seat, but if you want to learn more about how the car works we will have to lift up the hood and take a peek inside. The part of the Joomla! template engine which we will focus on today is the Class Suffix. If you have been exploring the backend of your site you will probably have seen this in the advanced settings section of your modules.  You will also notice a simliar setting in your menu item called the Page Suffix which is essentially the same thing but for menu items (more on that in the next post). What the Class/Page suffix allows you to do is target a  particular module/menu item with custom CSS. For those of you who need a little more explanation about what CSS is I encourage you to read this explanation of the relationship between HTML and CSS before continuing with this tutorial.

It used to be that a fixed width 960px wide website was enough to satisfy most of your site users and thier viewing habits. Nowadays, due to the high use of mobile devices if your website is not responsive you run the risk of losing a good percentage of your site visitors, in some cases up to 1/4 of all your visitors. On a moderate to large site that could be thousands of potential donors or customers.  But what can you do if you happen to have a fixed width site that makes navigating and engaging on your site on a small device a chore? Should you spend the thousands of dollars on a site rebuild or are there some simple ways to covert these sites? The answer is that you can convert them but it will take a little bit of elbow grease and some knowledge of CSS. The following are some basic guidelines and techniques that you can use if you need to convert your site.

Wouldn’t it be nice (you say to yourself as you contemplate the Joomla! template system over breakfast)  if you could make a Joomla! menu item  built completely out of modules without having to point that menu item to an actual article? Good news! your Gantry system allows you to turn off the main body position and do exactly that. In Part 2 of this series I would like to discuss how to accomplish this and some benefits of doing so.

Welcome to this 5 part series on Gantry and your template manager. For many webmasters the template manager can be a mysterious and intimidating place. In this series I will be talking about your Joomla! template system and Gantry and show you how easy managing your template and layout can be. Each article in this series will break down a different part of the templating system and give you some tips on how to take advantage of it.  Make sure to subcribe to my newsletter on the right if you want to follow along!

Part 1

Getting the Lay of the Land- Gantry Positioning Explained and Shown

Gantry is a CSS framework developed by Rocket Themes  http://gantry-framework.org/ for developing dynamic and feature rich templates in Joomla! and WordPress. If you are thinking of developing your own template I would highly recommend using Gantry as a base. If you are a URJ congregation and have a website developed by the URJ then your template already makes use of this system.

In this first article I want to talk in  more detail about what Gantry does. Basically, Gantry is a Cascading Style Sheet (CSS) grid system that sits on top of your Joomla! installation and defines all the module and article positions of your site. Let’s take a look at some of the module positions that Gantry and your template has to offer. An easy way to do this is to use the ?tp=1 query. This is a built-in Joomla! feature which allows you to view all your module positions at once on the front end of your site. To use this query follow these steps.

As many of you already know I continue to work with many congregations around the country in helping to maintain and build their Joomla! websites. Recently, I was approached by a congregation who wanted to create an online version of thier temple bulletin. Utilziing the client’s already installed Zoo component from YooThemes I was able to create a professional interactive online bulletin which replaced their previous method of embeding static PDFs. Here is the result of the project.

 

Below is a run down of how to recreate what I did on your site.

In one of my previous jobs I managed over several hundred Joomla! sites. It was often the case that we needed to move these sites between Cpanels or servers due to the client’s needs. The easiest way to accomplish this in Joomla! is by using Akeeba backup.

Akeeba backup is much more than just a way to provide redundancy for your site. It is a powerful extension which will let you make clones of your site as many times as you want and install those clones on almost any host that meets Joomla!’s technical requirements.

A good rule of thumb when it comes to extensions is to use them sparingly and only if they provide functionality that you trully need.  The following is a bare minimum list of Joomla! extensions which should be installed on every Joomla! site.

Earlier this year I was tasked with building a Joomla! module which would allow non-techincal staff the ability to update a custom progress bar for a fundraiser. You can see the result of this project here.

The module makes use of some simple CSS and PHP. This tutorial will cover the basics of module building and walk you through the process I took to develop this particualr module. You can feel free to modify the code to your liking or comment below if you have any suggestions of how this can be improved.

Recently I was tasked with setting up a sample Magento site for one of my clients. Magento as most of you already know is a very powerful and flexible open source e-commerce system. The issue was that after completing an install of the demo site I realized that the demo content was missing. Typical me had not bothered to read the installation instructions  which clearly states that the demo data must be installed before you install Magento. Luckily this was a fresh installation and I didn’t have any products in the store yet so adding the default demo data was relatively simple. If you have a fresh install of Magento and decide you want to add demo data post-install follow these steps.