function adaptivetheme_five_5x20_panels_layouts

cis7 five_5x20.inc adaptivetheme_five_5x20_panels_layouts()
cle7 five_5x20.inc adaptivetheme_five_5x20_panels_layouts()
elmsmedia7 five_5x20.inc adaptivetheme_five_5x20_panels_layouts()
icor7 five_5x20.inc adaptivetheme_five_5x20_panels_layouts()
meedjum_blog7 five_5x20.inc adaptivetheme_five_5x20_panels_layouts()
mooc7 five_5x20.inc adaptivetheme_five_5x20_panels_layouts()

File

sites/all/themes/ulmus/adaptivetheme/at_core/layouts/panels/five_5x20/five_5x20.inc, line 70
Implimentation of an Adaptivetheme Panels Layout Plugin A panels layout plugin on steroids and an implementation of hook_panels_layouts().

Code

function adaptivetheme_five_5x20_panels_layouts() {
  $items['five_5x20'] = array(
    'title' => t('AT Five column 5x20'),
    'category' => t('AT Responsive Panels - 4,5,6 column'),
    'icon' => 'five_5x20.png', // Used in Panels Admin only. AT Core uses a CSS sprite for the icons in theme settings.
    'theme' => 'five_5x20',
    'admin css' => 'five_5x20.admin.css', // This holds a basic layout for Panels Admin and the CSS for theme settings sprite. Sprite icons must be 40px by 40px.
    'theme arguments' => array('id', 'content'),
    'regions' => array(
      'five_first' => t('Column 1'),
      'five_second' => t('Column 2'),
      'five_third' => t('Column 3'),
      'five_fourth' => t('Column 4'),
      'five_fifth' => t('Column 5'),
    ),
    
    // The array items below are added by Adaptivetheme and are not normally present
    // in a Panels layout plugin. AT uses these to build the theme settings and generate
    // the CSS used when rendering the layout in the front end.
    'type' => 'five', // - type: dictates what group it will fall into in theme settings.
    'options' => array(// - options: the various layout options the user can choose in theme settings for each device group.
      'five-5x20' => 'default', // - option key: the key used here MUST match the key used in the 'styles', the first one must be called 'default'.
      'five-5x20-2x3-grid' => '2/3 split grid',
      'five-5x20-1x2x2-grid' => 'stack',
      'five-5x20-stack-2' => 'Stack 50/50 bottom',
      'five-5x20-stack' => 'stack', // stack should always refer to "all regions stacked", and use the 'fdw' identifier in 'styles'.
    ),
    'styles' => array(// - styles: these items are used to programatically build and optimize the CSS for each break-point.
      'five-5x20' => array(// - styles keys: these key must match the 'options' keys, the first one must be the default.
        'css' => array(// - css: holds the array of CSS identifiers
          '40' => array('.five-5x20 > .row-1' => 'width:40%'), // selectors as keys, CSS as values, values should align to the the "css" array key identifiers.
          '60' => array('.five-5x20 > .row-2' => 'width:60%'),
          'fl' => array('.five-5x20 > .panel-row' => 'float:left'),
          '50' => array('.five-5x20 > .row-1 > .region' => 'width:50%'),
          '33' => array('.five-5x20 > .row-2 > .region' => 'width:33.333333%'),
        ),
      ),
      'five-5x20-2x3-grid' => array(
        'css' => array(
          '33' => array('.five-5x20 > .panel-row > .region' => 'width:33.333333%'),
          '50' => array('.five-5x20 > .row-1 div.region-five-first,.five-5x20 .row-1 div.region-five-second' => 'width:50%'),
          'fdw' => array('.five-5x20 > .panel-row' => 'float:none;display:block;width:100%;clear:both'),
        ),
      ),
      'five-5x20-1x2x2-grid' => array(
        'css' => array(
          '50' => array('.five-5x20 > .panel-row > div.region' => 'width:50%'),
          'fdw' => array('.five-5x20 > div.panel-row,.five-5x20 > div.panel-row > div.region-five-fifth' => 'float:none;display:block;width:100%;clear:both'),
        ),
      ),
      'five-5x20-stack-2' => array(
        'css' => array(
          '50' => array('.five-5x20 > .row-1 > div.region' => 'width:50%'),
          'fdw' => array('.five-5x20 > .panel-row,.five-5x20 > .row-2 > .region' => 'float:none;display:block;width:100%;clear:both'),
        ),
      ),
      'five-5x20-stack' => array(
        'css' => array(
          'fdw' => array('.five-5x20 > .panel-row > .region,.five-5x20 > .panel-row' => 'float:none;display:block;width:100%;clear:both'),
        ),
      ),
    ),
  );

  return $items;
}