Create a custom “Grid Layout” option in Warp 7

All credits of this tutrial got to Michael Maass 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
    • Use a text editor capable of UTF-8 encoding to open the file doubled-last.php and fully replace this block:
      $widths  array  
      by exactly the following:
      $widths  array  
    • 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.

yootheme grid layout

Nemanja Radevic

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

© Radevic Team. All rights reserved. Powered by YOOtheme.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.