I want to document my explorations, findings, and lessons learned as I feel my way through the process of building a new website with Joomla. I am very much a Joomla virgin, and every tentative step provides me with something new to remember. For instance, the very question of what to do with this Article once I've finished typing it (or rather, once I finish this first little section, because I'll be coming back here as I make progress) is not one that I have an answer to. What page will it appear on? How do I link to it? Add it to a menu?
At this stage -- while we're still living comfortably in the
/tryjoomla subdirectory -- I want to place this article on the front page. But how do I do that? And how do I move the current content of the home page to a secondary location where I can still view it if I wish to do so?
Figuring all that out will be part of the learning process, of course. I am not even entirely sure what I want to do with this site -- which parts of my old site(s) I want to keep, and which I want to discard? How will it all fit together? I read somewhere that the key to getting started with a new Joomla site was to work out what categories you will want -- but at this stage of the game, I only have a hazy notion of what a Category means to Joomla, and how it controls the content.
Before you will be able to charge ahead with Joomla, you will need a site hosted on the internet (or your intranet, if that is where you are playing!) Your site hosting will need to include PHP support, and have a MySQL database.
Obviously, the first step was to install Joomla. No, that's not entirely true: the first step was to decide which version of Joomla I wanted to run with. At the moment, the new version 3.x has some features that interest me, but ultimately I decided to go with the recommended stable version (2.5.8) with the promise that the upgrade to 3.5, when it is released soon, will be painless.
I soon discovered, however, that getting Joomla itself was not the only issue. Once you install it and start poking around behind the scenes, you realise that the other important question is: how do you want your site to look? That is controlled by the Template -- and from some of the ones I've seen, a lot of work can go into creating a new template! My searches led me to the RocketTheme site, and more decisions. Many (all?) of their templates are built upon the Gantry framework, which can, itself, be installed a variety of ways.
I'm actually building two websites at the moment; one for myself, and one for my cousin. She decided she like the look of the free 'Grunge' template from RocketTheme, whereas I -- almost by accident, in the several reinstall attempts -- discovered this base 'Gantry' template that comes with the Framework and decided it was a pretty good place to start. Also along the way, I discovered that while Gantry-based templates (including this one) fully support fluid layouts based on screen width (ideal for smartphone support) the free templates ('Grunge' and 'Quasar') do not! I also discovered that installing 'Grunge' over the top of 'Gantry' tends to cause weirdness to occur -- I dunno, maybe I did something wrong -- and so the install path for this site was different from the install path for my cousin's site.
To get this site started, I downloaded
gantry-4.1.5-rocketlauncer_j25.zip (aka Gantry RocketLauncher for Joomla 2.5) from the Gantry download page. (RocketLauncher is a bundle containing a full installation of Joomla, plus the Gantry plug-in, plus a couple of other plug-ins required to make it all work, plus this 'Gantry' basic template and some sample data. I notice now, barely a day after downloading it, that version 4.1.6 is the new current version. Fortunately, upgrading turns out to be incredibly easy.)
Actually installing it is a piece of cake. Unzip the downloaded file into its own directory on your hard drive. On your web server, create a directory for your Joomla installation (eg,
/tryjoomla) and, using your favourite FTP client, upload everything from the zip file into the directory on the server. Job done; you can proceed to 'Setup'.
Note that if you prefer, you can install Joomla straight into your site's root directory -- but it seems safer (and cleaner) to install it elsewhere, allowing you to get your content set up the way you like it before moving it into root at a later date. From what I've read online, moving it is a fairly simple process (but I'll cover that when I get to it!)
For my cousin's site, the process was almost as easy. I downloaded
Joomla_2.5.8-Stable-Full_Package.zip from the Joomla download page, unzipped it, and uploaded it into the
/tryjoomla directory as above. After doing the setup (see next section) I logged into the back-end, where all the magic happens, and opened the Extensions Manager (which can either be found on the Control Panel, or under the Extensions menu.) From the Install tab, I clicked on the
Browse button under Upload Package File, and located the rt_grunge-bundle.zip file (which I downloaded from the download page for the Grunge template; the Grunge Template J2.5 (bundle) contains both the template, and the Gantry code it requires. If you have already installed Gantry on your server, you can select the (standalone) file instead) and clicked Upload & Install, which proceeded painlessly.
Note, however, that this approach required a little tinkering to get the template to work properly; see 'Grunge and Quasar Templates' below.
Once you have uploaded your Joomla installation, simply point your browser at it to commence the installation process. (This is a very good reason for not installing it straight into your site's root directory. What would happen if Joe Random-Stranger (not his real name!) should happen to browse in before you started the setup process? They could gain access to your Joomla site.)
Setup leads you through a series of pages -- checking compatibility of the environment, setting the name of the site, setting your Administrator login details, and setting up the connection to your database. This should all be fairly straightforward -- although you might want to have your site's cpanel open in a separate browser window so you can perform any required database setup in parallel.
If you have installed the Joomla package, you will probably want to click the Install Sample Data button when you see it, so that you have some data to play with and examine. If you installed the Gantry RocketLauncher package, sample data is automatically installed and you don't get the option.
The first thing you're likely to notice after installing one of these templates (or, I guess, any of the other Gantry-based templates) is that, despite the fact that you have set it as the Site Default in the Template Manager (you did do that, didn't you? :-)) it doesn't seem to have changed the look of your site. This is because each page of your site has a particular template assigned to it, and they are currently all still using your old template. (I believe setting a template to "Default" simply means that any new page will use that template unless told otherwise.)
To fix this, go to the Styles page of the Template Manager and click on the name of the template in the Style column. (Clicking the similar link in the Template column takes you to a different page.) Now click on the Assignments tab. Here you should see a list of all the pages that are actually assigned to your template. Tick the ones that should be assigned -- not the Toggle Selection button, which can be quite useful! You probably want to select all the pages of your site -- but if you have the default Joomla data installed, it is probably best not to select the "Australian Parks" and "Fruit Shop" pages... Then simply hit Save. Et voila!
The second thing you're likely to notice, once you've got it working, is that you have lost your menus. This one had me scratching my head for a while, but it's actually quite simple (once you know how!)
First, go to your Module Manager. Yeah, I know, you wanted to go to your Menu Manager, but that won't help. The way it works, as far as I can tell at this stage, is that you define your menus in the Menu Manager, just as you define/create your articles in Article Manager. But to display an article, or a menu, you must place it in a Module, and then tell that module where it belongs. There are different types of Modules, and for now we're interested in getting our Main Menu back in the sidebar where it was in the last template. So, go to the Module Manager.
First we want to filter our list of modules so it's a little less scary! (Although note, when you first look at the list, it will likely only be displaying 20 items. You can page through the list, looking for the Module you want -- or you can change the "Display #" option down the bottom to display more items per page, or "All".) To filter, look for the "- Select Type -" dropdown box along the top of the module list, and pick Menu from the available options. That's better!
Now, find "Main Menu". (Bizarrely, my site has two of them listed. Not sure what's happening there!) Anyway, look along the "Main Menu" row.
Now, to fix the positioning of a module, you need to know two things: what does its old position really mean (is it top, bottom, left, right?) and what is the equivalent position in the new theme? To find this information, the simplest way is often to Preview the theme right here on your own server. First you need to enable previewing (and I suspect that, once you go live with your site, it would be a good idea to disable it again!) Go to your Template Manager and click on the Options logo across the top somewhere -- the thing that looks like a light switch. In the Templates tab there is only one option: "Preview Module Positions". Set it to Enabled and Save.
Now, back in the Template Manager, switch to the Templates tab if you weren't already there. Each of the site templates listed should now have a "Preview" link. Click that, and a version of your front page will be opened showing all the available positions, by name. They may not be entirely easy to read, but a bit of investigation should tell you that "position-7" is the sidebar, and the corresponding position in Gantry-based templates is "sidebar-a" (or "b" or "c", since their position on the left or right is configurable...)
Switching back to the Module Manager, we could just change our "Main Menu" to the new position (by clicking it -- or ticking it and selecting Edit -- and clicking on the "Select Position" item which brings up a long list of all the available positions) but chances are there will be several modules with their position set to "position-7"; we should probably change all of them at the same time. To do this, change the filtering from "Type: Menu" to "Position: position-7". Now simply select them all, and use the "Batch Processing" section down the bottom to Move all selected modules to the new position.
There is one slight catch, unfortunately: this drop-down box will only list positions that have already been used by at least one module, so "sidebar-a" will not appear in this list unless we manually set at least one module to the new position first. The other thing to watch for: I'm sure that when I did this, all the modules I batch-processed were automatically changed to "Unpublished". Don't forget to re-"Publish" them.
And that's it for now. More to come, no doubt! Now ... how do I publish this? :-)
Edit: Well, I got this on the front page -- sort of. It's not behaving quite how I expected, but I'm sure there's a way to sort that out. This will do for now, though.
Quite simply, I checked the Category (and "Featured=Yes" value) for the article which was in this spot, changed that to something else, then changed this one to match. And here it is. What I really want to do is move this whole index page away from the index position, and produce a new page more to my own specifications. But that can wait... :-)