Hallo Ivo,
vielen Dank für Dein Lob!
gehe in Deinem Gästebuchverzeichnis auf ./design/standart/index_body.tpl - diese Datei kannst Du beliebig umbauen. Ich mache das eigentlich mit allen eingebundenen Scripten so dass ich deren Templates an das des CMS angleiche. Dazu müssen im Header die CSS- und js-Dateien sowie alle verwendeten Grafiken eingebunden werden, dabei benutze ich den kompletten Pfad. Das ist der Code zwischen den head-tags. Alle relativen Pfade sind vom Gästebuch selbst, die lasse ich auch so drin:
<!-- header -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{gaestebuch_titel}</title>
<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW" />
<meta name="language" content="german,deutsch,DE,AT,CH,US" />
<meta http-equiv="content-language" content="de"/>
<meta http-equiv="content-type" content="application/xhtml+xml charset=ISO-8859-1"/>
<link rel="stylesheet" href="http://fotos-unterwegs.de/classes/plugins/ngpluginlightbox/css/" />
<link rel="stylesheet" href="http://fotos-unterwegs.de/classes/plugins/ngplugintypography/css/" />
<link rel="stylesheet" href="./design/{design_ordner}css/styles.css" type="text/css" />
<link rel="stylesheet" href="http://fotos-unterwegs.de/classes/plugins/ngpluginlayout/ngpluginlayoutflex/css/" />
<link rel="stylesheet" href="http://fotos-unterwegs.de/classes/plugins/ngpluginnavigation/ngpluginnavigationsuperdropdown/css/?id=nav" />
<link rel="stylesheet" href="http://fotos-unterwegs.de/classes/plugins/ngpluginnavigation/ngpluginnavigationcommon/css/?id=common" />
<link rel="stylesheet" href="http://fotos-unterwegs.de/classes/plugins/ngpluginparagraph/ngpluginparagraphtext/css/style.css" />
<link rel="stylesheet" href="http://fotos-unterwegs.de/classes/plugins/ngpluginteaser/ngpluginteasercaptionsummarypicture/css/style.css" />
<link rel="stylesheet" href="http://fotos-unterwegs.de/classes/plugins/ngplugintypography/css/raleway.css" />
<script type="text/javascript" src="http://fotos-unterwegs.de/js/jquery.js"></script>
<script type="text/javascript" src="http://fotos-unterwegs.de/classes/plugins/ngpluginlightbox/js/lightbox.js"></script>
<style type="text/css">
<!--
#ngparaw7dec09123529f12d533067341422835 img { border: 1px solid #f0f0f0 }
#ngparaw7dec09123529f12d533067341422835 .teaserhaspicture { margin-left:181px }
-->
</style>
</head>
Damit hast Du schon mal alle Design bildenden Dateien eingebunden (was bei Dir eingebunden werden muss, siehst Du im Quelltext Deines CMS).
Danach musst Du im body-Bereich alles einbinden bis das Gästebuch anfängt - also die Navigation, Logo, etc. Das kannst Du Dir ja einfach aus dem Quelltext Deines CMS kopieren, alle Pfade ergänzen. Der Einfachheit halber kopiere ich das mal komplett hier rein:
<body>
<div id="navouterbox">
<div id="nav">
<ul class="ngpluginnavigationsuperdropdown">
<li class="" ><a href="http://fotos-unterwegs.de/content/naturfotografie/">Naturfotografie</a>
</li>
<li class="" ><a href="http://fotos-unterwegs.de/content/fotoblog/">Fotoblog</a>
<div>
<ul>
<li><a href="http://fotos-unterwegs.de/content/fotoblog/wildschweinfrischlinge/">Schweinchen-Tagebuch</a>
</ul>
<a class="ngsuperdropdownimage" href="http://fotos-unterwegs.de/content/fotoblog/"><img src="http://fotos-unterwegs.de/images/pictures/naturfotos/img_5798-fc.jpg?w=200&r=3" alt="" /></a>
<div class="ngsuperdropdownsummary">
<div class="ngsuperdropdropheadline">Fotoblog</div>
<p>Fotografische Ereignisse und Fotoausrüstung</p>
</div>
<div class="clearfix"></div>
</div>
</li>
<li class="" ><a href="http://fotos-unterwegs.de/content/fotogalerie/">Fotogalerie</a>
</li>
<li class="" ><a href="http://fotos-unterwegs.de/content/fotografie-tipps/">Fotografietipps</a>
<div>
<ul>
<li><a href="http://fotos-unterwegs.de/content/fotografie-tipps/software/">Bildbearbeitungs Software</a>
<li><a href="http://fotos-unterwegs.de/content/fotografie-tipps/bilderklau-verhindern/">Bilderklau verhindern</a>
<li><a href="http://fotos-unterwegs.de/content/fotografie-tipps/urheberrechts-verletzung/">Urheberrechts-Verletzung</a>
<li><a href="http://fotos-unterwegs.de/content/fotografie-tipps/vorbereitung-zum-fotoansitz/">Vorbereitung zum Fotoansitz</a>
<li><a href="http://fotos-unterwegs.de/content/fotografie-tipps/fotoausruestung/">Fotoausrüstung</a>
</ul>
<a class="ngsuperdropdownimage" href="http://fotos-unterwegs.de/content/fotografie-tipps/"><img src="http://fotos-unterwegs.de/images/pictures/naturfotos/huckebeinportrait.jpg?w=200&r=3" alt="" /></a>
<div class="ngsuperdropdownsummary">
<div class="ngsuperdropdropheadline">Fotografietipps</div>
<p>Tutorials und Tipps für Fotografen</p>
</div>
<div class="clearfix"></div>
</div>
</li>
<li class="ar" ><a href="http://fotos-unterwegs.de/content/fotografin/">Fotografin</a>
<div>
<ul>
<li><a href="http://fotos-unterwegs.de/content/fotografin/rutenmuehle/">Location</a>
</ul>
<a class="ngsuperdropdownimage" href="http://fotos-unterwegs.de/content/fotografin/"><img src="http://fotos-unterwegs.de/images/pictures/naturfotos/dackel.jpg?w=200&r=3" alt="" /></a>
<div class="ngsuperdropdownsummary">
<div class="ngsuperdropdropheadline">Fotografin</div>
<p>Lebensumfeld und fotografischer Werdegang</p>
</div>
<div class="clearfix"></div>
</div>
</li>
<li class="ar" ><a href="http://fotos-unterwegs.de/fotografielinks/index.php">Fotoseiten</a>
</li>
<li class="ar" ><a href="http://fotos-unterwegs.de/buch/index.php">Gästebuch</a>
</li>
</ul>
<form action="http://fotos-unterwegs.de/common/special/search.html" >
<input placeholder="Suchen nach …" type="text" name="criteria" />
<button type="submit"></button>
</form>
<div class="clearfix"></div>
</div>
</div>
<div id="eyecatcherouterbox">
<div id="eyecatcher">
<a href="../"><img alt="" src="../../images/pictures/naturfotos/s2dlogo.jpg?w=778" style="border: none; display: block; width:778px;height:200px;" /></a>
</div>
</div>
<div id="containermainouterbox">
<div id="containermain">
<div id="content" style="width:778px">
Dann kommt dieser Teil den Du in Deiner Gästebuch-Template Datei findest, den lässt Du so wie er ist und passt nur die Tabellenbreiten an Dein Layout an.
<h1>{gaestebuch_titel}</h1>
<!-- /header -->
<!-- eintrag -->
<!-- vorschau -->
<table width="778" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="box_titel_a" width="25"></td>
<td class="box_titel_b" align="left" width="130"> </td>
<td class="box_titel_b" align="left">{vorschau_titel} </td>
<td class="box_titel_c" width="25"></td>
</tr>
</table>
<table width="778" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="120" class="beitrag_ersteller" valign="top">
Geschrieben von: {vorschau_name}<br />
am {vorschau_datum}<br />
um {vorschau_zeit}<br />
<!-- beitrag_email --><a href="mailto:{vorschau_email}"><img src="./design/{design_ordner}images/email.gif" border="0" alt="{vorschau_email}"/></a><!-- /beitrag_email --><!-- homepage_email --><a href='{vorschau_homepage}' target='_blank'><img src='./design/{design_ordner}images/homepage.gif' border='0' alt='{vorschau_homepage}'/></a><!-- /homepage_email --><!-- beitrag_icq --><a href="http://www.icq.com/people/about_me.php?uin={vorschau_icq}" target="_blank"><img src="http://status.icq.com/online.gif?icq={vorschau_icq}&img=5" border="0" alt="{vorschau_icq}"/></a><!-- /beitrag_icq --><br />
</td>
<td class="beitrag_text">
{vorschau_beitrag}
</td>
</tr>
</table>
<br />
<!-- /vorschau -->
<form name="eintrag" method="post" action="./index.php?id=beitrag_erstellen">
<table width="778" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="box_titel_a" width="25"></td>
<td class="box_titel_b" align="center">Beitrag Schreiben</td>
<td class="box_titel_c" width="25"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="150" class="erstellen_links">
* Name:
</td>
<td class="erstellen_rechts">
<input type="text" name="name" size="20" maxlength="40" value="{name}"></input>
</td>
</tr>
<tr>
<td width="150" class="erstellen_links">
eMail:
</td>
<td class="erstellen_rechts">
<input type="text" name="email" size="22" value="{email}"></input>
</td>
</tr>
<!-- beitrag_icq_box -->
<tr>
<td width="150" class="erstellen_links">
ICQ:
</td>
<td class="erstellen_rechts">
<input type="text" name="icq" size="11" maxlength="11" value="{icq}"></input>
</td>
</tr>
<!-- /beitrag_icq_box -->
<tr>
<td width="150" class="erstellen_links">
Homepage:
</td>
<td class="erstellen_rechts">
<input type="text" name="homepage" value="{homepage}" size="25"></input>
</td>
</tr>
<!-- beitrag_titel_box -->
<tr>
<td width="150" class="erstellen_links">
Titel:
</td>
<td class="erstellen_rechts">
<input type="text" name="titel" size="30" maxlength="50" value="{titel}"></input>
</td>
</tr>
<!-- /beitrag_titel_box -->
<!-- bbcode_box -->
<tr>
<td width="150" height="5" class="erstellen_links"> </td>
<td class="erstellen_rechts">
<input type="button" name="b" value="B" onclick="javascript:BBcode('[b]', 'Text', '[/b]')"></input>
<input type="button" name="U" value="U" onclick="javascript:BBcode('[u]', 'Text', '[/u]')"></input>
<input type="button" name="i" value="I" onclick="javascript:BBcode('[i]', 'Text', '[/i]')"></input>
<input type="button" name="url" value="URL" onclick="javascript:BBcode('[url]', '', '[/url]')"></input>
<input type="button" name="bild" value="IMG" onclick="javascript:BBcode('[img]', '', '[/img]')"></input>
<input type="button" name="color" value="Farbe" onclick="javascript:BBcode('[color=red]', '', '[/color]')"></input>
<input type="button" name="color" value="Zitat" onclick="javascript:BBcode('[zitat]', '', '[/zitat]')"></input>
<input type="button" name="color" value="Code" onclick="javascript:BBcode('[code]', '', '[/code]')"></input>
</td>
</tr>
<!-- /bbcode_box -->
<tr>
<td width="150" class="erstellen_links">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>* Beitrag:</td>
</tr>
<!-- smilies_box -->
<tr>
<td> </td>
</tr>
<tr>
<td align="right">
{smilies_box}
</td>
</tr>
<!-- /smilies_box -->
<tr>
<td> </td>
</tr>
<tr>
<td>
html [aus]<br />
Smilies [{smilies}]<br />
BBcode [{bbcode}]<br />
</td>
</tr>
</table>
</td>
<td class="erstellen_rechts">
<textarea name="beitrag" rows="12" cols="35">{beitrag}</textarea>
</td>
</tr>
<!-- captcha -->
<tr>
<td width="150" class="erstellen_links">
Bestätigungs-Code: *
</td>
<td class="erstellen_rechts">
<img src="./index.php?captcha=bild" border="0" align="top" alt="Captcha"/> ==> <input type="text" name="code" size="5" maxlength="5" value=""></input>
</td>
</tr>
<!-- /captcha -->
<tr>
<td width="150" class="erstellen_links">
</td>
<td class="erstellen_rechts">
<input type="submit" name="eintragen" value="Eintragen"></input> <input type="submit" name="vorschau" value="Vorschau"></input> <input type="reset" value="Löschen"></input><br />
Mit * markierte Felder sind erforderlich.
</td>
</tr>
<tr>
<td class="box_fuss" colspan="2">
<a href="./index.php">Zurück</a>
</td>
</tr>
</table>
</form>
<!-- /eintrag -->
<!-- index_body -->
<table width="778" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center" colspan="2"><b>[<a href="./index.php?id=beitrag_erstellen">Eintragen</a>]</b></td>
</tr>
<tr>
<td align="left">Einträge im Gästebuch: {counter_beitraege}</td>
<td align="right">Einträge pro Seite: {pro_seite}</td>
</tr>
<tr>
<td align="center" colspan="2">
<table width="778" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="left">[<a href="./index.php?seite=1"><<</a>][<a href="./index.php?seite={seite_zurueck}"><</a>]</td>
<td align="center"><!-- seiten_links --><a href="./index.php?seite={atuelle_seite}">{atuelle_seite}</a><!-- /seiten_links --></td>
<td align="right">[<a href="./index.php?seite={seite_vor}">></a>][<a href="./index.php?seite={seite_ganz_vor}">>></a>]</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<!-- beitrag_body -->
<table width="778" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="box_titel_a" width="25"></td>
<td class="box_titel_b" align="left" width="130"><!-- admin_eingelogt --><!-- beitrag_unsichtbar --><b style="color: red"> Unsichtbar </b><!-- /beitrag_unsichtbar --><!-- beitrag_sichtbar --><b style="color: lime"> Sichtbar </b><!-- /beitrag_sichtbar --><!-- /admin_eingelogt --> </td>
<td class="box_titel_b" align="left">{beitrag_titel} </td>
<td class="box_titel_c" width="25"></td>
</tr>
</table>
<table width="778" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="120" class="beitrag_ersteller">
Geschrieben von: {name}<br />
am {datum}<br />
um {time}<br />
<!-- admin_eingelogt --><!-- beitrag_ip --><a href="http://network-tools.com/default.asp?host={ip}"><img src="./design/{design_ordner}images/ip.gif" border="0" alt="{ip}"/></a><!-- /beitrag_ip --><!-- /admin_eingelogt --><!-- beitrag_email --><a href="mailto:{email}"><img src="./design/{design_ordner}images/email.gif" border="0" alt="{email}"/></a><!-- /beitrag_email --><!-- homepage_email --><a href="{homepage}" target="_blank"><img src="./design/{design_ordner}images/homepage.gif" border="0" alt="{homepage}"/></a><!-- /homepage_email --><!-- beitrag_icq --><a href="http://www.icq.com/people/about_me.php?uin={icq}" target="_blank"><img src="http://status.icq.com/online.gif?icq={icq}&img=5" border="0" alt="{icq}"/></a><!-- /beitrag_icq --><br />
<!-- admin_eingelogt --><br /><!-- beitrag_unsichtbar --><a href="./admin.php?beitrag=sichtbar&id={id}"><img src="./design/{design_ordner}images/auge.gif" border="0" alt="Sichtbar"/></a> <!-- /beitrag_unsichtbar --><!-- beitrag_sichtbar --><a href="./admin.php?beitrag=unsichtbar&id={id}"><img src="./design/{design_ordner}images/auge_2.gif" border="0" alt="Unsichtbar"/></a> <!-- /beitrag_sichtbar --><a href="./admin.php?beitrag=kommentar&id={id}"><img src="./design/{design_ordner}images/kommentar.gif" border="0" alt="Kommentar"/></a> <a href="./admin.php?beitrag=edit&id={id}"><img src="./design/{design_ordner}images/edit.gif" border="0" alt="Edit"/></a> <a href="./admin.php?beitrag=loeschen&id={id}"><img src="./design/{design_ordner}images/loeschen.gif" border="0" alt="Löschen"/></a><!-- /admin_eingelogt -->
</td>
<td class="beitrag_text">
{beitrag}
</td>
</tr>
</table>
<br />
<!-- /beitrag_body -->
<table width="778" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="left">[<a href="./index.php?seite=1"><<</a>][<a href="./index.php?seite={seite_zurueck}"><</a>]</td>
<td align="center"><!-- seiten_links --><a href="./index.php?seite={atuelle_seite}">{atuelle_seite}</a><!-- /seiten_links --></td>
<td align="right">[<a href="./index.php?seite={seite_vor}">></a>][<a href="./index.php?seite={seite_ganz_vor}">>></a>]</td>
</tr>
</table>
<!-- /index_body -->
<!-- box_1 -->
<table width="778" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="box_titel_a" width="25"></td>
<td class="box_titel_b" align="center">{titel}</td>
<td class="box_titel_c" width="25"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="erstellen_rechts">{text}</td>
</tr>
</table>
<!-- /box_1 -->
<!-- footer -->
<br />
<div class="footer_box">
<!-- Dies Copyright darf nicht entfernt oder geändert werden -->Copyright © 2008 by <a href="http://www.matpo.de" target="_blank">MatPo.de</a><!-- Ende Copyright -->
<!-- admin_eingelogt -->(<a href="./admin.php">Adminbereich</a> <a href="./admin.php?logout=true">Logout</a>)
<!-- /admin_eingelogt --><!-- admin_ausgelogt -->(<a href="./admin.php">Login</a>)<!-- /admin_ausgelogt --><br />
Version {version}
Und dann setzt Du den kompletten Footer und was Du sonst noch im Footer haben willst darunter:
</div>
<div class="clearfix"></div>
</div>
</div>
<div id="commonouterbox">
<div id="common">
<p>
<a href="http://fotos-unterwegs.de/common/info/kontakt.html">Kontakt</a>
• <a href="http://fotos-unterwegs.de/common/info/impressum.html">Impressum</a>
• <a href="http://fotos-unterwegs.de/common/info/copyright.html">(C) Copyright</a>
• <a href="http://fotos-unterwegs.de/common/info/datenschutz.html">Datenschutz</a>
</p>
</div>
</div>
</body>
</html>
Du verknüpfst damit das Gästebuch komplett optisch mit dem Design Deines CMS.
Danach musst Du Dir noch die Datei ./design/standart/css/style.css vornehmen und die Farbwerte an Deine Installation anpassen.
Um diese Codeüberarbeitungen vorzunehmen benutze ich Notepad++
.