Erstellen von Themes
Geschrieben von Silvermoon am 03.07.2010 16:46

---

Am Beispiel des EvertonDuo ist diese nachfolgende Anleitung aufgebaut

Welche Dateien und Verzeichnisse benötigt man für die Erstellung eines Themes?

1. Standardverzeichnisse
- images/
- images/forum/

2. Standarddateien
- theme.php
- layout.html.php
- styles.css
- sowie die Grafiken aus dem "images" Verzeichnis

Die Standardverzeichnisse und Dateien werden in einem Verzeichnis gespeichert, welches den Themenamen wiederspiegelt.
Wie ist der Aufbau der theme.php?
<?php
/*---------------------------------------------------------+
| COMBRIX - Content Management System
| Version 1.01.x
+----------------------------------------------------------+
| Copyright © 2009-2010 MK-WebSoft
| http://www.combrix.de/
+----------------------------------------------------------+
| This program is released as open source software under
| MK-WebSoft license. http://www.combrix.de/license.pdf
| Removal of this copyright header is strictly prohibited
| without written permission from the original author(s).
+----------------------------------------------------------*/
if (!defined("IN_FUSION")) { header("Location: ../../index.php"); exit; }
// theme settings
$body_text = "#555555";
$body_bg = "#ffffff";
$theme_width = "940";
$theme_width_l = "165px";
$theme_width_r = "165px";

$wztool['border_width'] = '1';
$wztool['border_color'] = '#666';
$wztool['bgcolor'] = '#eee';
$wztool['width'] = '0';
$wztool['title_padding'] = '2';
$wztool['padding'] = '2';
$wztool['fcolor'] = '#666';

$user_colors=array("#D10000","#0000AA","#364FE0","#54A454");
// Email-Picture
// text color
$etext_color = array('223','224','225'); // RGB Colors
// background color
$ebg_color = array('0','0','0');        // RGB Colors

define("LEFT_PANEL_START",'<td class="side-border-left" valign="top"><div class="image-left"><img src="'.THEME.'images/blank.gif" style="width:'.$theme_width_l.';height:0px;border:0px;" alt="" /></div>');
define("LEFT_PANEL_END",'</td>');
define("CONTENT_START",'<td class="main-bg" width="100%" valign="top">');
define("CONTENT_END","</td>");
define("RIGHT_PANEL_START",'<td class="side-border-right" style="width:'.$theme_width_r.';" valign="top"><div class="image-right"><img src="'.THEME.'images/blank.gif" style="width:'.$theme_width_r.';height:0px;" alt="" /></div>');
define("RIGHT_PANEL_END","</td>");

function stripchar($ord) {
$boxname="";
for ($i=0; $i<strlen($ord);$i++) {
if (($ord[$i] >="A" and $ord[$i] <= "Z") or ($ord[$i] >="a" and $ord[$i] <= "z") ) {
$boxname=$boxname.$ord[$i];
}
}
return $boxname;
}

function theme_layout() {
    require_once('layout.html.php');
}

function render_header($header_content=null) {
global $theme_width, $settings;
echo "<table class='outer-border' width='".$theme_width."' cellspacing='0' cellpadding='0' align='center'>\n";
echo '<tr><td colspan="2" class="full-header">'.$header_content.'</td></tr>
<tr><td class="white-header">
'.showsublinks("","sublinks_block").'</td><td width="15%" nowrap="nowrap" class="white-header" style="text-align: right; padding-right: 8px;">
'.showsubdate().'</td></tr>
<tr><td colspan="2">';
echo '<table cellpadding="0" cellspacing="0" width="100%">
<tr>';
}

function render_footer($license=false) {
global $theme_width,$settings;
echo "\n</tr></table>\n";
echo "<table class='footer' width='100%' cellpadding='1' cellspacing='1'><tr>";
echo "<td align='center'>".stripslashes($settings['footer'])."<br>\n";
echo showcopyright('footerlink','image')." ".showcounter()."<br>Theme based on Everton Duo by <a href='http://www.digital-dominion.co.uk/news.php' class='footerlink' target='_blank'>Nick Jones</a> rebuild by <a href='http://www.bs-f.de' class='footerlink' target='_blank'>V.M.</a><br>";
echo "<br>".SERVER_STATS."</td>";
echo "</tr></table>";

echo "</td></tr>";
echo "</table>\n";
}


function opentable($title) {
echo "<table width='100%' class='border'>
<tr><td class='capmain'>".$title."</td></tr>
<tr><td class='main-body'>\n";
}

function closetable() {
echo "</td>
</tr>
</table>\n";
tablebreak();
}

function openside($title) {    
echo "<div style='width:100%' class='border'>
<div><table width='100%' cellspacing='1' cellpadding='1' class='scapmain'><tr><td>".$title."</td><td width='1%'></td></tr></table></div>
<div class='side-body'>\n";
}

function closeside() {
echo "</div>
</div>\n";
tablebreak();
}

function opensidex($title,$state="on") {
global $tpl;
$boxname=stripchar($title);
$tpl->more_css('<style>#box_'.$boxname.' {'.($state=="on" ? '' : 'display:none;').'}</style>','text');
$tpl->more_javascript('
<script>
$(document).ready(function(){
$("#'.$boxname.'").click(function() {
    $("#box_'.$boxname.'").slideToggle();
    });
});
</script>
','text');    

echo "<div style='width:100%' class='border'>
<div id='".$boxname."' style='cursor:pointer;' />
<table width='100%' cellspacing='1' cellpadding='1' class='scapmain'><tr><td>".$title."</td></tr></table></div>
<div class='side-body' id='box_".$boxname."' />\n";
}

function closesidex() {
echo "</div>
</div>\n";
tablebreak();
}

function openlabel($title,$state="on") {
global $tpl;
$boxname=stripchar($title);
$tpl->more_css('<style>#box_'.$boxname.' {'.($state=="on" ? '' : 'display:none;').'}</style>','text');
$tpl->more_javascript('
<script>
$(document).ready(function(){
$("#'.$boxname.'").click(function() {
    $("#box_'.$boxname.'").slideToggle();
    });
});
</script>
','text');    

echo "<div style='width:100%'>
<div id='".$boxname."' style='cursor:pointer;' />
<table width='100%' cellspacing='1' cellpadding='1' class='side-label'><tr><td><img src='".THEMEIMAGE."bullet.gif' alt='' /> ".$title."</td></tr></table></div>
<div id='box_".$boxname."' />\n";
}

function closelabel() {
echo "</div>
</div>\n";
}

function opentablex($title,$state="on") {
global $tpl;
$boxname=stripchar($title);
$tpl->more_css('<style>#box_'.$boxname.' {'.($state=="on" ? '' : 'display:none;').'}</style>','text');
$tpl->more_javascript('
<script>
$(document).ready(function(){
$("#'.$boxname.'").click(function() {
    $("#box_'.$boxname.'").slideToggle();
    });
});
</script>
','text');    

echo "<div style='width:100%' class='border'>
<div id='".$boxname."' style='cursor:pointer;' />
<table width='100%' cellspacing='1' cellpadding='1' class='scapmain'><tr><td>".$title."</td></tr></table></div>
<div class='side-body' id='box_".$boxname."' />\n";
}

function closetablex() {
echo "</div>
</div>\n";
tablebreak();
}

function tablebreak() {
echo "<div style='width:100%; height:5px'>\n</div>\n";
}
Erklärungen der einzelnen Funktionen und Variablen

// Theme settings
$body_text = "#555555";  // allgemeine Textfrabe des Themes
$body_bg = "#ffffff";  // allgemeine Hintergrundfarbe des Themes
$theme_width = "940";  // Gesamtbreite des Themes
$theme_width_l = "165px"; // Gesamtbreite der linken Panels
$theme_width_r = "165px";  // Gesamtbreite der rechten Panels

Diese Settings sind noch Bestandteile von alten Fusion-Themes.

---

// Konfiguration der wzToolTip Anzeige
$wztool['border_width'] = '1';   // Breite des Rahmens
$wztool['border_color'] = '#666'; // Farbe des Rahmens
$wztool['bgcolor'] = '#eee';  // Hintergrundfarbe des Rahmens
$wztool['width'] = '0';    // Breite des wzTool => 0=automatische Anpassung
$wztool['title_padding'] = '2';  // Titelabstand zum Rahmen
$wztool['padding'] = '2'; // allgemeiner Abstand zum Rahmen
$wztool['fcolor'] = '#666';  // Schriftfarbe

---

// Benutzerfarben für die colorize_users() Funktion
// $user_colors=array(SUPERADMIN Farbe,ADMIN Farbe,GLOBALMOD Farbe,MOD Farbe);
$user_colors=array("#D10000","#0000AA","#364FE0","#54A454");

// Email-Picture (Anzeige in der register.php bei Email-Verifizierung
// text color
$etext_color = array('223','224','225'); // RGB Colors
// background color
$ebg_color = array('0','0','0');        // RGB Colors

---

// Globale Konstante welche das Starten und Beenden der Panels definieren
// Beginnn der Anzeige für Linke Panels
define("LEFT_PANEL_START",'<td class="side-border-left" valign="top"><div class="image-left"><img src="'.THEME.'images/blank.gif" style="width:'.$theme_width_l.';height:0px;border:0px;" alt="" /></div>');

// Beenden der Anzeige von Linke Panels
define("LEFT_PANEL_END",'</td>');

// Starten des Content bereichs
define("CONTENT_START",'<td class="main-bg" width="100%" valign="top">');

// Ende des Contentbereichs
define("CONTENT_END","</td>");

// Starten der Anzeige von den rechten Panels
define("RIGHT_PANEL_START",'<td class="side-border-right" style="width:'.$theme_width_r.';" valign="top"><div class="image-right"><img src="'.THEME.'images/blank.gif" style="width:'.$theme_width_r.';height:0px;" alt="" /></div>');

// Ende der Anzeige von den rechten Panels
define("RIGHT_PANEL_END","</td>");
// Die Funktion zum Bereinigen von Boxnamen für Flipbox/Slide Funktionen
function stripchar($ord) {
$boxname="";
for ($i=0; $i<strlen($ord);$i++) {
if (($ord[$i] >="A" and $ord[$i] <= "Z") or ($ord[$i] >="a" and $ord[$i] <= "z") ) {
$boxname=$boxname.$ord[$i];
}
}
return $boxname;
}

// Die neue Funktion zum Aufbau des Seitenlayouts
function theme_layout() {
    require_once('layout.html.php');
}

// Die alte render_header($header=null) Funktion
function render_header($header_content=null) {
global $theme_width, $settings;
echo "<table class='outer-border' width='".$theme_width."' cellspacing='0' cellpadding='0' align='center'>\n";
echo '<tr><td colspan="2" class="full-header">'.$header_content.'</td></tr>
<tr><td class="white-header">
'.showsublinks("","sublinks_block").'</td><td width="15%" nowrap="nowrap" class="white-header" style="text-align: right; padding-right: 8px;">
'.showsubdate().'</td></tr>
<tr><td colspan="2">';
echo '<table cellpadding="0" cellspacing="0" width="100%">
<tr>';
}

// Die alte render_footer($license=false) Funktion
function render_footer($license=false) {
global $theme_width,$settings;
echo "\n</tr></table>\n";
echo "<table class='footer' width='100%' cellpadding='1' cellspacing='1'><tr>";
echo "<td align='center'>".stripslashes($settings['footer'])."<br>\n";
echo showcopyright('footerlink','image')." ".showcounter()."<br>Theme based on Everton Duo by <a href='http://www.digital-dominion.co.uk/news.php' class='footerlink' target='_blank'>Nick Jones</a> rebuild by <a href='http://www.bs-f.de' class='footerlink' target='_blank'>V.M.</a><br>";
echo "<br>".SERVER_STATS."</td>";
echo "</tr></table>";

echo "</td></tr>";
echo "</table>\n";
}

// Allgemeine Funktion zum Starten von Tabellen
function opentable($title) {
echo "<table width='100%' class='border'>
<tr><td class='capmain'>".$title."</td></tr>
<tr><td class='main-body'>\n";
}

// die zur opentable() Funktion gehörende Closefunktionen
function closetable() {
echo "</td>
</tr>
</table>\n";
tablebreak();
}

// Funktionen zum Starten und Beenden von den einzelnen Panels (rechte/linke Panels)
function openside($title) {    
echo "<div style='width:100%' class='border'>
<div><table width='100%' cellspacing='1' cellpadding='1' class='scapmain'><tr><td>".$title."</td><td width='1%'></td></tr></table></div>
<div class='side-body'>\n";
}

function closeside() {
echo "</div>
</div>\n";
tablebreak();
}

// Wie openside() nur mit slideDown Funktion
function opensidex($title,$state="on") {
global $tpl;
$boxname=stripchar($title);
$tpl->more_css('<style>#box_'.$boxname.' {'.($state=="on" ? '' : 'display:none;').'}</style>','text');
$tpl->more_javascript('
<script>
$(document).ready(function(){
$("#'.$boxname.'").click(function() {
    $("#box_'.$boxname.'").slideToggle();
    });
});
</script>
','text');    

echo "<div style='width:100%' class='border'>
<div id='".$boxname."' style='cursor:pointer;' />
<table width='100%' cellspacing='1' cellpadding='1' class='scapmain'><tr><td>".$title."</td></tr></table></div>
<div class='side-body' id='box_".$boxname."' />\n";
}

function closesidex() {
echo "</div>
</div>\n";
tablebreak();
}

// Neue Funktion zur Anzeige der Adminrechte im UserInfo Panel
function openlabel($title,$state="on") {
global $tpl;
$boxname=stripchar($title);
$tpl->more_css('<style>#box_'.$boxname.' {'.($state=="on" ? '' : 'display:none;').'}</style>','text');
$tpl->more_javascript('
<script>
$(document).ready(function(){
$("#'.$boxname.'").click(function() {
    $("#box_'.$boxname.'").slideToggle();
    });
});
</script>
','text');    

echo "<div style='width:100%'>
<div id='".$boxname."' style='cursor:pointer;' />
<table width='100%' cellspacing='1' cellpadding='1' class='side-label'><tr><td><img src='".THEMEIMAGE."bullet.gif' alt='' /> ".$title."</td></tr></table></div>
<div id='box_".$boxname."' />\n";
}

function closelabel() {
echo "</div>
</div>\n";
}

// wie opentable() nur mit slideDown Funktion (Einsatz für Mittlere Panels und allgemeiner Content)
function opentablex($title,$state="on") {
global $tpl;
$boxname=stripchar($title);
$tpl->more_css('<style>#box_'.$boxname.' {'.($state=="on" ? '' : 'display:none;').'}</style>','text');
$tpl->more_javascript('
<script>
$(document).ready(function(){
$("#'.$boxname.'").click(function() {
    $("#box_'.$boxname.'").slideToggle();
    });
});
</script>
','text');    

echo "<div style='width:100%' class='border'>
<div id='".$boxname."' style='cursor:pointer;' />
<table width='100%' cellspacing='1' cellpadding='1' class='scapmain'><tr><td>".$title."</td></tr></table></div>
<div class='side-body' id='box_".$boxname."' />\n";
}

function closetablex() {
echo "</div>
</div>\n";
tablebreak();
}

// Abstandshalter von Panelboxen bzw. Panels zum Content
function tablebreak() {
echo "<div style='width:100%; height:5px'>\n</div>\n";
}
Der Code für die neue layout.html.php

<?php
/*---------------------------------------------------------+
| COMBRIX - Content Management System
| Version 1.01.x
+----------------------------------------------------------+
| Copyright © 2009-2010 MK-WebSoft
| http://www.combrix.de/
+----------------------------------------------------------+
| This program is released as open source software under
| MK-WebSoft license. http://www.combrix.de/license.pdf
| Removal of this copyright header is strictly prohibited
| without written permission from the original author(s).
+----------------------------------------------------------*/
!preg_match("/layout.html.php/i",$_SERVER['PHP_SELF']) or die("Access denied!");
global $settings;
?>
<body>
<script type="text/javascript" src="<?php echo JSCRIPTS;?>wz_tooltip.js"></script>
<table class="outer-border" width="940px" cellspacing="0" cellpadding="0" align="center">
<tr><td colspan="2" class="full-header"><?php echo SITEBANNER; ?></td></tr>
<tr><td class="white-header"><?php echo showsublinks("","sublinks_block");?></td>
<td width="15%" nowrap="nowrap" class="white-header" style="text-align: right; padding-right: 8px;">
<?php echo showsubdate();?></td></tr>
<tr><td colspan="2">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<?php
if (LEFT_PANEL!="") {
echo LEFT_PANEL_START.LEFT_PANEL.LEFT_PANEL_END;
}
echo CONTENT_START;
if (CENTER_TOP!="") echo CENTER_TOP;
echo CONTENT;
if (CENTER_BOTTOM!="") echo CENTER_BOTTOM;

if (RIGHT_PANEL!="")
echo RIGHT_PANEL_START.RIGHT_PANEL.RIGHT_PANEL_END;
?>
</tr></table>
<table class='footer' width='100%' cellpadding='1' cellspacing='1'><tr><td align='center'>
<?php echo stripslashes($settings['footer']); ?><br>
<?php echo showcopyright('footerlink','image');?> <?php echo showcounter();?><br>
Theme based on Everton Duo by <a href='http://www.digital-dominion.co.uk/news.php' class='footerlink' target='_blank' rel="nofollow">Nick Jones</a>
<br><?php echo SERVER_STATS;?></td>
</tr></table>
</td></tr>
</table>
</body>
</html>
Erklärung der layout.html.php

// Einbindung der Seiteneinstellungen und der Templatevaribale
// Weitere Variable können hier definiert werden
global $settings;

der Bereich zwischen  <body>...</body> ist der eigentliche Bodystyle HTML Code und kann mit PHP Code kombiniert werden.

Die Konstanten:
- LEFT_PANELS -> Ausgabe der linken Panels (Bereich kann leer sein)
- RIGHT_PANELS -> Ausgabe der rechten Panels ( Bereich kann leer sein)
- CENTER_TOP -> Mittlere obere Panels (Bereich kann leer sein)
- CENTER_BOTTOM -> Mittlere untere Panels (Bereich kann leer sein)
- CONTENT -> Sollte immer Inhalt haben :)

Die Funktionen:
- showcopyright('footerlink','image')
-> Anzeige des Copyrights (Pflichtangabe)
-> Parameter 'footerlink' gibt die CSS-Klasse an
-> Parameter 'image' gibt das COMBRIX Icon wieder. kann weggelassen werden)

- showcounter();
->Wiederhabe des Besucherzählers 

- showsublinks("","sublinks_block");
-> Anzeige der Kopfnavigation
-> 1. Parameter ist der Trenner der Links
-> 2. Parameter ist die CSS-Klasse der LinksDie styles.css
body{background:#eee url(images/body-bg.png) repeat-x;color:#444;font:normal 62.5%"Lucida Sans Unicode",sans-serif;margin:0;}
.outer-border{background-color:#f9f9f9;border-left:#ccc 1px solid;border-right:#ccc 1px solid;border-bottom:#ccc 1px solid;margin:0 auto;padding:10px;width:940px;text-align:left;}
.full-header{background:#eee;background:url(images/header.png) repeat-x;font-size:12px;color:#aaa;padding:5px;height:90px;}
.white-header{border:0;font-size:12px;font-weight:normal;color:#fff;background-color:#eee;background-image:url(images/sub-header-bg1.png);background-repeat:repeat-x;vertical-align:middle;line-height:28px;}
div.image div.image-left div.image-right{font-size:0px;padding:0;margin:0;height:0;white-space:nowrap;text-align:center;}
.footer{font-size:10px;color:#666;background-color:#eee;border:1px #ccc solid;padding:5px;}
fieldset{border:1px solid #363b47;-moz-border-radius:5px;}
legend{color:#363b47;text-align:center;font-weight:bold;font-size:11px;}
.nobr{white-space:nowrap;}
a{color:#124a97;text-decoration:none;font-weight:normal;}
a:hover{color:#124a97;text-decoration:underline;}
a.side{color:#222222;text-decoration:none;}
a.side_show{text-decoration:none;color:#124a97;font-weight:bold;}
a:hover.side{color:#124a97;text-decoration:none;}
a.side.aktive{color:#124a97;text-decoration:none;}
a.white{color:#fff;text-decoration:none;}
a:hover.white{color:#fff;text-decoration:underline;}
.capmain a.white{color:#444;text-decoration:none;}
.capmain a.white:hover{color:#444;text-decoration:none;}
.capmain a.white:visited{color:#444;text-decoration:none;}
a.sublinks_block{color:#fff;text-decoration:none;font-weight:bold;padding:6px 10px 6px 10px;font-size:12px;font-weight:normal;background:transparent url(images/sub-header-bg1.png) right repeat-x;}
a:hover.sublinks_block{color:#fff;text-decoration:none;font-weight:bold;font-weight:normal;background:transparent url(images/sub-header-bg.png) right repeat-x;}
a.sublinks_block.aktive{color:#fff;text-decoration:none;font-weight:bold;font-weight:normal;background:transparent url(images/sub-header-bg.png) right repeat-x;}
form{margin:0px 0px 0px 0px;}
hr{border-top:solid 1px #f9f9f9;border-bottom:solid 1px #CCC;border-left:solid 1px #f9f9f9;border-right:solid 1px #f9f9f9;}
hr.side-hr{border-top:solid 1px #eee;border-bottom:solid 1px #999;border-left:solid 1px #eee;border-right:solid 1px #eee;}
a.footerlink{color:#124a97;text-decoration:none;font-weight:normal;}
a:hover.footerlink{color:#124a97;text-decoration:underline;font-weight:normal;}
p{line-height:1.3em;margin:0 0 12px 0;}
ul, ol{margin-bottom:0;margin-top:0;padding-bottom:0;padding-top:0;}
h1, h2, h3, h4, h5, h6{font-weight:bold;}
h1{font-size:14px;color:#000;}
h2{font-size:13px;color:#000;}
h3{font-size:12px;color:#000;}
h4{font-size:10px;color:#000;}
td{font-size:11px;}
th{text-align:center;}
pre{font-size:12px;}
.alt{color:#555;}
.button{font-size:12px;color:#555;background-color:#f1f1f1;height:20px;border:1px #ccc solid;padding-bottom:3px;margin-top:2px;}
.textbox{background-color:#FFFFFF;border:1px solid #898A8A;padding:2px;font-size:11px;font-family:tahoma, verdana, arial;color:#555;}
.main-body{font-size:12px;color:#555;background-color:#fff;padding:5px;white-space:normal;border:1px solid #ccc;}
.main-body_b{font-size:12px;color:#555;background-color:#fff;padding:5px;white-space:normal;margin-top:2px;}
.side-body{font-size:12px;color:#777;padding:4px;background-color:#eee;border-right:1px solid #ccc;border-left:1px solid #ccc;border-bottom:1px solid #ccc;}
.main-bg{background-color:#f9f9f9;padding-left:0px;padding-right:0px;padding-top:4px;padding-bottom:5px;}
.border{border:0;}
.side-border-left{padding:5px 5px 5px 0;background-color:#f9f9f9;white-space:nowrap;border:0px solid #f4f4f4;}
.side-border-right{padding:5px 0 5px 5px;background-color:#f9f9f9;white-space:nowrap;border:0px solid #f4f4f4;}
.news-footer{font-size:9px;color:#000;padding:1px 2px 2px 2px;}
.capmain{border:1px solid #ccc;font-size:12px;font-weight:bold;color:#666;background-color:#eee;height:20px;vertical-align:middle;padding:3px;}
.capmain_b{font-size:12px;font-weight:bold;color:#666;background-color:#eee;height:20px;vertical-align:middle;padding:3px;}
.capmain_c{border:1px solid #ccc;font-size:12px;font-weight:normal;color:#666;background-color:#eee;height:20px;vertical-align:middle;padding:3px;}
.scapmain{background:url(images/cap.png) repeat-x;border:1px solid #ccc;font-size:12px;font-weight:bold;color:#666;background-color:#eee;height:20px;vertical-align:middle;padding:3px;}
.tbl-border{background-color:#ccc;}
.tbl-border_b{background-color:#fff;margin-top:1px;}
.tbl{font-size:11px;color:#555;padding:4px;}
.tbl1{font-size:11px;color:#555;background-color:#fff;padding:4px;}
.tbl2{font-size:11px;color:#555;background-color:#eee;padding:4px;}
div.forum-caption,table.forum-caption,tr.forum-caption,th.forum-caption,td.forum-caption{font-size:12px;font-weight:bold;color:#fff;background-color:#222222;padding:2px 4px 4px 4px;background-image:url(images/button.gif);background-repeat:repeat-x;}
a.forum-caption,a:hover.forum-caption{font-size:12px;font-weight:bold;color:#555;text-decoration:none;border:0px;}
.quote{font-size:11px;color:#555;background-color:#FFF;width:400px;max-width:550px;max-height:400px;overflow:auto;background-color:rgb(215, 220, 233);border:0px none;min-height:40px;vertical-align:middle;white-space:normal;}
.poll{height:11px;border:1px #000 solid;}
.comment-name{font-weight:bold;color:#005599;}
.shoutboxname{font-weight:bold;color:#005599;}
.shoutbox{color:#777;}
.shoutboxdate{color:#888;}
.shoutboxname,.shoutboxdate,.shoutbox{font-size:9px;}
.small{font-size:11px;font-weight:normal;}
.small2{font-size:10px;font-weight:normal;color:#555;}
.side-small{font-size:9px;font-weight:normal;color:#555;}
.side-label{font-size:12px;background-color:#f1f1f1;padding:2px 2px 3px 2px;}
.gallery{padding:16px 0px 8px 0px;}
.gallery img{border:1px solid #ccc;}
.gallery:hover img{border:1px solid red;}
img.activegallery{border:1px solid green;}
img{border:0 none;}
div.pagination{padding-left:2px;padding-bottom:3px;text-align:left;font-size:11px;}
a.current{border:1px solid #ccc;margin-right:1px;padding:0px 6px;background-position:bottom;background-color:#eee;text-decoration:none;color:#000;}
a.pagination{border:1px solid #ccc;margin-right:1px;padding:0px 6px;text-decoration:none;font-size:11px;color:#000;}
a:hover.pagination{border:1px solid #ccc;background-image:none;background-color:#eee;font-size:11px;color:#000;}
.block.warning{padding:0.2em;padding-left:4em;background-position:.3em .3em;background-image:url(images/warning.png);background-repeat:no-repeat;background-color:#F0DEDE;border:2px solid rgb(204, 0, 0);min-height:34px;}
.block.info{padding:0.2em;padding-left:4em;background-position:.3em .3em;background-image:url(images/information.png);background-repeat:no-repeat;background-color:rgb(215, 220, 233);border:2px solid rgb(123, 159, 223);min-height:34px;vertical-align:middle;white-space:normal;}
.block.error{padding:0.2em;padding-left:4em;background-position:.3em .3em;background-image:url(images/error.png);background-repeat:no-repeat;background-color:#FFCFCF;border:2px solid rgb(204, 0, 0);min-height:34px;}


---

Alle Angaben in dieser Datei stellen die Default Klassen des Content Management Systems dar und müssen in allen Themes angegeben seinWie kann ich spezielle Themes mit anderen CSS Styles verwenden?

in der theme.php fügt man vor den Funktionen einfach nur seine eigenen CSS-Dateien ein und kann die angegeben CSS-Klassen in den Anzeigefunktionen und layout.html.php verwenden

$tpl->more_css(URL zur CSS Datei); // Eine Datei einbinden
$tpl->more_css(array(URL zur 1. CSS Datei,URL zur 2. CSS Datei,.....)) //mehrere Dateien einbinden
$tpl->more_css('<style type="text/css">....</style>','text'); // als Textvariante einbinden

Ähnlich lassen sich auch für das Theme benötigte JavaScripte/jQuery Scripte einbinden
$tpl->more_javascript(...) lautete dann das Template Obkjekt

Hat man den Wunsch eigene Templates für das Theme zu nutzen, dann erstellt man im Themeverzeichnis ein Unterverzeichnis templates/ und fügt hier die abgeänderten Templatedateien ein. Es müssen nicht alle Dateien übernommen werden, da das COMBRIX CMS so aufgebaut ist, dass es die fehlenden Dateien aus dem default Verzeichnis holt.


Mit diesen Möglichkeiten sollte dem Erstellen von eigenen Themes nichts mehr im Weg stehenHier noch eine stark vereinfachte layout.html.php, welche für alle Themes funktioniert

<?php
!preg_match("/layout.html.php/i",$_SERVER['PHP_SELF']) or die("Access denied!");
global $settings;
?>
<body>
<script type="text/javascript" src="<?php echo JSCRIPTS;?>wz_tooltip.js"></scrip
<!-- DESIGN BEGINN -->
<?php render_header(SITEBANNER);?>
<?php
if (LEFT_PANEL!="") {
echo LEFT_PANEL_START.LEFT_PANEL.LEFT_PANEL_END;
}
echo CONTENT_START;
if (CENTER_TOP!="") echo CENTER_TOP;
echo CONTENT;
if (CENTER_BOTTOM!="") echo CENTER_BOTTOM;

if (RIGHT_PANEL!="")
echo RIGHT_PANEL_START.RIGHT_PANEL.RIGHT_PANEL_END;
?>
<?php render_footer(); ?>
</body>
<!-- DESIGN ENDE -->