Log in  \/ 
x
or
x
x
Register  \/ 
x
or


search

Module Layouts define the alignment and proportions of a set of modules in a specific position. For example they can be vertically or horizontally aligned. By default the Warp framework offers 3 different module layouts. You can find these module layout files here /warp/layouts/modules/layouts/.

Provided Module Layouts

equal.php

Every module has the same dimension and they are displayed horizontally, next to each other. We have added support for up to 6 modules. You can add more of course. Code example, 4 modules with the same size (100 divided by 4 equals 25)

case 4: 
printf('<div class="grid-box width25 grid-h">%s</div>', $modules[0]);
printf('<div class="grid-box width25 grid-h">%s</div>', $modules[1]);
printf('<div class="grid-box width25 grid-h">%s</div>', $modules[2]);
printf('<div class="grid-box width25 grid-h">%s</div>', $modules[3]);
break;

stack.php

All modules have a full width and will be displayed vertically, one below the other. Code example:

printf('<div class="grid-box width100 grid-v">%s</div>', $module);

double.php

The double layout has different module proportions. For example if you have 3 modules, the first one has twice the size of the other two. Code example: 3 modules, first one has double size

case 3: 
printf('<div class="grid-box width50 grid-h">%s</div>', $modules[0]);
printf('<div class="grid-box width25 grid-h">%s</div>', $modules[1]);
printf('<div class="grid-box width25 grid-h">%s</div>', $modules[2]);
break;

How to set a module layout on a position

In your template settings you are able to set different module layouts for a module position. Just click on Profiles, scroll down to the Layout Settings section and select the module layout you want to apply to this position.

How to add a new module layout?

To create a new module layout add a new file to /layouts/modules/layouts. The best way is to copy an existing module layout and modify it. For example copy /warp/layouts/modules/layouts/double.php to /layouts/modules/layouts/double.php. This new and modified module layout will override the default one. Or just rename it to create a new one. The newly created layout should now be available in the template settings.

Example: How to add more columns

A common usecase is to add a layout for more than the already supported 6 columns. Let's say you want to have 7 modules next to each other with equal sized dimensions. In that case you copy /warp/layouts/modules/layouts/equal.php to layouts/modules/layouts/. In your copy of equal.php, locate the case 6 which should look as follows.

case 6: 
printf('<div class="grid-box width16 grid-h">%s</div>', $modules[0]);
printf('<div class="grid-box width16 grid-h">%s</div>', $modules[1]);
printf('<div class="grid-box width16 grid-h">%s</div>', $modules[2]);
printf('<div class="grid-box width16 grid-h">%s</div>', $modules[3]);
printf('<div class="grid-box width16 grid-h">%s</div>', $modules[4]);
printf('<div class="grid-box width16 grid-h">%s</div>', $modules[5]);
break;

Copy that complete block and paste it directly below the copied block but before the default block. Duplicate the last printf statement and change $modules[5] to $modules[6]. Since we now have seven columns instead of six, the width of each single module has to be adjusted. As 100% divided by 7 (modules) is about 14% we change the CSS class from width16 to width14. With these changes, the new block should look like this:

case 7: 
printf('<div class="grid-box width14 grid-h">%s</div>', $modules[0]);
printf('<div class="grid-box width14 grid-h">%s</div>', $modules[1]);
printf('<div class="grid-box width14 grid-h">%s</div>', $modules[2]);
printf('<div class="grid-box width14 grid-h">%s</div>', $modules[3]);
printf('<div class="grid-box width14 grid-h">%s</div>', $modules[4]);
printf('<div class="grid-box width14 grid-h">%s</div>', $modules[5]);
printf('<div class="grid-box width14 grid-h">%s</div>', $modules[6]);
break;

The CSS class width14 does not exist yet (all existing width-classes are located in /warp/css/layout.css) so we will have to add the following snippet to the existing stylesheet. You can either add that to the existing /css/layout.css or you can put it in your own style - which will keep your changes safe for updates.

.width14 { width: 14.2%; }

Example: Create your own size distribution for modules

Explore

Your cart is empty.