Um den eigenen Marktplatz optimal an die eigene Website anpassen zu können, bietet Ecato einen umfangreichen Vorlagen-Editor. Hier können Sie auch eigenen HTML-, CSS- und JavaScript-Code angeben. Es folgt eine kurze und schrittweise Einführung zur Anpassung eines Marktplatzes an eine bestehende Website.
Zur Anpassung der Designvorlagen eines Marktplatzes bieten wir sowohl Einsteigern als auch Profis jede Menge Möglichkeiten. Im Kundenbereich findet man in der rechten Navigationspalte unter "Websites" einen Link zu "Marktplatz". Hier können die allgemeinen Einstellungen etc. vorgenommen werden. Über den Link "Vorlage anpassen" gelangt man zu einem ausführlichen Editor.
Dort kann man zunächst die allgemeine Darstellung seines Marktplatzes an die seiner Website anpassen. Geben Sie hier an, ob Ihre Website links, zentriert oder rechts ausgerichtet ist. Auch der Außenabstand und Innenabstand zum Seiteninhalt kann angepasst werden. Besonders wichtig ist die Seitenbereite, die in Pixeln entsprechend der Breite des eigentlichen Inhaltsbereichs Ihrer Website angegeben werde sollte.
Unter dem Punkt "Textstile" definieren Sie etwa die Schriftfarben verschiedener Textteile. Auch geben Sie hier an, ob eine Schriftart mit oder ohne Serifen verwendet werden soll. Die verschiedenen Textstile werden dann bei entsprechenden Textpassagen wie Überschriften, Normaltext oder Fussnoten angewendet.
Der Abschnitt "Seitenkopf" ist besonders wichtig für die Anpassung Ihres Marktplatzes an die gewünschte Website. Hier können Sie freien HTML-Code und ein eigenes externes CSS angeben. Den HTML-Code für den Seitenkopf entnehmen Sie dem Quelltext Ihrer Website. Nutzen Sie dazu die Funktion "Seiten-Quelltext anzeigen" zum Beispiel im Firefox Browser. Hier ein beispielhafter Auszug:
<html>
<head>
<title>Meine Website</title>
</head>
<body>
<div id="header"><a href="/"><img src="logo.jpg" alt="Logo"></a>
Willkommen auf meiner Website</div>
<div id="content">Hier beginnt der Inhalt...
Der fett markierte Teil innerhalb des "Body"-Elements ist ausschlaggebend für die Anpassung. Kopieren Sie diesen bis zum Beginn des eigentlichen Inhalts und fügen ihn in das HTML-Textfeld im Vorlagen-Editor ein. Wichtig ist hierbei noch, dass Sie im Quelltext alle Internetadressangaben ggf. vervollständigen. Sprich im Beispiel oben den Logo-Link um Ihre Internetadresse ergänzen. Gleiches gilt für den Bildpfad des Logos, hier müsste beispielsweise http://www.meineseite.tld/logo.jpg angegeben sein.
Die im Editor nachfolgenden Punkte dienen der Anpassung der Marktplatz-typischen Elemente wie der Suche, den Kategorien und Artikellisten. Danach folgt der für die nahtlose Integration in Ihre Website relevantere Abschnitt "Seitenfuss". Hier kopieren Sie wieder den entsprechenden Abschnitt aus dem Seiten-Quelltext Ihrer Website. Hier wiederum ein Beispiel:
...hier endet der Inhalt.</div>
<div id="footer">Copyright 2008, <a href="impressum.html">Impressum</a></div>
</body>
</html>
Der fettmarkierte Teil müsste also in das HTML-Textfeld für den Seitenfuss im Vorlagen-Editor eingefügt werden. Wie oben ist zu beachten, dass Links mit ihrem absolutem Pfad angegeben werden. Also müsste beim Impressum wieder die Websiteadresse vorangestellt werden, zum Beispiel http://www.meineseite.tld/impressum.html.
Wenn Sie die Anpassungsangaben nun speichern und Ihren Marktplatz aufrufen, sollte dieser vom Seitenkopf und -fuss Ihrer Website umschlossen sein. So passt sich der Marktplatz nahtlos in das Layout Ihrer Website ein.
Sollten Sie noch Fragen oder Probleme bei der Anpassung Ihres Marktplatzes haben, stehen wir immer gern mit Rat und Tat zur Verfügung!
Kommentar vom 12.01.2008 17:19
Vielen Dank für diese detaillierte Beschreibung, so kann auch ich, als PC-Dummie, meinen Marktplatz anpassen.
Liebe Grüße
die Bildungsbloggerin
Kommentar vom 10.07.2009 17:26
Eine alternative und schnellere Lösung zum Ersetzen der relativen Link-Pfade im Quelltext könnte auch der BASE-Tag sein, mit dem automatisch absolute Pfade erzeugt werden können.