Welcome to this series of Joomla! Secrets where I talk about the lesser known functions of your Joomla! website. You may not know about some of these functions simply because they are turned off by default. Here is your first secret exposed!
Last fall WhyHunger was gearing up for its annual Hungerthon campaign. The organization needed a way to create a user friendly website with an easy to use CMS and integrated Ecommerce system. In looking at all the possible solutions out there nothing quite met these requirements. Magento was of course the obvious Ecommerce solution but its templating system was not condusive to the project. Joomla! offered an easy to use CMS and also many different extensions for crowdfunding and displaying imagery but it lacked ecommerce functionality. Enter Magebridge, a robust fully featured API for connecting Joomla! and Magento.
Setting up a local Joomla! installation on your laptop or desktop is relatively simple. There are lots of reasons for why you might want to do this. For example, in my case I like to keep a local copy of my client’s website so that if they require an update or a custom change I can test those updates and changes on my local machine before implementing them live. This can save a lot of trouble and downtime on a live site since if something goes wrong at least the live site remains unaffected and you have time to fix the issue. If you are using WordPress and want to do the same thing with your WP site take a look at my article “How to Migrate WordPress to Your Local Server“.
Well here we are, a little bit behind schedule this month but still writing! As promised, in this article we will be talking about the Joomla! Page Suffix. If you read last month’s article you should now know a little something about CSS. In that article we talked about what CSS does and how we can write a custom module class suffix to determine the look and feel of a particular module. The Page Suffix is exactly like the module class suffix except it is a selector class in the Body element. Let’s take a look at the screen shot below to get a sense of how the Page Suffix differs from the module class suffix in terms of HTML heirarchy.
So, you finally have your site set up, people are happily visiting and engaging but now the enevitable question… how does the site perform on mobile devices? The answer if you look for yourself is not too bad but it could be better. Unfortuantely, your RJ Web Builder templates were put together right before the rush to responsive design so they are not going to repond differently depending on screen size (see my recent article on responsive design). However, your templates do have the ability to create a mobile version of your website. In this article we are going to talk about this section of your template manager and how you can create a mobile version of your site.
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!
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.