The NIWE website was built in Joomla using the Gantry 5 Framework.
Joomla is an open-source content management system (CMS) for publishing web content. Gantry 5 is the latest generation of a powerful, flexible open source theming framework.
Two Gantry features you need to be aware of are Outlines and Particles.
- An Outline is a configurable style used in one or more areas of your site. It serves as the container on which a page's style, settings, and layout are set. This is equivalent to a template. This is how Gantry lays out the different elements on a page.
- A Particle is a typically small block of data used on the front end. It acts a lot like a widget/module, but can be easily configured in the Gantry 5 Administrator.
Tutorial 1: Updating a Program Schedule
To start, I'll show you how to update the "Upcoming Program" information on one of NIWE's program pages. For this example I'll use the Hair Program. Basically, what we are doing is going to the specific Gantry 5 outline for the Hair Program and then editing the particle that contains the program schedule information found on that outline's layout section.
- Login to Admin where the first page that appears is the Joomla Control Panel (figure 1).
- Click COMPONENTS in the main menu, then from the drop down menu select GANTRY 5 THEMES, and from the slide out menu click DEFAULT THEME (figure 2).
- You should now be on the Base Outline for the Callisto Theme (figure 3).
- Click the tab labeled LAYOUT (figure 4).
- From the Outline drop down menu select "PROGRAMS - HAIR" (figure 5).
- On the PROGRAMS - HAIR outline page, scroll down and find the blue box labeled PROGRAM SCHEDULE. This is the schedule particle. To edit it, click the round gear icon to the right of "100%" (figure 6).
- In the dialog box that pops up, there are 2 events listed -- Day Program and Evening Program. These are the 2 calendar entries that appear on the Hair Style Program page. To edit both entries at the same time, click the gray box with the 4 squares in it below the events (figure 7).
- The new dialog box that appears is where you'll make updates to the calendar schedule. To change an event's name, click the pencil icon to the right of the name. To change an event's details, use the form fields below the name (figure 8).
- When you are done, click the blue APPLY button at the bottome right (figure 9).
- You are now back to the particle's original dialog box. Click the blue APPLY AND SAVE button to finalize the changes (figure 10).
Before clicking apply and save, if you want to add a new event to the program schedule, click the gray box with the "+". If you want to delete an event, mouse over the event's name. 3 icons will appear to the right of the name. Click the trashcan icon.
- To view the website and your changes, click the VIEW SITE link in the lower left (figure 11).