3 Spalten Html Template
top navi, header, main navi, linke seite, mitte, rechte seite, footer
Man nehme eine HTML Vorlage, die im Quelltext dann so aussieht. (gekürzt auf’s wesentliche)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta http-equiv="content-language" content="de" />
<title>titel der webseite</title>
</head>
<body>
<div id="wrapper">
<div id="top_navi"></div>
<div id="header"></div>
<div id="navi_main"></div>
<div id="linkes"></div>
<div id="mitte"></div>
<div id="rechtes"></div>
<div id="footer"></div>
</div>
<!-- end wrapper -->
</body>
</html>
Das ganze Template für Redaxo aufbereitet inkl. dem CSS Framework Grid 960 960.gs und 2 ctype Spalten
<?php
//session_start();
$OOStartArticle = OOArticle::getArticleById($REX['START_ARTICLE_ID'], $REX['CUR_CLANG']);
$meta_beschreibung = $OOStartArticle->getValue("art_description");
$meta_suchbegriffe = $OOStartArticle->getValue("art_keywords");
$meta_bild = $OOStartArticle->getValue("art_file");
if($this->getValue("art_description") != "")
$meta_beschreibung = $this->getValue("art_description");
if($this->getValue("art_keywords") != "")
$meta_suchbegriffe = $this->getValue("art_keywords");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="<?php echo $REX['SERVER'];?>" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta http-equiv="content-language" content="de" />
<meta name="Description" content="<?php print $meta_beschreibung; ?>" />
<meta name="Keywords" content="<?php print $meta_suchbegriffe; ?>" />
<title><?php print $REX['SERVERNAME'].' | '.$this->getValue("name"); ?></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href="files/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="files/960.css" rel="stylesheet" type="text/css" media="screen" />
<link href="files/main.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="container_12" id="wrapper">
<div class="grid_12" id="top_navi"> REX_TEMPLATE[id=2] REX_TEMPLATE[id=3] </div>
<div class="clear"></div>
<div class="grid_12" id="header"><img src="index.php?rex_resize=940c__120h__REX_ARTICLE[field="headerbild"]" alt="as" /></div>
<div class="clear"></div>
<div class="grid_12" id="navi_main">
<?php $rexnav = rex_navigation::factory(); echo $rexnav->get(0,1,FALSE,TRUE); ?>
</div>
<div class="clear"></div>
<div class="grid_3" id="linkes">
<?php $P = explode("|",$this->getValue("path").$this->getValue("article_id")."|"); $rexnav = rex_navigation::factory(); echo $rexnav->get($P[1],3,FALSE,TRUE); ?>
</div>
<div class="grid_6" id="mitte"><?php print $this->getArticle(1); ?></div>
<div class="grid_3" id="rechtes_dreispalter"><?php print $this->getArticle(2); ?></div>
<div class="clear"></div>
<div class="grid_12 hell rund" id="footer">
<p class="copy"><a href="http://www.rex-templates.de" title="http://www.rex-templates.de">by rex-templates</a> | <a href="http://www.redaxo.de" title="einfach, flexibel, sinnvoll">CMS REDAXO</a></p>
</div>
<div class="clear"></div>
</div>
<!-- end wrapper -->
</body>
</html>
Die Datei reset.css
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
*{
margin:0;
padding:0;
}
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}Die Datei 960.css
/*
960 Grid System ~ Core CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/
/* `Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
.container_12 .grid_3 {
width: 220px;
}
.container_12 .grid_6 {
width: 460px;
}
.container_12 .grid_9 {
width: 700px;
}
.container_12 .grid_12 {
width: 940px;
}
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 {
width: 60px;
}
.container_12 .grid_2 {
width: 140px;
}
.container_12 .grid_4 {
width: 300px;
}
.container_12 .grid_5 {
width: 380px;
}
.container_12 .grid_7 {
width: 540px;
}
.container_12 .grid_8 {
width: 620px;
}
.container_12 .grid_10 {
width: 780px;
}
.container_12 .grid_11 {
width: 860px;
}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
Hier noch das Frontend editing do surf
ist im Template mit der id 2 angelegt, sollte sich die id ändern bitte im Template auch ändern. Dank geht an Thomas Skerbis do surf
<?php if ($_SESSION[$REX['INSTNAME']]['UID']>0) { ?>
<div class="do_rexsurf"><a href="<?php echo $REX['SERVER'];?>/redaxo/index.php?page=content&article_id=<?php echo $this->getValue('article_id');?>&mode=edit&clang=0" title="Bearbeiten"><img src="files/edit.png" alt="Bearbeiten" width="30" height="30" /></a> <a href="<?php echo $REX['SERVER'];?>/redaxo/index.php?page=content&article_id=<?php echo $this->getValue('article_id');?>&mode=meta&clang=0" title="Metainformationen" ><img src="files/metainfo.png" alt="Metainformationen" width="30" height="30" /></a> <a title="Abmelden" href="<?php echo $REX['SERVER'];?>/redaxo/index.php?rex_logout=1"><img src="files/abmelden.png" alt="Abmelden" width="30" height="30" /></a> </div>
<?php }?>Hier noch die Rootartikel Navigation
sollte als Template mit der id 3 angelegt werde oder die id im Template ändern. REX_TEMPLATE[id=3]
<?php $articles = OOArticle::getRootArticles(true);
echo '<ul>';
foreach($articles as $article) {
if ($this->getValue('article_id') == $article->getId())
echo '<li><strong>'.$article->getName().'</strong></li>';
else
echo '<li><a href="'.$article->getUrl().'">'.$article->getName().'</a></li>';
}
echo '</ul>';
?>