Eigene Templates mit CSS erstellen und einbinden.

serpentino · 13. Februar 2012 13:59

Hallo Zusammen,

ich nutze CMSMS 1.10 und habe schon mehrere Webseiten erstellt z.B rundflugzentrale.de icaruss.de . HTML und auch das Einbinden von externen Inhalten sind mir kein Fremdwort, wobei ich selbt kein HTML programmiere. Ich nutze als Werkzeug Xpage Pro was die Programmierung sozusagen übernimmt. Die Erstellung des Stylesheet sowie der Skripte werden von der Software selbständig übernommen. In der Regel weiß ich aber schon wo Änderungen vorgenommen werden müssen sofern sie nötig sind.

Zu meinen (mehr oder weniger) konkreten Fragen:

1. Worin besteht der grundlegende Unterschied zwischen dem Erstellen einer Webseite ohne das Ziel diese CMS-tauglich zu machen und dem Erstellen einer Webseite mit dem konkreten Ziel sie als Template mit Stylesheet ins CMSMS einzubinden?

2. Kann ich eine bereits erstellte Webseite inkl. dem vorhandenen CSS in CMS einbinden? (vermutlich nicht ohne unverhältnismäßig hohen Aufwand)

3. Wenn 2 nein, worauf muss ich achten wenn ich ein Template mit CSS erstellen will?
Soll nur die index.html erstellt werden und diese dann ins CMS als Template eingefügt und mit dem CSS verknüpft werden? Wird z.B. das Navigationsmenü in der index.html eingefügt oder muss der Menümanager dafür verwendet werden

4. Wie sieht es aus, wenn ich folgende Ordnerstrukturen habe
(-) Webseite (Index.html, Seite1.html, Seite2.html, etc)
-> CSS (Ordner eben mit den Stylesheets)
-> Images
-> Scripts (z.B. Lightbox)

Ich habe schon einige Posts (auch englischsprachige) gelesen, aber diese Fragen konnte mir konkret kein Thread beantworten. Auch über gute Links in eurem Portfolio würde ich mich freuen.

Danke
Patrick

nockenfell · 13. Februar 2012 15:01

1. Für mich besteht da kein Unterschied. Ich habe bisher bis auf Details (z.B. News-Divs) noch nie Rücksicht auf CMSMS genommen. Einzig habe ich z.T. die Struktur von Modulen übernommen, da dies ein wenig schneller von der Hand ging. Dies muss aber nicht sein, da man über die Templates alles so definieren kann wie man will / muss.

2. Klar. Der Aufwand dazu ist nicht viel höher wie bei einem für CMSMS entwickelten Stylesheet. Es kommt einzig darauf an wie viele "Spezialitäten" du drin hast. Mit Spezialitäten meine ich Modultemplates.

3. Ich erstelle in der Regel einfach eine index.html und dazu eine Stylesheet Datei. Die Navigation kannst du unabhängig vom MenüManager aufbauen. Im MenüManager musst du einzig die Stylesheets korrekt einfügen, so wie du diese definiert hast. Dazu kannst du ein bestehendes Template kopieren und im neu erstellen Template deine ids und classes definieren.

4. Das ist kein Problem. Stylesheets musst du bei CMSMS Übrigens nicht unbedingt mit {cms_stylesheets} über die DB laden sondern kannst diese auch ganz herkömmlich als normale Datei einfügen. Bilder und Scripts kannst du ganz normal einbinden. Bei Bildern musst du einzig beachten, dass Bilder welche du im Inhalt einfügst und im Editor auswählen willst, müssen im Ordner ./uploads/images liegen.

NaN · 13. Februar 2012 15:23

Hallo Patrick.
Willkommen im Forum.

Nockenfell hat's eigentlich kurz und knapp auf den Punkt gebracht. Aber ich habe gerade so viel geschrieben, dass ich es nicht einfach löschen will big_smile

Zu 1.:
Der Unterschied besteht darin, dass man eine Webseite für ein CMS nicht in Gänze komplett erstellen kann. Es steht nunmal nicht alles in einer einzigen Datei drin. Man erstellt nicht ein einziges HTML Gerüst und das war's. Vielmehr erstellt man viele kleine einzelne Templates, die dann im Haupttemplate zusammengesetzt werden.

D.h. alles was dynamisch ist, darf logischerweise nicht so im Template stehen. An dieser Stelle müssen dann "Platzhalter" (die Smarty-Tags) eingesetzt werden, die dann die entpsrechenden Inhalte holen und an dieser Stelle (ggfs. mit Hilfe eines eigenem "Sub-Templates") ausgeben.

Du musst Dir das einfach so vorstellen: Das was Du anzeigen willst, existiert in dieser Form nicht. Vielmehr existiert ein Schema nach dem das Ganze erst zur Laufzeit zusammengesetzt wird.

Das klingt jetzt vielleicht verwirrden oder wahnsinnig kompliziert, ist es aber nicht. Das Haupttemplate ist im Prinzip nichts weiter als eine HTML Seite die allerdings nur das Grundgerüst, den groben Aufbau der Seite, definiert. D.h. <head>, <body>, linke Spalte, rechte Spalte, CSS, Javascript etc. kommt dort rein.

Stylesheets können auch über das CMS verwaltet werden, müssen sie aber nicht. D.h. Du kannst sie genauso in das Template einfügen wie in jede andere Webseite auch.

Zu 2.:
Wenn man 1. grob verstanden hat, dann sollte das kein Problem sein. Wichtig ist, dass man sich mit der verwendeten Technik auseinandersetzt. Allem voran Smarty. Ohne Smarty grob verstanden zu haben, wirst Du nicht weit kommen.

Zu 3.:
Achte darauf, dass Du Punkt 1 und 2 verstanden hast wink
Im Prinzip habe ich es bei 1. schon kurz angedeutet: Du fügst den Inhalt der index.html als Template ins CMS ein. Alles was dynamisch ist, kommt dort raus. D.h. auch das Menü. Denn es wird automatisch aus den Seiten generiert, die Du erstellst. Du lässt also nur den Bereich im Template, wo dann das Menü stehen soll. In diesen Bereich kommt dann einfach {menu} (der MenuManager).

Es ist recht aufwendig, im MenuManager ein eigenes Menü-Template zu erstellen bzw. muss man da Smarty nicht nur grob, sondern schon ganz gut verstanden haben. D.h. es wäre einfacher, die Menü-Stylesheets an das Menü-Template anzupassen und nicht umgekehrt. Die Templates des Menü-Managers decken eigentlich schon so ziemlich alles ab, was man braucht. Der Knackpunkt sind die Styles.

Außerdem musst Du darauf, achten, dass, wenn Du die Stylesheets über das CMS verwaltest, diese mit dem Plugin {cms_stylesheet} eingebunden werden müssen (einfach im <head> an die Stelle wo sie sonst auch wären). Das Plugin lädt die Styles aber aus einem Zwischenspeicher. D.h. Bilder im CSS können nicht relativ zum Stammverzeichnis verlinkt werden. D.h. Anweisungen wie z.B.

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('css/background-image.jpg');

werden nicht funktionieren. Genaueres dazu gibt es hier. Zur Ordnerstruktur siehe nächsten Punkt.

Zu 4.:
Die Ordnerstruktur kannst Du im Prinzip so beibehalten. Nur die Seiten kannst Du vergessen. Wenn die sich im Aufbau nicht unterscheiden, legst Du für alle Seiten ein Template an. Ansonsten müsstest Du mehrere Templates anlegen und jeweils den Seiten zuordnen.

Bei CMSms gibt es einen "Uploads-Ordner". Dort kannst Du alles reinpacken was Du willst. Ich empfehle folgende Struktur:

Hier klicken, um den Code zum Kopieren zu markieren

uploads
	|--- layout (alles was zum Layout gehört)
	|	|
	|	|--- css (im Prinzip nicht nötig, wenn die Styles über das CMS verwaltet werden)
	|	|--- js (alle Javascripte)
	|	|--- img (alle Bilder für's Layout)
	|
	|--- images (Bilder, die im Inhalt eingefügt werden sollen)
	|--- weitere Medien etc. ...

D.h. Stylesheet werden entweder so verlinkt:

Hier klicken, um den Code zum Kopieren zu markieren

<link rel="stylesheet" type="text/css" href="{root_url}/uploads/layout/css/style.css" />

oder so:

Hier klicken, um den Code zum Kopieren zu markieren

<link rel="stylesheet" type="text/css" href="{uploads_url}/layout/css/style.css" />

oder einfach so:

Hier klicken, um den Code zum Kopieren zu markieren

{cms_stylesheet}

Bei Letzterem aber im Stylesheet auf die URLs zu den Hintergrundgrafiken achten.
Bsp.:

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[uploads_url]]/layout/img/background-image.jpg');

Analog dazu dann auch die Javascripte. Oder Bilder, die direkt im Template stehen sollen.

Weitere Infos gibt es z.B. hier:
http://wiki.cmsmadesimple.org/index.php … esigner/de
http://wiki.cmsmadesimple.org/index.php … _Tutorials (Video Nr. 3)

faglork · 13. Februar 2012 15:54

NaN schrieb:

Hier klicken, um den Code zum Kopieren zu markieren

uploads
	|--- layout (alles was zum Layout gehört)
	|	|
	|	|--- css (im Prinzip nicht nötig, wenn die Styles über das CMS verwaltet werden)
	|	|--- js (alle Javascripte)
	|	|--- img (alle Bilder für's Layout)
	|
	|--- images (Bilder, die im Inhalt eingefügt werden sollen)
	|--- weitere Medien etc. ...

Ich würde die Layout-Sachen evtl. ausserhalb des UPLOADS-Verzeichnisses einstellen. Wenn der Kunde am Design nicht rumfummeln soll, sollte man ihm auch nicht die Gelegenheit dazu geben ...

Servus,
Alex

NaN · 13. Februar 2012 16:13

Stimmt, aber wenn ich mal etwas am Layout ändern will, dann will ich das manchmal auch über das Backend tun können. Ich habe die FTP Zugangsdaten nicht immer sofort zur Hand wink

nockenfell · 13. Februar 2012 16:54

NaN schrieb:

Stimmt, aber wenn ich mal etwas am Layout ändern will, dann will ich das manchmal auch über das Backend tun können. Ich habe die FTP Zugangsdaten nicht immer sofort zur Hand

Dafür kannst du im FileManager in den Optionen die Checkbox "Erweiterten Modus aktivieren?" setzen. Dann siehst du nicht nur die Dateien im ./uploads sondern auch die Dateien im Root der Installation. Damit kannst du z.B. auch Dateien verwalten welche im Ordner ./template liegen.

NaN · 13. Februar 2012 17:36

Ich möchte aber die Uploads-URL für Styles oder Bilder verwenden. Die läuft nämlich bei mir meist über eine Subdomain (z.B. static.domain.tld/uploads/layout/css/style.css). Rein theoretisch könnte ich die Subdomain auch ins Root-Verzeichnis Uploads-Verzeichnis legen, aber aus irgendeinem Grund hatte ich da manchmal irgendwelche Probleme. Ich glaube es war irgendein Modul oder Plugin welches Bilder prinzipiell in einem Verzeichnis namens $config['uploads_path'] . 'uploads/images' gesucht hat.

Egal, kann jeder machen wie er denkt smile

nockenfell · 13. Februar 2012 19:48

Um doppelten Inhalt zu verhindern müsste es eher static.domain.tld/layout heissen (direkt in den Uploads Ordner).

Ich habe bei mir alle Template Daten im Ordner ./template. Die Daten welche durch Module angelegt oder genutzt werden sind im Ordner ./uploads untergebracht. Aber wie du sagst: Jeder hat da seine eigene Vorliebe.

NaN · 13. Februar 2012 19:57

nockenfell schrieb:

Um doppelten Inhalt zu verhindern müsste es eher static.domain.tld/layout heissen (direkt in den Uploads Ordner).

Meinte ich doch ops
Also umgekehrt war das Problem. Wenn ich die Subdomain in den Uploads-Ordner lege, dann habe ich manchmal Probleme mit einigen Modulen/Plugins, die sich nicht nach den $config Variablen richten.

Aber ich kann doch auch einen 404er zurückgeben, wenn die Seite über die Subdomain ohne Uploads-Ordner aufgerufen wird.

serpentino · 13. Februar 2012 21:10

Hi Zusammen!

Ich danke Euch für die Infos!! Sie klingen grundsätzlich erstmal ganz nachvollziehbar. Die muss ich jetzt aber erstmal mal verarbeiten bzw umsetzen. Ich vermute aber, dass ich bei dem ein oder anderen Problem ein wenig zu knabbern haben werde. Wenn ich irgendwo hänge werd ich wohl wieder die ein oder andere Frage stellen müssen...

Danke nochmal für die ganzen Infos!

nockenfell · 13. Februar 2012 21:53

Zum Fragen ist das Forum da. Nur zu.

Andynium · 14. Februar 2012 22:28

Evtl. hilft dir auch dies noch ein Stückchen weiter

http://www.cmsmadesimple.de/forum/viewtopic.php?id=1864

Forum für CMS/made simple

#1 13. Februar 2012 13:59

Eigene Templates mit CSS erstellen und einbinden.

#2 13. Februar 2012 15:01

Re: Eigene Templates mit CSS erstellen und einbinden.

#3 13. Februar 2012 15:23

Re: Eigene Templates mit CSS erstellen und einbinden.

#4 13. Februar 2012 15:54

Re: Eigene Templates mit CSS erstellen und einbinden.

#5 13. Februar 2012 16:13

Re: Eigene Templates mit CSS erstellen und einbinden.

#6 13. Februar 2012 16:54

Re: Eigene Templates mit CSS erstellen und einbinden.

#7 13. Februar 2012 17:36

Re: Eigene Templates mit CSS erstellen und einbinden.

#8 13. Februar 2012 19:48

Re: Eigene Templates mit CSS erstellen und einbinden.

#9 13. Februar 2012 19:57

Re: Eigene Templates mit CSS erstellen und einbinden.

#10 13. Februar 2012 21:10

Re: Eigene Templates mit CSS erstellen und einbinden.

#11 13. Februar 2012 21:53

Re: Eigene Templates mit CSS erstellen und einbinden.

#12 14. Februar 2012 22:28

Re: Eigene Templates mit CSS erstellen und einbinden.

Fußzeile des Forums