You are here:Home»KB»Web Design»Design Elements, Styling, Effects and Code»Gantry»Create a Gantry Template - My Worked Example
Tuesday, 17 January 2017 19:44

Create a Gantry Template - My Worked Example

Written by

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

  • Remember it is a blank template
  • Do fresh install of gantry
  • Think of a template name (Lancastrian)
  • Clone/duplicate base outline, no inheritance
  • Set as default Joomla template
  • Plan your sections, how you want then on paper
  • Edit the layout.yaml of the outline to configure your sections on how you want them
  • Change the name in the .yaml (word auto capitalizes, - are changed to spaces)
  • Add modules, module positions and particles however you want them
  • Edit particle defaults in base outline, styles page, page settings, can do in .yaml file but in admin is easier
  • Make a list of new sections (over the base outline)
  • Make a list of sections to be removed (over the base outline)
  • Copy helium.scss to override location
  • Remove unneeded sections (optional)
  • Disable admin settings via blank .yaml
  • Component out css in helium.scss override or rebuild new stack leaving old one commented out
  • You can first add new sections below but the current default theme is very messy
  • Add new sections
  • Helium CSS already has a new section stack
  • Create SCSS for new sections in custom/scss/helium/sections…. Only for the new ones or any that you want to override, only if you want to style it
  • Make sure you take relevant styling (i.e. aside) and place in the new ones
  • Create admin sections for these optional
  • Disable admin sections by adding blank .yaml files for the no-longer needed sections /custom/blueprints/styles/.yaml

    this causes a new section to be made. Can I disable them in gantry. These will go when I change the default base outline
  • NB: you could copy all SCAA files then you know what to work on
  • Copy SCSS + create for new
  • Copy CSS for aside , sidebar, only override altered code
  • Add admin sections for the new sections
  • take header styles and use that file to create
  • create blank files for the new sections /blueprints/styles/sections
  • the .yaml input files must match the code in the SCSS files. so decide how you want them to look what “sections ?” maybe first basic section
  • what defaults create the new sections with the code from the nearest section and then get the corresponding SCSS code in the right file with references changed as needed.
  • Copy aside and sidebar into yaml
  • There is no yaml for aside and sidebar but there is a SCSS
  • Add styling for the main container > sidebar + aside
  • I will override header so it is standard and make all the sections standard as well (features section). Actually I will leave the header as is because it shows me options and I do not have to use them. The rest I copy features section
  • I used the features section .yaml and SCSS to make all my sections plain and simple. I can alter them later if needed
  • The defaults are what are rendered
  • You can use $base-container in other yaml (these variables are like php variables, cross file)
  • So I have first done the sections styling and admin sections
  • Add custom SCSS /custom/SCSS/custom.scss
  • With the nav pills fix in it

Step 2

  • Check for errors
  • overriding the helium file causes issues = my fault
  • I had not added _mainnav.scss which styles the menu

Step 3

  • Override the default. This should make all other sections disappear.
  • Don’t delete particles folder.
  • The admin section for the other sections are still there
  • Move the original defaults somewhere safe
  • Copy your template files into default
  • Recreate the default outline (inherit all)
  • You can edit on the base outline and all changes will be reflected in the default outline

Step 4

  • Look at how to remove admin sections will yaml overrides. Could still use as is but there is a weired section at the bottom

Step 5

  • When backup, delete the standalone template as it is no longer neeed
  • Aside and sidebar module positions still exist
  • Need to be able to set content-right to max 25% width and main content fills the rest. This setting will not be inherited, I thing it is a bug
  • Develop the Lancastrian theme as a separate theme (not default), re-enable particle defaults via hack
Read 1354 times