Adjusting module widths with the Gantry Slider Control
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
This image is hidden for guests.
Please log in or register to see it.
There is an excellent resource on distributing widths for module positions here -> www.gantry-framework.org/documentation/joomla/configure/layouts
However, for our members who are new to Rockettheme and the Gantry frameworks, this guide hopefully will explain how to use the Gantry slider control to adjust the widths of modules relative to each other.
The one exception to what your going to read below is:
MainBody and Sidebar Layouts
The layout for the mainbody area is slightly different from the other module layouts. The MainBody area in the Gantry framework consists of a set of modules above and below the component area (main content area) called "Content Top" and "Content Bottom". These two module positions, which will ALWAYS be the same width as the MainBody, each have a maximum of 3 module positions available in each position. Gantry will evenly apportion the required width for one to three modules being assigned. If you wish to alter the Gantry provided widths, then you would do so using CSS. Along with this MainBody area, there are up to 3 "Sidebar" positions available. This allows a very flexible 4 column design if needed, however if no sidebar's are required, it will automatically adjust to be a full-width design.
This image is hidden for guests.
Please log in or register to see it.
Of course, we provide unparalleled control with Gantry Framework and you can use the special MainBody layout control to choose your layout in any combination of columns and Sidebars. Not only can you choose the order of your Sidebars and MainBody, but you can also choose the relative sizes of these. The combination of these two features provided a huge array of possible layout combinations. Below is just a sampling of the 36 possible MainBody/Sidebar combinations!
This image is hidden for guests.
Please log in or register to see it.
This image is hidden for guests.
Please log in or register to see it.
Mainbody (6) – Sidebar A (3) – Sidebar B (3)
This image is hidden for guests.
Please log in or register to see it.
This image is hidden for guests.
Please log in or register to see it.
Sidebar A (2) – Mainbody ( 8 ) – Sidebar B (2)
This image is hidden for guests.
Please log in or register to see it.
This image is hidden for guests.
Please log in or register to see it.
Sidebar A (3) – Mainbody (4) – Sidebar B (3) – Sidebar C (2)
This image is hidden for guests.
Please log in or register to see it.
This image is hidden for guests.
Please log in or register to see it.
Sidebar A (6) – Mainbody 6)
The Rest of the Module Positions
The modules we'll be using for this guide are one custom HTML modules, a Joomla "Who's Online" and Search module, like this:
This image is hidden for guests.
Please log in or register to see it.
and a "Who's Online module":
This image is hidden for guests.
Please log in or register to see it.
and finally a Search module:
This image is hidden for guests.
Please log in or register to see it.
Before we start let's cover some terminology. We have decide where to place the modules. In any given module area, e.g. Top, Header, Showcase our Gantry Framework allows a maximum of 6 positions that can be used. You can always find the module position's layout on the "module position's" page of the demo site of the template or in your RocketLauncher installation.
This image is hidden for guests.
Please log in or register to see it.
We access the Gantry slider control WIDGET via the Template Manager -> the template Default or Override that has the page you want to manage -> Layout TAB:
This image is hidden for guests.
Please log in or register to see it.
The Gantry slider control WIDGET consists of 4 main parts:
module area - where we decide to put our module position's
Number of Modules Link - the number of published modules on the page we're dealing with
module position - the actual position that we assigned to our modules in the Module Manager setup
slider control - the slider we use to alter the widths of the modules in relation to each other
This image is hidden for guests.
Please log in or register to see it.
The module position's are numbered "a" to "f". Gantry will divide up a total of 12 columns or grids for the number of positions used. When you successfully create module position's, Gantry has a predefined list of widths that can be used to allocate between the 1 to 6 module position's.
Don't be surprised when you enter the Admin Layout TAB and see the Number of Modules Link set at some arbitrary number. The slider control WIDGET always trys to show the state of module position's in the module area's of the Home page.
If the particular module area doesn't have any module position's published on the Home page then the slider control WIDGET will by default show 4 module position's with the 12 grids distributed as 3 | 3 | 3 | 3 between all 4 modules.
As soon as you publish a module position to a specific module area you will see the "Number of Modules Link" display the number of modules you published.
You needn't concern yourself to the situation as you publish module position's on your pages that when you reenter the Layout TAB screen there is a different number your not expecting.
This is a common scenario:
1) select the # of modules your using for the slider and slide to the layout ratios you wish
2) this setting will be finalized when you click the SAVE button --> it is saved directly to your DB - safe and sound!
3) Now you close the window and in a short while you reenter the same layout slider screen and it looks different -- this is to be expected as its just showing you a DEFAULT value of the state of module position's in the module area's of the Home page.. The template DOESN'T store your module position layouts - ONLY the DB does.
Again the slider control WIDGET is showing the number of modules position's for the Home page. When you save your layouts for module position's on any page they are saved to the Database.
We'll be creating these modules for 3 menu pages that aren't the Home page and then adjusting the module widths.
Our first page is called Example-1 and will have 2 custom HTML modules. In the module manager setup they will be respectively placed in module position's MainTop-a and MainTop-b.
The next page is called Example-1a and will have 2 similar custom HTML modules. In the module manager setup they will be respectively placed in module position's MainTop-a and MainTop-b.
In the front end viewing our Example-1 page, we would see this:
This image is hidden for guests.
Please log in or register to see it.
Example-1a page would look similar as layout goes.
As mentioned above when you enter the Layout TAB screen since there are NO MainTop module position's published on the Home page we will be presented with theNumber of Modules Link showing the "4" default Number of Modules Link. To see the proper slider control setting for our Example-1 page that has 2 module position's published, we have to click the "2" Number of Modules Link. This will get us the correct view of the Example-1 page:
This image is hidden for guests.
Please log in or register to see it.
As you can see Gantry has evenly divided the 12 grids between the 2 module position's at 6 | 6.
Our second page, Example-2 will use a "Who's Online module" assigned to module position MainTop-a, a custom HTML module assigned to module position MainTop-b and last a Search module assigned to module position MainTop-c.
In the front end viewing our Example-2 page, we would see this:
This image is hidden for guests.
Please log in or register to see it.
Again, to see the proper slider control setting for our Example-2 page that has 3 module position's published, we have to click the "3" Number of Modules Link. This will get us the correct view of the Example-2 page:
This image is hidden for guests.
Please log in or register to see it.
As you can see Gantry has evenly divided the 12 grids between the 3 module position's at 4 | 4 | 4.
The second part of this guide is how to change the widths of our module position's.
For the Example-1 page we will subtract 50% of the width of the right MainTop-b module and add that to the left MainTop-a module.
Again we enter the Layout TAB screen and as our Example-1 page has 2 modules, we click the "2" Number of Modules Link and use the slider control till we get this setting:
This image is hidden for guests.
Please log in or register to see it.
In the front end viewing our Example-1 page, we would see this:
This image is hidden for guests.
Please log in or register to see it.
So for any page that you need to change the relative module widths of your module position's in your chosen module area, just click the Number of Modules Link representing the amount of modules you have on a page. Then use the slider control to make your changes.
Remember though, this will affect ALL pages that have the same number of modules in your chosen module area.
To see this let's look at the Example-1a page that had different modules but that were placed in the same module area and the same module position:
This image is hidden for guests.
Please log in or register to see it.
Both pages were affected by our slider control changes as they had the same module area, same Number of Modules and same module position's.
For the Example-2 page we will reduce the width of the middle MainTop-b module and add equal amounts to the left MainTop-a module and right MainTop-c module.
Again we enter the Layout TAB screen and as our Example-2 page has 3 modules, we click the "3" Number of Modules Link and use the slider control till we get this setting:
This image is hidden for guests.
Please log in or register to see it.
Now in the front end viewing our Example-2 page, we would see this:
This image is hidden for guests.
Please log in or register to see it.
If you wish to have two pages with the same number of module position's in a chosen module area to have DIFFERENT relative module widths, you will have to create a template override for the menu page you wish to separately adjust the settings.
Thanks to Kat, David and Mark as this guide wouldn't have been possible without them. - Last Edit: 8 years 4 months ago by DanG.
-
Time to create page: 0.050 seconds