Einbindung von eigenen CSS- und Javascripten in Artisteer- oder Frontpage-Templates

Bei kleineren Internetprojekten soll häufig auf ein CMS verzichtet werden. Neben der grafischen Gestaltung überlässt man auch die Seitenverwaltung den Geschicken von Artisteer & Co. Trotzdem braucht man nicht auf moderne Präsentationstechniken, wie Galerien like Fancybox, auf Basis von Jquery zu verzichten.
Jquery bringt Artisteer bereits mit. Allerdings müssten die eigenen Skripte in jede Seite manuell rein kopiert werden und bei jeder Aktualisierung der Seiten, sind diese manuellen Anpassungen wieder weg.

Glücklicherweise generiert Artisteer aber auch eine CSS- und eine Javaskript-Datei. In diesen kann man für alle Seiten des Projektes beliebige externe Skripte aufrufen.

Für eigene CSS-Dateien ergänzt man die “style.css” um folgenden Eintrag in der ersten Zeile:
@import url(“Pfad-zur-css-Datei”);

Für eigene Javascript-Dateien ergänzt man die “script.js” um folgenden Eintrag in der ersten Zeile:
document.write(‘<script type=”text/javascript” src=”Pfad-zur-js-Datei”></script>’);

Zu beachten ist, daß die “script.js” nach der “jquery.js” aufgerufen wird.

Beispiel der Einbindung von Fancybox in ein Artisteer-Template:

style.css ergänzen um:
@import url(“fancybox_lib/jquery.fancybox-1.3.4.css”);

script.js ergänzen um:
document.write(‘<script type=”text/javascript” src=”fancybox_lib/jquery.mousewheel-3.0.4.pack.js”></script>’);
document.write(‘<script type=”text/javascript” src=”fancybox_lib/jquery.fancybox-1.3.4.pack.js”></script>’);
document.write(‘<script type=”text/javascript” src=”fancybox_lib/jquery.fancybox.image-galerie.js”></script>’);

Die Pfade und Dateinamen sind natürlich entsprechend anzupassen. Die Verweise auf ein vergrößertes Galeriebild werden zum Beispiel um ‘rel=”example_group”‘ ergänzt. Und auch diese Änderungen sind nach einer Aktualisierung und einem Export der Seiten wieder neu einzutragen, aber eben nicht für jede einzelne Seite.

Download komplettes Beispiel: Artisteer-Template mit Fancybox

Veröffentlicht unter Artisteer, Webdesign Getagged mit: , , ,
One comment on “Einbindung von eigenen CSS- und Javascripten in Artisteer- oder Frontpage-Templates
  1. webdesign-nrw sagt:

    Thx für die Beschreibung. Habe das zip-Archive als Basis hergenommen und funktioniert wunderbar. Habe noch bemerkt, daß man die “@import url()” auch gleich über Datei -> Exportieren -> CSS-Optionen mit in die CSS reinschreiben kann. Dann muß nach einem Update nur noch die js-Datei angepasst werden. Wäre super, wenn Artisteer soetwas irgendwann standardmäßig mit einbaut. Jedenfalls sind meine Kunden von der Fancybox begeistert, werde gleich mal die Preise nachverhandeln ;-).

Hinterlasse eine Antwort

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close