Schlagwörter

Kategorien

Archiv

Einfaches Template für Redaxo

 

Nun auch ein Template mit Videoanleitung zur freien Verwendung und Erweiterung.

Hier handelt es sich um ein Beispiel wie es gemacht werden kann. Redaxo ist sehr flexibel von da her gibt es hier mehrere Möglichkeiten sein Template zu realisieren.

Ein einfaches Template:

  • Xhtml 1.0 strict
  • Header
  • Root Artikel Navigation
  • rex_factory Root Kategorien Navigation
  • Fester Artikel im Template

Da ich das Template ohne Grafik zur Verfügung stelle diese bitte durch Eigene ersetzen.

Dieses wären:

  • bg_header.png (980px x 120px)

Template Code UTF-8:

<?php
session_start();
?>
<!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>
<base href="<?php echo $REX['SERVER']; ?>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo RexSEO::title(); ?></title>
<meta name="keywords" content="<?php echo RexSEO::keywords(); ?>" />
<meta name="description" content="<?php echo RexSEO::description(); ?>" />
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin' rel='stylesheet' type='text/css'>
<link href="files/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <div id="site">
    <div id="top_nav">
	<?php 
	$articles = OOArticle::getRootArticles(true);
	$root_nav = '<ul>';
		foreach($articles as $article) {
		if ($this->getValue('article_id') == $article->getId())
		$root_nav .= '<li><a class="active" href="'.$article->getUrl().'">'.$article->getName().'</a></li>';
		else
		$root_nav .= '<li><a href="'.$article->getUrl().'">'.$article->getName().'</a></li>';
	}
	$root_nav .= '</ul>';
	print $root_nav;
	?>
    </div>
    <div id="header"> <a id="logo" href="<?php echo $REX['SERVER']; ?>" title="Zur Startseite"><span>Zur Startseite</span></a> REX_TEMPLATE[2] </div>
    <div id="mainnav">
      <?php $rexnav = rex_navigation::factory(); echo $rexnav->get(0,1,FALSE,TRUE); ?>
    </div>
    <div id="main_container">
      <div id="content"> REX_ARTICLE[] </div>
      <div class="clear"></div>
    </div>
    <div id="footer"> REX_ARTICLE[2] <a href="http://www.rexvideo.de">REXvideo</a> </div>
  </div>
</div>
</body>
</html>

CSS Code bitte im Ordner files als main.css speichern.

Hier handelt es sich um eine Beispiel Css ich übernehme keine Garantie auf Vollständigkeit oder Funktionalität in diversen Browsern.

@charset "utf-8";
/* STANDART RESET SOLLTE VERFEINERT WERDEN*/

* { margin: 0px; padding: 0px; }
.clear { display: block; clear: both; height: 0px; }
a { color:#333333; text-decoration:none; outline:none; }
a img { border:none }
/*WEBSEITEN GRUNDEINSTELLUNGEN*/
html { min-height:100.2%; height:100.2% !important; height:100.2%; margin-bottom:1px; }
body { font: 14px Arial, Helvetica, sans-serif; color: #000000; text-align: center; }
#wrapper { text-align: left; margin: 0px auto; }
#wrapper #site { margin: 0px auto; width: 980px; position: relative; }
#wrapper #site #top_nav { line-height: 25px; text-align: right; }
#wrapper #site #header { height: 120px; background: url(bg_header.png) no-repeat; position: relative; }
#wrapper #site #header .do_rexsurf { position: absolute; top: 10px; right: 10px; }
#wrapper #site #header #logo { position: absolute; height: 120px; width: 260px; left: 0px; bottom: 0px; }
#wrapper #site #header #logo span { display: none; }
#wrapper #site #mainnav { line-height: 40px; padding-left: 60px; background-color: #F1F1F1; }
#wrapper #site #main_container { overflow: hidden; clear: left; margin-bottom: 20px; }
#wrapper #site #main_container #subnavigation { float: left; width: 250px; }
#wrapper #site #main_container #content { }
#wrapper #site #footer { text-align: center; font-size: 80%; border-top: 1px dotted #999999; color: #999999; padding-top:5px; margin-bottom: 50px; }
/*NAVIGATIONEN*/
/*TOPNAVI*/
#top_nav { }
#top_nav ul { display: block; list-style-type: none; }
#top_nav ul li { display: inline; }
#top_nav ul li a { margin-right: 5px; margin-left: 5px; color: #333333; text-decoration: none; font-size: 90%; }
#top_nav ul li a:hover { border-bottom: 1px dotted #333333; }
#top_nav ul li a.active { border-bottom: 1px solid #333333; }
/*MAIN NAVIGATION*/
#mainnav { display: block; margin-bottom: 10px; }
#mainnav ul { display: block; list-style-type: none; height: 40px; background: #f1f1f1; }
#mainnav ul li { display: inline; }
#mainnav ul li a { color: #333333; text-decoration: none; display: block; float: left; padding-right: 10px; padding-left: 10px; background-color: #CCCCCC; }
#mainnav ul li a.rex-current { background: #CCCCCC; }
#mainnav ul li a.rex-active { background: #CCCCCC; }
#mainnav ul li a:hover { background: #999999; color: #FFFFFF; }
/*SUBNAVIGATION*/
#subnavigation { -moz-border-radius:10px; -webkit-border-radius:10px; background: #f1f1f1; padding: 20px 0px; }
#subnavigation ul { display: block; list-style-type: none; margin-bottom: 10px; }
#subnavigation ul li { display: inline; }
#subnavigation ul li a { border-bottom: 1px dotted #333333; color: #333333; text-decoration: none; display: block; padding-top: 5px; padding-bottom: 5px; padding-left: 25px; background: url(liste.gif) no-repeat 5px center; line-height: 25px; }
#subnavigation ul li a.rex-current { border-bottom: 1px solid #990000; }
#subnavigation ul li a.rex-active { border-bottom: 1px solid #990000; }
#subnavigation ul li a:hover { border-bottom: 1px dotted #990000; padding-left:26px; }
/*SUBNAVIGATION ZWEITE EBENE*/
#subnavigation ul ul { }
#subnavigation ul ul li { }
#subnavigation ul ul li a { }
#subnavigation ul ul li a.rex-current { }
#subnavigation ul ul li a.rex-active { }
#subnavigation ul ul li a:hover { }
/*SUBNAVIGATION DRITTE EBENE*/
#subnavigation ul ul ul { }
#subnavigation ul ul ul li { }
#subnavigation ul ul ul li a { }
#subnavigation ul ul ul li a.rex-current { }
#subnavigation ul ul ul li a.rex-active { }
#subnavigation ul ul ul li a:hover { }
/*SUBNAV INHALT UNTEN */
#subnavigation .hotline { display: block; text-align: center; font-size: 16px; line-height: 1.5em; margin-bottom: 10px; }
#subnavigation .hotline strong { display: block; margin: 0px 0px 5px; padding: 0px; border-bottom: 1px dotted #666666; }
#subnavigation .center { text-align: center; display: block; padding-top: 5px; padding-bottom: 5px; }
#subnavigation .b2b { }
/*CONTENT INHALT*/
#content h1 { display: block; padding: 10px; font-family: 'Yanone Kaffeesatz', arial, serif; font-size:36px; border-bottom:1px dotted #ccc; margin-bottom: 20px; clear:both; }
#content h1 code { font: 14px Arial, Helvetica, sans-serif; }
#content h2 { display: block; padding: 10px; font: normal 20px Arial, Helvetica, sans-serif; border-bottom:1px dotted #ccc; }
#content h3 { display: block; padding: 10px; font: normal 16px Arial, Helvetica, sans-serif; border-bottom:1px dotted #ccc; }
#content h4 { display: block; padding: 10px; font: normal 14px Arial, Helvetica, sans-serif; border-bottom:1px dotted #ccc; }
#content h5 { display: block; padding: 10px; font: normal 12px Arial, Helvetica, sans-serif; border-bottom:1px dotted #ccc; }
#content h6 { display: block; padding: 10px; font: normal 11px Arial, Helvetica, sans-serif; border-bottom:1px dotted #ccc; }
#content p { line-height: 1.5em; margin: 10px; }
/*CONTENT LISTEN*/
#content ul { display: block; list-style-type: square; margin: 10px 30px; padding: 20px 30px; background: #f1f1f1; -moz-border-radius:5px; -webkit-border-radius:5px; }
#content ul li { line-height: 1.5em; }
#content ol { display: block; list-style-type: lower-roman; margin: 10px; padding: 10px; }
#content .center { line-height: 3em; display: block; text-align: center; }
#content code { display: block; margin: 10px; padding: 10px; height: 300px; color: #333333; font-size: 14px; border: 1px solid #CB8F0E; overflow: auto; background-color: #F1F1F1; }
a.link { line-height: 25px; background: url(liste.gif) no-repeat left center; display: Inline-Block; padding-left: 25px; color: #000000; text-decoration: none; border-bottom: 1px dotted #666666; }
REXVideo | on-Laing Ltd. | CMS Redaxo

^ Scroll to Top