Skip to content

Instantly share code, notes, and snippets.

@olafgrabienski
Created May 29, 2018 16:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save olafgrabienski/995c1645a3d0dc1b39df83e01736fbec to your computer and use it in GitHub Desktop.
Save olafgrabienski/995c1645a3d0dc1b39df83e01736fbec to your computer and use it in GitHub Desktop.
Backdrop CMS: Full width layout to allow blocks in the content region to be full width.
<?php
/**
* @file
* Template for outputting the default block styling within a Layout.
*
* Variables available:
* - $classes: Array of classes that should be displayed on the block's wrapper.
* - $title: The title of the block.
* - $title_prefix/$title_suffix: A prefix and suffix for the title tag. This
* is important to print out as administrative links to edit this block are
* printed in these variables.
* - $content: The actual content of the block.
*/
?>
<div class="<?php print implode(' ', $classes); ?>"<?php print backdrop_attributes($attributes); ?>>
<!-- Block wrapper with container classes. -->
<div class="block-wrapper container container-fluid">
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h2 class="block-title"><?php print $title; ?></h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
<div class="block-content">
<?php print render($content); ?>
</div>
</div><!-- /.block-wrapper -->
</div>
<?php
/**
* @file
* Template for the custom Boxton Full Width layout.
*
* The custom Boxton Full Width layout allows blocks in the content region to be full width, e.g. to define alternating background colors for different Views blocks.
*
* Variables:
* - $title: The page title, for use in the actual HTML content.
* - $messages: Status and error messages. Should be displayed prominently.
* - $tabs: Tabs linking to any sub-pages beneath the current page
* (e.g., the view and edit tabs when displaying a node.)
* - $action_links: Array of actions local to the page, such as 'Add menu' on
* the menu administration interface.
* - $classes: Array of CSS classes to be added to the layout wrapper.
* - $attributes: Array of additional HTML attributes to be added to the layout
* wrapper. Flatten using backdrop_attributes().
* - $content: An array of content, each item in the array is keyed to one
* region of the layout. This layout supports the following sections:
* - $content['header']
* - $content['top']
* - $content['content']
* - $content['bottom']
* - $content['footer']
*/
?>
<div class="layout--boxton layout--boxton-fullwidth <?php print implode(' ', $classes); ?>"<?php print backdrop_attributes($attributes); ?>>
<div id="skip-link">
<a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
</div>
<?php if ($content['header']): ?>
<header class="l-header" role="banner" aria-label="<?php print t('Site header'); ?>">
<div class="l-header-inner container container-fluid">
<?php print $content['header']; ?>
</div>
</header>
<?php endif; ?>
<div class="l-wrapper">
<!-- Remove container classes from wrapper inner. -->
<div class="l-wrapper-inner">
<?php if ($messages): ?>
<!-- Add container classes. -->
<div class="l-messages container container-fluid" role="status" aria-label="<?php print t('Status messages'); ?>">
<?php print $messages; ?>
</div>
<?php endif; ?>
<!-- Add container classes. -->
<div class="l-page-title container container-fluid">
<a id="main-content"></a>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h1 class="page-title"><?php print $title; ?></h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
</div>
<?php if ($tabs): ?>
<!-- Add container classes. -->
<nav class="tabs container container-fluid" role="tablist" aria-label="<?php print t('Admin content navigation tabs.'); ?>">
<?php print $tabs; ?>
</nav>
<?php endif; ?>
<?php print $action_links; ?>
<?php if (!empty($content['top'])): ?>
<!-- No container classes for top region, they are part of the hero block. -->
<div class="l-top">
<?php print $content['top']; ?>
</div>
<?php endif; ?>
<!-- No container classes for content region, they will be added to blocks content. -->
<div class="l-content" role="main" aria-label="<?php print t('Main content'); ?>">
<?php print $content['content']; ?>
</div>
<?php if (!empty($content['bottom'])): ?>
<!-- Add container classes. -->
<div class="l-bottom container container-fluid">
<?php print $content['bottom']; ?>
</div>
<?php endif; ?>
</div><!-- /.l-wrapper-inner -->
</div><!-- /.l-wrapper -->
<?php if ($content['footer']): ?>
<footer class="l-footer" role="footer">
<div class="l-footer-inner container container-fluid">
<?php print $content['footer']; ?>
</div><!-- /.container -->
</footer>
<?php endif; ?>
</div><!-- /.layout--boxton(-full-width) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment