These are the steps I took to create my first template with the layout and module positions I want. Based on the Gantry5 Helium Theme. These are not instructions but someone might find it useful if you are going through the same thought process.
Step 1
Step 2
Step 3
Step 4
Step 5
Outlines are equivalent to Joomla templates and are installed in Joomla as templates. Outlines all inherit from a ‘Base Oultine’ which is not visible in Joomla as a template. This inheritance can be turned off.
It is recommend to alter the ‘Base Outline’ for global changes and if you are only going to have one arrangement then you only ever need to adjust this template. The outline ‘Helium – Default’ is configured to inherit all of the ‘Base – outline’ so it would be this that you use as you joomla template. The ‘Helium – Home – Particles’ is just a demo showing particles (which only exist in Gantry) functioning on a Gantry template/outline.
Once you have loaded the layout in outlines the edits to the file /custom/layouts/example1.yaml will not work as this is only a preset file and not the actual the layout/template file.
When you add a layout from a preset what happens is:
You can edit these files and you layout will change.
These are styles that are accessible via the dropdown menus in gantry admin should as module styling.
Gantry’s documentation for noobies is not great because you have no idea what it means except that it is a template framework of some description. If you follow the process below Gantry will appear easy to use.
One of the first questions is how can I change the styiling of the theme. This is where you can find the code you want. It is recommend that you alter everything using Custom CSS and override rules.
This is a collection of notes and links
There are 3 methods for adding custom CSS to gantry
This issue is posted on GitHub
/*-- Fix breadcrumb arrow going to the top --*/
/*-- the first icon in breadcrumbs is at the top caused by below --*/
/* http://localhost/media/gantry5/engines/nucleus/css-compiled/joomla.css:206
[class^="icon-"], [class*=" icon-"] {
margin-right: .25em;
line-height: 14px;
}
/* http://localhost/media/jui/css/icomoon.css:17
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
*margin-right: .3em;
line-height: 14px;
}
/* http://localhost/templates/g5_helium/custom/css-compiled/helium_18.css:26
font-size: 1rem;
line-height: 2;
}
*/
/* Fix only second identifier might be needed.*/
.breadcrumb [class^="icon-"], .breadcrumb [class*=" icon-"] {
line-height: 2;
}
This will give you a standard horizontal DIV menu.
/* Horizontal DIV menu */
/* removes the vertical seperators */
.moduletable .nav.menu.nav-pills {
padding-bottom: 0;
/* border: 1px solid #e0e0e5; - white border */
border: none;
}
/* Corrects Spacing */
.moduletable .nav.menu.nav-pills li {
margin-bottom: 0;
margin-right: 0.625rem;
border-bottom: none;
}
Make the menu thinner (ideal for top-bar menus)
/*-- Make Nav Pills Menu Thinner --*/
/* Remove padding from menu wrapper */
.moduletable .nav.menu {
padding: 0;
}
/* Remove the padding at the bottom of the <li> */
.moduletable .nav.menu li{
padding-bottom: 0;
}
/* remove margin and padding from the link */
.nav-pills > li > a {
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2px;
padding-left: 2px;
margin-top: 2px;
margin-bottom: 2px;
margin-right: 2px;
line-height: 10px;
}
/* Gantry changes the link and background colour when the link is selected - this corrects that */
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
color: inherit;
background-color: inherit;
}
/* Add space between icon and text for the link item */
.nav-pills .fa::before {
margin-right: 5px;
}
/* when screen is too small, center the menu and prevent going under the hamburger */
@media only all and (max-width: 47.938rem) {
#g-top-bar .g-content {
text-align: center;
/* padding: 0.45rem; */
}
}
/* style <li> items */
.nav-pills li a,
.nav-pills li a:hover,
.nav-pills li a:focus {
font-size: 1.1rem;
font-weight: bold;
/*white-space: normal;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;*/
}
on the target
Currently Sections in Gantry, adding, removing, moving and to some extent the styling has to be done manually. Some Preconfigured Sections can has some of their CSS styling set in the admin area under ‘Section Styles’ on the Styles page.
This process outlines how you can manipulate or style the Sections as you want.
Create your own Outline that you can alter which will leave the core files alone and mean your changes will not get wiped out upon update. You need to do this no matter how you want to manipulate sections.
Changing the outline preview image is a useful thing to do by quickly showing the end user what the layout will be like.
Custom Image
We now have a template file that we can alter as needed but you should just read these notes before continuing
Using the example we created above, look at the 2 files
Looking at the layout.yaml there are 2 areas where sections are referenced, we only need to alter 1 as Gantry creates the other.
At the top there is the 'layout:' section and here you add a reference where you want to put your section, we will call our new section ‘testsection’. You need to put this reference where you want the section to appear. Refer to the Gantry documentation for further information.
The 'structure:' section at the bottom will be populated by gantry when you save the layout in the gantry admin. You can write this in manually but why bother if Gantry will do it. The 'structure:' is just styling information for the section
Don’t Use Tabs
Examples
## An empty testsection
layout:
/testsection/: { }
## testsection with a branding particle
layout:
/testsection/:
-
- branding-2200
Once you have made your changes, save the text file and browse to the layout page of the ‘Helium – Test’ outline and you should see your new section.
This is by far the easiest method of stying the section. The section id is always the same as the section name with ‘g-‘ prepended:
<section id="g-testsection">…</section>
So you would just use a the custom.scss for adding either CSS or SCSS styling the element as normal. This file should be placed at g5_helium/custom/scss/custom.scss and it will get parsed by gantry
.g-testsection{
background-color: red;
}
If you style by this method you do not needs to style via the admin method shown below but you can mix and match however you want.
When designing a template for the end user you might like to configure the Gantry admin to allow the user to edit the new section’s settings just like the others in the backend rather than a text file. This takes a little more effort but is fairly easy to achieve.
// Test Section @import "helium/sections/testsection";
Style settings that are configured in Gantry admin can also be subject to Preset Styles where you can quickly change colour schemes. These settings work as long as you have not configured any overrides in the style settings and you allow the presets to be inherited. Only the ones where you have set to specific values will not be affected.
The sections you have created will not have any settings configured in the when using the Preset Styles. This is not a problem as they still work as expected.
You cannot override the g5_helium/gantry/presets.yaml , you would need to edit it directly which is not advised.
https://github.com/gantry/gantry5/issues/306 - the issue is logged at GitHub
When you have removed sections from the Helium template you will still have the section configs in the Gantry admin. This is how to remove them without altering core files of your Gantry template. These instructions use 1 example section but you need to do it for all sections you want to remove.
I will be using the Above Section as an example.
/above/: { }
or it might look like
/above/:
-
- custom-4582
above:
type: section
attributes:
boxed: ''
// Above @import "helium/sections/above";You can in theory override the section SCSS files with an empty file which should have the same effect but it is not a preferred option as you get loads of files you don’t want.
These are not used all that often in basic sites but I will show you an example. Without a clear example this process can be tricky and the only file involved is listed below. I thinks a nested section's primary role is to allow you to specify section width such as a left and right column.
Nested Sections shown on the layout page
You can see that there is an area called 'Container' and this holds the nested sections (Content-left, Mainbar, Content-right).

Nested Sections Yaml
I have only included the section shown above. Dont forget the indentations are done by spaces and not tabs
/content-top/:
-
- position-position-6933
/container-main/:
-
-
'content-left 25':
-
- position-position-4734
-
'mainbar 50':
-
- position-position-2880
-
- system-messages-7485
-
- system-content-1587
-
- position-position-8425
-
'content-right 25':
-
- position-position-3949
/content-bottom/:
-
- position-position-8044
How To
Just use the format above. I am not sure how to describe the exact syntax but 2 spaces is the indentation size you can see in the example above, which works.
Override System Outlines
Gantry comes with outlines for some system pages
You need to override these and configure them how you wish because they probably will not fit in with your new layout. Things will still work if you do not. Use the Gantry Admin to make these changes.
For some reason sections are referenced in the following files that are not directly part of the outline layout.
I don’t think I need to alter any of these for my options above but just incase I have listed them here.
Now I have created my new layout with my new admin configurations (optional) I want to make it the ‘Base Outline’. You do not have to do this but it probably is better if you are going to distribute the template.
NB I should just be able to copy my new theme over the top of the /default/ , but be aware that the other outlines might stop working properly?