Create a custom “Grid Layout” option in Warp 7

All credits of this tutrial got to Michael Maass

http://yootheme.com/support/question/68491#answer-277994

By default the Warp 7 templates/themes offer three grid layouts for positions: “Parallel“, “Stacked“, and “First Doubled“.
The “First Doubled” layout results in the first module of a position having twice the width the other modules in the same position. Now it might be that for your website you need a “Last Doubled” option where the last module has twice the space you can see a representation here on the following image

grid-layout

“Last Doubled” is not a default grid option yet, but because Warp 7 can be nicely customized it can be added.

Required skills: Using FTP, duplicating a file, editing text files, using copy/paste.
Estimated time required: 5 minutes if you carefully follow these steps.

  1. Add the new grid distribution classes:
    • Access your site’s root via FTP.
    • Navigate into this folder:templates/yoo_TEMPLATE/warp/layouts/grid/ (Joomla)wp-content/themes/yoo_THEME_wp/warp/layouts/grid/ (WordPress)
    • Duplicate the file doubled.php and rename it to exactly
      doubled
    • Use a text editor capable of UTF-8 encoding to open the file doubled-last.php and fully replace this block:
      $widths  array  
          array'1-1'  
          array'2-3''1-3'  
          array'2-4''1-4''1-4'  
          array'2-5''1-5''1-5''1-5'  
          array'2-6''1-6''1-6''1-6''1-6'  
          array'1-6''1-6''1-6''1-6''1-6''1-6'

      by exactly the following:

      $widths  array  
          array'1-1'  
          array'1-3''2-3'  
          array'1-4''1-4''2-4'  
          array'1-5''1-5''1-5''2-5'  
          array'1-6''1-6''1-6''1-6''2-6'  
          array'1-6''1-6''1-6''1-6''1-6''1-6'
    • Save and close the file.
  2. As the file is a new one it will not be replaced when you apply an update.
  3. Add the grid option to the configuration:
    • Now open the filetemplates/yoo_TEMPLATE/config.xml (Joomla)wp-content/themes/yoo_THEME_wp/config.xml (WordPress)
    • Look for this line (around 88):
      <optionvalue"doubled"First doubled</option>

      and in a new line immediately following it add this line

      <optionvalue"doubled-last"Last doubled</option>
    • Save and close the file.
  4. Important: At the time being Warp does not offer an override feature for the config.xml. So you should keep a backup of the modified file or make a note of the modification so you can re-apply it.

In the template’s administration interface, section Layouts, you should now have a further option “Last doubled” and this is how to use it

grid-layouts-backend

This setting will make the last module in a position exactly twice as wide as all the other ones.

Tags:

Nemanja Radevic

Wordpress expert Joomla expert Front end development expert Warp Framework expert Responsive design

Donate to help us continue and write posts to help people out there