Header

Der Header wird durch ein Backendmodul vom Typ "Eigener HTML-Code" umgesetzt und ins Seiten-Layout eingebunden.
In diesem Module werden mittels Insert-Tags alle benötigten Module eingebunden.
Werden mehrere Seiten-Layout verwaltet, entfällt dadurch die Anpassung all dieser Layouts wenn es eine Änderung gibt.

<div class="container">
	{.{insert_module::1}.}
</div>

Navigations-Templates

Im Backend-Modul werden zwei Templates eingebunden "mod_navigation.html5" und "nav_default.html5".
Beide Templates wurden für Bootstrap vorbereitet:

 

mod_navigation.html5

<!-- indexer::stop -->
<div class="topNavContainer navbar float-panel" role="navigation" >

	<a class="navbar-brand" href="/" title="www.copyleft.at" >www.copyleft.at</a>
	
	  <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-<?php echo $this->id; ?>">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
			
	<nav id="bs-navbar-collapse-<?php echo $this->id; ?>" class="<?= $this->class ?> collapse navbar-collapse"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?> itemscope itemtype="http://schema.org/SiteNavigationElement">

	  <?php if ($this->headline): ?>
		<<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
	  <?php endif; ?>

	  <a href="<?= $this->request ?>#<?= $this->skipId ?>" class="invisible hidden"><?= $this->skipNavigation ?></a>

	  <?= $this->items ?>

	  <a id="<?= $this->skipId ?>" class="invisible hidden"> </a>

	  <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search" action="{.{link_url::XXX}.}">
			<div class="input-group">
				<input type="text" class="form-control" placeholder="Search" name="keywords" id="keywords">
				<div class="input-group-btn">
					<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
				</div>
			</div>
        </form>
        </div>
</div>
<!-- indexer::continue -->

nav_default.html5

<ul class="<?php echo $this->level; if($this->level == level_1) echo ' nav navbar-nav'; else if($this->level == level_2) echo ' dropdown-menu'; ?>"> 
<?php foreach ($this->items as $item): ?> 
<?php if ($item['isActive']): ?> 
  <li class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>"> 
    <?php if(strpos($item['class'], 'submenu') !== false): ?> 
        <a class="dropdown-toggle <?php echo $item['class']; ?>" data-toggle="dropdown"> 
          <?php echo $item['link']; ?> 
		  
		   </a> 
    <?php else: ?> 
        <a class="<?php echo $item['class']; ?>"> 
          <?php echo $item['link']; ?> 
        </a> 
    <?php endif; ?> 
           
   
    <?php echo $item['subitems']; ?> 
  </li> 
<?php else: ?> 
<li<?php if ($item['class']): ?>  
  class="<?php echo $item['class'];  
    if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>" 
  <?php endif; ?>> 
   
  <a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?>  
    class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown-toggle'; ?>"  
    <?php if(strpos($item['class'], 'submenu') !== false) echo 'data-toggle="dropdown"'; ?> 
    <?php endif; ?><?php if ($item['accesskey'] != ''): ?> 
    accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?> 
    <?php if(strpos($item['class'], 'submenu') !== false): ?> 
	
    <?php endif; ?> 
  </a><?php echo $item['subitems']; ?> 
  </li> 
<?php endif; ?> 
<?php endforeach; ?> 
</ul>

Body

In den Body werden diverse Bootstrap-Klassen eingebunden.

mod_article.html5

<?php 
/*
	Die Klasse "container" nur bei einspaltigem Layout hinzufügen. 
*/
global $objPage; 
$objLayout = \LayoutModel::findByPk($objPage->layout); # mobiles Layout wird nicht berücksichtigt

$containerClass = "";

if ($objLayout->cols == "1cl")
	$containerClass = "container";

?>

<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
	<div class="<?php echo $containerClass; ?>">
	  <?php if ($this->printable): ?>
		<!-- indexer::stop -->
		<div class="pdf_link">

		  <?php if ($this->printButton): ?>
			<a href="<?= $this->print ?>" rel="nofollow" title="<?= $this->printTitle ?>" onclick="window.print();return false"><?= Image::getHtml('assets/contao/images/print.gif') ?></a>
		  <?php endif; ?>

		  <?php if ($this->pdfButton): ?>
			<a href="<?= $this->href ?>" rel="nofollow" title="<?= $this->pdfTitle ?>"><?= Image::getHtml('assets/contao/images/pdf.gif') ?></a>
		  <?php endif; ?>

		  <?php if ($this->facebookButton): ?>
			<a href="share/?p=facebook&u=<?= $this->encUrl ?>" rel="nofollow" title="<?= $this->facebookTitle ?>" onclick="window.open(this.href,'','width=640,height=380,modal=yes,left=100,top=50,location=no,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');return false"><?= Image::getHtml('assets/contao/images/facebook.gif') ?></a>
		  <?php endif; ?>

		  <?php if ($this->twitterButton): ?>
			<a href="share/?p=twitter&u=<?= $this->encUrl ?>&t=<?= $this->encTitle ?>" rel="nofollow" title="<?= $this->twitterTitle ?>" onclick="window.open(this.href,'','width=640,height=380,modal=yes,left=100,top=50,location=no,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');return false"><?= Image::getHtml('assets/contao/images/twitter.gif') ?></a>
		  <?php endif; ?>

		  <?php if ($this->gplusButton): ?>
			<a href="share/?p=gplus&u=<?= $this->encUrl ?>" rel="nofollow" title="<?= $this->gplusTitle ?>" onclick="window.open(this.href,'','width=600,height=200,modal=yes,left=100,top=50,location=no,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');return false"><?= Image::getHtml('assets/contao/images/gplus.gif') ?></a>
		  <?php endif; ?>

		</div>
		<!-- indexer::continue -->
	  <?php endif; ?>

	  <?= implode('', $this->elements) ?>

	  <?php if ($this->backlink): ?>
		<!-- indexer::stop -->
		<p class="back"><a href="<?= $this->backlink ?>" title="<?= $this->back ?>"><?= $this->back ?></a></p>
		<!-- indexer::continue -->
	  <?php endif; ?>

	</div>
</div>

fe_page.html5

<!DOCTYPE html>
<html lang="<?= $this->language ?>"<?php if ($this->isRTL): ?> dir="rtl"<?php endif; ?>>
<head>

  <?php $this->block('head'); ?>
    <meta charset="<?= $this->charset ?>">
	
    <title><?= $this->title ?></title>
    <base href="<?= $this->base ?>">

    <?php $this->block('meta'); ?>
	<meta name="robots" content="<?= $this->robots ?>">
	<meta name="description" content="<?= $this->description ?>">
	<meta name="keywords" content="<?= $this->keywords ?>">
    <meta name="generator" content="Contao Open Source CMS">

    <meta property="og:title" content="<?php echo $this->pageTitle; ?>" />
    <meta property="og:site_name" content="<?php echo $this->mainTitle; ?>" />
    <meta property="og:type" content="website" />
	<?php
		/*auto_item = dynamisch generierte Sites wie News, MetaModels, ... */
		if( \Input::get('auto_item') == NULL ): ?>
    <meta property="og:image" content="http://www.copyleft.at/files/project/userdata/share/facebook_image.jpg" />
	<?php endif; ?>
    <meta property="og:description" content="<?php echo $this->description; ?>" />

    <link rel="icon" type="image/x-icon" href="favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="manifest" href="favicon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">


    <?php $this->endblock(); ?>

    <?= $this->viewport ?>
    <?= $this->framework ?>
    <?= $this->stylesheets ?>
    <?= $this->mooScripts ?>
    <?= $this->head ?>

    <?php $this->block('html5shiv'); ?>
      <!--[if lt IE 9]><script src="<?= TL_ASSETS_URL ?>assets/html5shiv/<?= $GLOBALS['TL_ASSETS']['HTML5SHIV'] ?>/html5shiv-printshiv.min.js"></script><![endif]-->
    <?php $this->endblock(); ?>
  <?php $this->endblock(); ?>

</head>
<body id="top" class="unknown other <?php if ($this->class) echo ' ' . $this->class; ?>"<?php if ($this->onload): ?> onload="<?= $this->onload ?>"<?php endif; ?> itemscope itemtype="http://schema.org/WebPage">

  <?php $this->block('body'); ?>
    <?php #$this->sections('top'); ?>

    <div id="wrapper">

      <?php $this->block('header'); ?>
        <?php if ($this->header): ?>
          <header id="header" itemscope itemtype="http://schema.org/WPHeader">
            <div class="inside">
              <?= $this->header ?>
            </div>
          </header>
        <?php endif; ?>
      <?php $this->endblock(); ?>

      <?php #$this->sections('before'); ?>

		<?php
		/*
			Die Boottstrap-Container Klasse wird nur in der linken und rechten Spalte hinzugefügt.
			Beim einspaltigen Layout wird die container - Klasse im mod_article hinzugefügt.
		*/
		if ($this->right)
		{
			$idContainer = "container";
			$mainContainer = "";
			$rightClass = "col-xs-12 col-sm-12 col-md-3 col-lg-3 ";
			$mainClass = "col-xs-12 col-sm-12 col-md-9 col-lg-9 ";
			$rowClass = "row";
		}
		elseif ($this->left) // linke Spalte bei dieser Website
		{
			$idContainer = "container"; 
			$mainContainer = "";
			$leftClass = "pull-left col-xs-12 col-sm-12 col-md-3 col-lg-3 ";
			$mainClass = "pull-right col-xs-12 col-sm-12 col-md-9 col-lg-9";
			$rowClass = "row";
		}
		else /* Einspaltiges Layout */
		{
			$idContainer = "";
			$mainContainer = "";
			$leftClass = "";
			$rightClass = "";
			$rowClass = "";
		}
		?>
		
      <?php $this->block('container'); ?>
        <div id="container" class="<?php echo $idContainer; ?>">
			<div class="<?php echo $rowClass; ?>">

			  <?php $this->block('main'); ?>
				<div id="main" class="<?php echo $mainContainer." ".$mainClass; ?>" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/WebPageElement">
				  <div class="inside">
					<?= $this->main ?>
				  </div>
				  <?php #$this->sections('main'); ?>
				</div>
			  <?php $this->endblock(); ?>

			  <?php $this->block('left'); ?>
				<?php if ($this->left): ?>
				  <aside id="left" class="<?php echo $leftClass; ?>">
					<div class="inside">
					  <?= $this->left ?>
					</div>
				  </aside>
				<?php endif; ?>
			  <?php $this->endblock(); ?>

			  <?php $this->block('right'); ?>
				<?php if ($this->right): ?>
				  <aside id="right" class="<?php echo $rightClass; ?>">
					<div class="inside">
					  <?= $this->right ?>
					</div>
				  </aside>
				<?php endif; ?>
			  <?php $this->endblock(); ?>

			</div>
        </div>
      <?php $this->endblock(); ?>

      <?php #$this->sections('after'); ?>

      <?php $this->block('footer'); ?>
        <?php if ($this->footer): ?>
          <footer id="footer" itemscope itemtype="http://schema.org/WPFooter">
            <div class="inside">
              <?= $this->footer ?>
            </div>
          </footer>
        <?php endif; ?>
      <?php $this->endblock(); ?>

    </div>

    <?php #$this->sections('bottom'); ?>
  <?php $this->endblock(); ?>

  <?= $this->mootools ?>

</body>
</html>

Footer

Der Footer wird, wie auch der Header durch ein HTML-Modul im Backend umgesetzt. Dieses Modul wird in jedem Seitenlayout hinzugefügt.