Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > Richtiger Umgang mit NOF

Externe CSS-Dateien in NetObjects Fusion einbinden

(1/1)

nettesekel:
Das folgende Tutorial zeigt, wie man exerne oder eigene CSS-Dateien in seine NOF-Website einbinden kann.

Jeder der über die NOF-Grenzen hinnaus geht und das eine oder andere Widget oder externe Galerien etc. in seine Website einbindet, wird früher oder später auch in die Situation kommen, dass eine externe Style-Datei in sein Projekt integrieren muss.

nettesekel:
Zunächst einmal wird diese Style-Datei über die Verwaltenansicht als zusätzliches Asset in das jeweilige Projekt eingebunden. Wie man das anstellt ist in diesem Tutorial genau beschrieben: (zusätzliche Assets in NetObjects Fusion einbinden)

ACHTUNG!!!
Dieser Teil des Tutorials gilt ab einschließlich der Version NOF 10!
Wenn die Datei als Asset in das Projekt integriert wurde, wechselt ihr nun in die Design-Ansicht.





In der Design-Ansicht solltet ihr nun bereits die eingebundene Style-Datei als Bestandteil des aktivierten Site-Styles sehen können.
In meinem Beispiel heißt die Datei "menu.css".





Geht nun mit einem Rechtsklick auf die Datei und wählt mit einem Klick im geöffneten Kontextmenü die Option "CSS-Datei einbinden in..."





Nun öffnet sich ein kleines Fenster in welchem Euch 3 Optionen zur Verfügung stehen. Welche Option ihr auswählt hängt davon ab, auf welchen Seiten eures Projekts die Style-Datei verwendet werden soll.


* Benötigt ihr die Datei auf allen Seiten eures Projekts dann setzt ihr den Punkt bei der ersten Option "site-übergreifend"
* Arbeitet ihr mit verschiedenen Masterrahmen und benötigt die datei nur für einige dieser Masterrhamen, dann wählt ihr Option 2 und legt über den dazu gehörenden Button fest in welchen Masterrahmen die Styledatei verlinkt werden soll.
* Benötigt ihr die Datei nur auf einer oder einigen einzelnen Seiten, dann wählt ihr Option 3 und legt über den Button wiederum fest in welche Seiten die VErlinkung eingetragen werden soll.




Damit ist die Datei auch schon eingebunden und NOF generiert die Verlinkung zur Datei künftig automatisch in den QT der gewünschten Seiten.

nettesekel:
ACHTUNG!!!
Dieser Teil des Tutorials gilt bis einschließlich der Version NOF 9!
Bis hin zur Version 9 kann man die Verlinkung der eingebundenen Style-Datei leider nicht automatisieren, sondern muss diese von Hand zwischen den Head-Tags der gewünschten Seiten platzieren.

Diese Verlinkung sieht dann in etwa(*) so aus:


--- Code: HTML5 ---<link rel="stylesheet" type="text/css" href="./html/menu">
(*) in etwa deshalb, weil ihr den Pfad (href="./html/menu") zu der Style-Datei in der Verlinkung anpassen müsst.


Wie ihr diesen Code zwischen den Headtags eurer Seite platzieren könnt, ist in diesem Tutorial beschrieben: Code zwischen den Head-Tags einfügen

Navigation

[0] Themen-Index