Hey guys, it's been a while since I wrote my last tutorial so I decided to prepare another one :)
Well, I don't know if this post can be classified as a "tutorial" or it is more of an "explanation" but still, there are many Gantry 5 users who do not utilize the full power of the framework.

The goal of this article is to explain what an Outline is and how you can use them to customize the look and feel of your pages.
I will also give you some practical examples of what you can do with the Outlines :)

So, what an Outline actually is? Well, there is a pretty good explanation in the Outlines section in the official Gantry 5 documentation.
In short, the Outlines allow you to modify and customize individual pages. You create a new Outline, assign it to the page you want, modify the Outline settings and then those modifications will affect only this particular page. Basically, you use the Outlines to override the default theme settings that you have in the Base outline.

As I wrote in this blog post, all our Joomla templates come with a single Outline. We fill out the Layout of this Outline with module positions and then we use the Module Manager (and the "Gantry 5 Particle" module) to publish the modules and the particles on the pages we want. This is actually how Joomla works - you publish modules in Module Positions and assign them to Menu Items (Pages).
So far so good, but what happens if, for example, you want to change the style of a section only on one particular page? If you change the section style in the Base outline, the changes will be applied to all your pages! This is not quite what you wanted, right?

Here comes the Outline into play.
We will use our Paradise Joomla template for the sake of this tutorial but the whole idea and the practical examples below are perfectly valid for any Gantry 5 theme no matter if it runs on Joomla, WordPress or Grav CMS.
So let's get started :)

Changing the style of a section on one page only (the "Styles" tab)

In the following video we create a new Outline, assign it to the "About Us" page and modify the settings for the Utility section.
That's how the modifications are applied to the "About Us" page only and the Utility section stays untouched (still uses the settings from the Base outline) on all other pages.

Modifying the layout of one page only (the "Layout" tab)

Here we create a new Outline, assign it to the "About Us" page and make a single section to be "Fullwidth" (on this page only). We also modify the layout by adding and removing particles and module positions without affecting the layout of the rest of the pages (they still use the one from the Base outline).
This is particularly useful for people who use Gantry 5 on WordPress and Grav CMS, and for those Joomla users who prefer to add the particles directly in the Layout Manager rather then using the "Gantry 5 Particle" module in the Module Manager (for more details, please read this blog post).

Writing page-specific CSS/SCSS code and loading atoms on one page only (the "Page Settings" tab)

In the video below we create a new Outline, assign it to the "About Us" page, we add a Body ID and we write our CSS/SCSS code around this ID. That's how we add specificity to our code and therefore it affects the "About Us" page only.
We also load our Cookie Consent Atom on the "About Us" page only. It doesn't make much sence to load this particular atom on a single page but since it has a visual output, it is a good example for this tutorial.

Be careful when overriding the "Atoms" section!

This is a common mistake that I've seen quite a lot. Be very careful when you override the "Atoms" section in your newly created Outlines because it will no longer inherit from the Base outline. For example, you've been told that you need to load your atoms in the Base outline so they can be loaded on all your pages. But if you override the "Atoms" section in some of your Outlines and then you decide to load an atom on all pages and you put it in your Base outline, it will NOT be loaded on the pages that have a dedicated Outline assigned which overrides the "Atoms" section (LOL, I hope you understand what I mean :D)
Here, the video below explains it all!

Well, that's all for now guys! I hope that you learned something new which will help you to build complex websites easily.
I also hope that you now realize how powerful and awesome the Gantry 5 framework actually is! And this article only scratches the surface :)