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

you're currently offline