3

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.

  • 1
    If you are using responsive layout, have you checked that it is still too wide even a small screens? If you are not using a responsive layout, you can just change the sizes with CSS. Have you tried using 16-column layout? – Ville Niemi Jan 18 '15 at 17:05
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.

  • 1
    Thank you. I ended up forcing the sizes I needed with CSS and it worked perfectly. Just had to add the @media queries to compensate for the responsive views. – adadeacon Jan 19 '15 at 18:31
4

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.

  • Tested it and it worked, at least in the interface. In Joomla 3 you can edit template files directly from the administrator, which is pretty useful. – Ville Niemi Jan 19 '15 at 8:45
0

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:

firebug

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%
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.