Gantry grid layouts

Question

I'm creating a Joomla 3 site with the latest Gantry framework. Currently the site is still on my local dev server, but I don't think the site link will be necessary for this question.

So, I'm using the Header positions a, b and c for the logo, menu and social icons (in that order). When I edit the Header positions in the Layouts tab of the Template manager, the smallest it allows me to make position c (where my social icons are) or any position for that matter, is 2. So it's rt-grid-2. I need the width of my social icons' block to only be one grid size, (rt-grid-1).

How can I force this sizing in the template?

I've been creating Joomla websites for a few years now, but always used another framework for creating the custom designed templates. I've recently moved over to Gantry as I find it a better framework in a few ways, but I'm still learning all the ins-and-outs of it.

Answer 1

Not exactly an answer to your question on how to force rt-grid-1 to work, but here's a different approach:

You could publish your social media icons to the header-b position (same as your main menu), and position it using position:absolute. Target your module using a Module Class Suffix (e.g. socialmedia) and do something like this:

#rt-header .socialmedia {
    position: absolute;
    top: 0;
    right: 0;
}

(Change top & right to whatever position you need).

You might also need to add some CSS to your main menu if the social media buttons interfere, because the header-b position will extend to the right border of your page. You should be able to target the div containing your menu by using #rt-header .menu-block.

Answer 2

I believe this is defined in the template-options.xml file in the root directory of your template (so JOOMLA-ROOT/templates/TEMPLATE-NAME/template-options.xml).

For each position you will see a field defined in this file. Within that field definition is two items: schemas and words. Schemas defines the number of columns possible (so if you only wanted to allow up to 3 columns, the value would be 1,2,3). Words defines the allowable column widths (commonly 2,3,4,5,6,7,8,9,10, hence why you can't have 1 column width).

You should be able to add 1 and 11 to the list to allow those values. You can also change the default if you plan to use this template on multiple websites.

Answer 3

The quickest way to implement a non-standard column width in Gantry is to override the CSS.

In the example below, two columns have been defined in #rt-top and set to a 4:8 ratio in the template settings.

This results in a 33.3333% column width for "rt-grid-4" and a 66.6667% column width for "rt-grid-8" in the CSS:

Tip: Use Firebug or similar to work out the appropriate CSS selectors.

Column widths can be overridden in the custom CSS file. Create or edit the file at /templates/rt_[template-name]/css/rt_[template-name]-custom.css and add code like the following or similar, specifying whatever percentage widths you like. As per the example below, you can include media queries to limit the override to certain screen widths or vary the percentages on different screen widths:

@media (min-width: 768px) {
  #rt-top .rt-grid-4 {
    flex-basis: 10%
  }
  #rt-top .rt-grid-8 {
    flex-basis: 90%
  }
}