Introduction

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.

1. Gantry 5: Introduction (official)
2. An introduction to Gantry 5 from RocketTheme | OSTraining – This course is 100% spot on. They also offer you in in the form of an eBook which I recommend you sign up for and download.
3. Use and look through these Resources
   • Use the Gantry Docs (Official) as a reference file, it is well written and easy to read but you need to know why you are reading it first.. Just be aware some of the file paths and possible some other might be a little out of date but with a little thought they all make sense
   • RocketTheme (Official) YouTube channel – Many easy to follow videos.
   • Gantry 5 GitHub Repository – You might find you question has already been answered here in the comments
   • QuantumWarp.com – We will have many links and resources as time goes on.
4. These are also a useful to read
   • The description on the Gantry5 GitHub page
   • Gantry5 Joomla Extensions Page

Styling

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.

• http://docs.gantry.org/gantry5/advanced/customizing-theme-files
• All the styling code is in g5_helium/scss/ within the appropriate section. These files are not straight CSS and should only be looked at. The best way to get the styling (because these files have to be parsed) is to load the page and copy the main compiled css file, in this case g5_helium/custom/css-compiled/helium_11.css?581a30e4 the bit on the end (query) will always be different. Or you can grab it from g5_helium/custom/css-compiled/helium_11.css notice the ID on the end, this will be different depending on which outline is loaded, but will all have similar content.
• There are inbuilt styles for modules. These are configures in the module position via the layout manager ‘Module Position’/Block/Variations/ click on the blank input box for a list. You can style different aspects of the module box separately. These settings apply to modules individually.
• Variations - These are styles that are accessible via the dropdown menus in gantry admin should as module styling. They control such things as spaces between the module, text position...
• why is there a helium_19.css, helium-joomla_19.css, custom_19.css would these not be better compiled into 1 file - This is most likely because of the cross platform nature of Gantry Framework

Menu

• Menus are copied (or parts of them ) into the gantry template
• Menu changes and settings are stored in /g5_helium/custom/config/menu/mainmenu.yaml
• New or enabled menu items are added at the end in gantry menu manager
• There currently is an issue with Menu Syncronisation and has an Issue on GitHub - Menu ordering not reflected in Joomla/Gantry menu

Sections and Layout

This is a collection of notes and links

• Outlines - These are equivalent to Joomla templates. Outlines are installed in joomla as templates.
• In a particle's settings
  
  • key = Joomla position name
  • chrome = The third option is the Chrome. This sets the module position's chrome. This takes advantage of any Chrome HTML styling you have set up that you would like to have wrap each module placed in this position.
• Different basic layout (the sections) - http://docs.gantry.org/gantry5/advanced/creating-layout-presets
• Make new sections - https://github.com/gantry/gantry5/issues/1499 - https://github.com/gantry/gantry5/issues/1649
• how do you add a sidebar? (container/section via the yaml outline file)
• When you alter module position sizes in gantry layouot, it automatically adjust the other modules to fit. Exactly how I have not bothered to look or work out.
• Module naming
  • Key = module reference (used in coding)
  • Chrome = https://docs.joomla.org/Understanding_Output_Overrides
    • this seems to be some sort of PHP code wrapping of the output with HTML with the purpose of styling it. This will only be
• Modules vertical stack in the positions, there is no option to assign horizontal stacking. You would use multiple module positions for this.
• Adding a Section to an Existing Layout Preset (Official Doc)
• Creating Layout Presets (Official Docs)
• gantry module positions that are not populated do not take up space, they auto collapse
• gantry module positions if there are 2 modules then the horizontal space is divided between 2 (ie 50%) irrelevant of their position

General Notes

• Everything customized or user set is stored in text in /custom/
• There are some constants you can use for file path
  • gantry-admin://
  • gantry-template://
  • gantry-media://
• Will updates override /custom/ directory = no
• Hydrogen is the first theme built on gantry (and explains why it does not have all of the particles) and Helium is the newer one with extra particles. You should use Helium when you start a new project, but Hydrogen is kept up to date.
• The file name is the referencing point/identifier for a lot of thing
• All configuration and settings are stored in text format using the .yaml format. This allows it to be cross platform easily.
• You cannot disable a section. You can only remove it.
• Offcanvas is used for mainly mobile stuff like the mobile menu
• Outline Files
  • g5_helium/custom/config/{ID}/index.yaml (this file is updated when you save the layout in gantry admin with configuration settings and also stores the preview image location)
  • g5_helium/custom/config/{ID}/layout.yaml (this is the text based layout file)
  • g5_helium/custom/config/{ID}/styles.yaml (this stored any overridden/user set settings and their values) – not always present
• File Override Locations (Official Docs)
• custom HTML is stored in the layout.yaml
• http://docs.gantry.org/gantry5/advanced/customizing-theme-files - file locations are wrong in the docs
• http://docs.gantry.org/gantry5/advanced/creating-layout-presets#adding-a-section-to-an-existing-layout-preset
• Joomla Template names are not stored in the text files, so must be in the joomla database