Das Grid HTML-Markup kann komplett überschrieben werden.

Die Standard Templates liegen in der Grid Library unter /wp-content/plugins/grid/lib/templates/frontend/*.tpl.php bzw. /sites/all/libraries/grid/templates/frontend/*.tpl.php und können als Kopiervorlage verwendet werden.

Um die Templates zu überschreiben wird im Theme Ordner ein Ordner grid angelegt. Hier abgelegte Templates werden automatisch anstelle der  Grid-Standardtemplates verwendet.

Für eine selbst erstellte Box lässt sich ebenfalls ein Template ablegen. Das Schema ist grid-box-[box type].tpl.php. Der Box-Type ist dabei der im Box-Modul unter type() hinterlegte Name. Heißt die Box dort also beispielsweise pictures_with_cats kann sie im Theme über eine Datei grid/grid-box-pictures_with_cats.tpl.php angepasst werden.

In WordPress liegen diese in /wp-content/themes/%themename%.

In Drupal unter /sites/all/themes/%themename%.

Um templates über Module mitzuliefern, registriert man den Pfad in dem die Templates liegen mit add_filter(‘grid_templates_paths’, ‘plugin_function_name’) in WordPress bzw. in Drupal mit module_grid_templates_paths_alter(&$tempaltes) .

Grid

Template: grid.tpl.php

Verfügbare Variablen:

• $this : Das Grid Object
• $containerlist : Ein Array der gerenderten Container

...
<div class="grid clearfix grid-frontend">
	<?php echo implode("", $containerlist)?>
</div>

Die Container werden in einem Wrapper-Element ausgeben, der als Root für das Grid dient.

Container

Template: grid-container.tpl.php

Verfügbare Variablen:

• $this : Das Grid Container Object
• $slots : Ein Array der gerenderten Slots

<?php
...
if ($this->firstcontentcontainer){

	if($this->space_to_right != null){
		$math = explode("d", $this->space_to_right);
	} else {
		$math = explode("d", $this->space_to_left);
	}
	$width = $math[1]-$math[0];
	$class = ($this->space_to_right)? "c-".$width."d".$math[1]."-0" : "c-0-".$width."d".$math[1];
	$class = "grid-container-".$class;
	$str = "grid-container-right-space-".$this->space_to_right;
	$stl = "grid-container-left-space-".$this->space_to_left
?>
<div class="grid-content-container-wrapper <?php echo $class." ".$str." ".$stl; ?> grid-first-content-container">
<?php
}
?>

<div class="<?php echo ($this->style)? $this->style." ":""; echo implode($this->classes," "); ?> grid-container-type-<?php echo $this->type_id;?>">
	<div class="grid-container-content">
	<div class="grid-container-before">
		<?php
		if ($this->title!=""){
			if ($this->titleurl !=""){
			?>
				<h2 class="grid-container-title"><a href="<?php echo $this->titleurl?>"><?php echo $this->title?></a></h2>
			<?php }else{?>
				<h2 class="grid-container-title"><?php echo $this->title?></h2>
			<?php }?>
		<?php }?>
		<div class="grid-container-prolog">
		  	<?php echo $this->prolog?>
		</div>
	</div>

	<div class="grid-slots-wrapper">
	<?php
	if(is_array($slots)){
		echo implode("", $slots);
	}
	?>
	</div>

	<div class="grid-container-after">
		<div class="grid-container-epilog">
			<?php echo $this->epilog?>
		</div>
		<?php if ($this->readmore!=""){?>
		<a href="<?php echo $this->readmoreurl?>" class="grid-container-readmore-link"><?php echo $this->readmore?></a>
		<?php }?>
	</div>
	</div>

</div>

<?php
if ($this->lastcontentcontainer):
?>
</div>
<?php
endif;
?>

WICHTIG: Das Container Template rendert über $this->firstcontentcontainer und $this->lastcontentcontainer ein Wrapper-Element, welches wichtig für den Gebrauch von Sidebars ist.

Box

Template: grid-box-box.tpl.php oder grid-box-boxtype.tpl.php
Die grid-box-box.tpl.php gilt für alle Boxen, die nicht durch ein typspezifisches Boxtemplate grid-box-{boxtype}.tpl.php definiert werden.

Verfügbare Variable:

• $this : Das Grid Box Objekt
• $content : Der gerenderte Box Inhalt

<div class="box<?php echo ($this->style)? " ".$this->style." ": " "; echo implode($this->classes," ")?>">
	<?php
	if ($this->title!=""){

		if ($this->titleurl !=""){
		?>
			<h3 class="b-title"><a href="<?php echo $this->titleurl?>"><?php echo $this->title?></a></h3>
		<?php }else{?>
			<h3 class="b-title"><?php echo $this->title?></h3>
		<?php }?>
	<?php }?>
	<div class="b-prolog">
		<?php echo $this->prolog?>
	</div>

	<?php echo $content?>
	<div class="b-epilog">
		<?php echo $this->epilog?>
	</div>
  	<?php
	if ($this->readmore!=""){?>
	<a href="<?php echo $this->readmoreurl?>" class="b-readmore-link"><?php echo $this->readmore?></a>
	<?php }?>

</div>