Create a new module layout

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 theme 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 theme 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

By default, you can choose between the three options equal, double and stack which are described above. If you want a custom size distribution - let's say 35% / 30% / 35% for three modules in a row, you will have to create your own module layout. To do so, create a new file in /layouts/modules/layouts/ - we call it custom.php in this example. As we only want the layout to work for three modules in this example, the content of custom.php will look like this:

<?php

switch (count($modules)) {

    case 3:
        printf('<div class="grid-box width35 grid-h">%s</div>', $modules[0]);
        printf('<div class="grid-box width30 grid-h">%s</div>', $modules[1]);
        printf('<div class="grid-box width35 grid-h">%s</div>', $modules[2]);
        break;
        
    default:
        echo '<div class="grid-box width100 grid-h">Error: The current number of 
        modules is not supported in this layout. If you need more you need to change this custom 
        layout.</div>';

}

As you can see we have used the CSS classes width35 and width30. These do 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 it to the existing css/layout.css or you can put it in your own style - which will keep your changes safe for updates.

.width30 { width: 30%; }
.width35 { width: 35%; }