Antworten auf deine Fragen:
Neues Thema erstellen

Contao - Eigenes Layout einbinden ?

onpoint

Aktives Mitglied

Hallo Community! :)

Ich habe mal angefangen mich mit Contao zu beschäftigen..da ich von statischen Websites auf dynamische wechseln möchte.

Es sind vorwiegend wirklich kleinere Seiten mit denen ich anfange zu arbeiten.

Jetzt meine Frage:

Ist es mit Contao nicht möglich eine eigene, fertig mit css / html geschriebene Website einzubinden, bzw zu importieren?

Ich habe schon viel gesucht..und er nimmt nur dieses "cto" format als theme an...habe auch schon ordentlich gegoogelt..leider finde ich nichts dazu..

Deshalb hoff ich mal auf euch.

Ist es irgendwie möglich mein eigenes Design in Contao einzubinden und so umzuschreiben, dass man die Inhalte über eine Bedienoberfläche bearbeiten kann?

HTML / CSS Kenntnisse sind da, PHP leider noch nicht so.

Lg
 

daddaa

pro-newbie

AW: Contao - Eigenes Layout einbinden ?

Hi, also noch zu Typolight-Zeiten ging das doch erstaunlich einfach.
Hast du das schon gefunden?

Am Anfang ist ein Video verlinkt. Mit den beiden Sachen bin ich sehr gut zurecht gekommen.
 

Samuelll

Aktives Mitglied

AW: Contao - Eigenes Layout einbinden ?

Hallo,

wenn du unbedingt ein komplett eigenes Layout nehmen willst und du nicht auf die Basisvorlage von Contao zurückgreifen willst, kannst du diese Vorlage durchaus in Contao hochladen.
Danach erstellst du in Contao unter Themes ein neues Theme verweist auf die zugehörigen Verzeichnisse, des von dir erstellten Layouts.

Natürlich ist zu beachten, dass du die "Platzhalter" für Contant, Headerdaten, ... von Contao einbindest.

Meine Empfehlung ist, nimm dir die Datei fe_page.tpl und passe diese deinen Bedürfnissen an.

Das ist der leichteste und sicherste Weg und lässt dir trotz allem noch genug Freiheiten.

Ich weis, dass es schwer ist, dies für sich zu verstehen und umzusetzen.
Jedoch hab ich an der gleichen Stelle wie du gestartet und mittlerweile eingesehen, dass es viel sinnvoller ist die fe_page.tpl als Basis zu nemhen.
 
AW: Contao - Eigenes Layout einbinden ?

Einfach das bestehende HTML/CSS Layout zu importieren funktioniert so nicht, das muss dir von vornherein klar sein. Allerdings ist es in Contao sehr einfach dein Layout an das CMS anzupassen. Im Endeffekt musst du eigentlich nur deine CSS an das fe_page.tpl Template anpassen, was selbst ich hinbekommen habe. Die fe_page.tpl musst du in den meisten Fällen nicht mal anfassen, da es schon sehr flexibel aufgebaut ist.

Wenn du Hilfe brauchst, meld dich einfach. Ich hab das Ganze gerade erst hinter mir :)
 

onpoint

Aktives Mitglied

AW: Contao - Eigenes Layout einbinden ?

Einfach das bestehende HTML/CSS Layout zu importieren funktioniert so nicht, das muss dir von vornherein klar sein. Allerdings ist es in Contao sehr einfach dein Layout an das CMS anzupassen. Im Endeffekt musst du eigentlich nur deine CSS an das fe_page.tpl Template anpassen, was selbst ich hinbekommen habe. Die fe_page.tpl musst du in den meisten Fällen nicht mal anfassen, da es schon sehr flexibel aufgebaut ist.

Wenn du Hilfe brauchst, meld dich einfach. Ich hab das Ganze gerade erst hinter mir :)

Dankeschön! :)

Auch den andern danke für die Tipps! Das bringt mich schonmal ein Stück weiter!

Nur finde ich bei meinen Contao Files keine "fe_page.tpl".....benutze die aktuellste Version....ist vielleicht bei der Installation was schiefgelaufen? Er hat mir mal nichts negatives angezeigt..

Lg
 

Samuelll

Aktives Mitglied

AW: Contao - Eigenes Layout einbinden ?

Die Datei findest du unter :

contao-2.9.1\system\modules\frontend\templates

Arbeite schon gut ein Jahr mit Contao/Typolight. Wenn du dich da erstmal reingefuchst hast, wirst du merken wie praktisch dieses CMS ist :)
 
Zuletzt bearbeitet:

onpoint

Aktives Mitglied

AW: Contao - Eigenes Layout einbinden ?

Super! Hab sie gefunden. :D

Also versteh ich das richtig dass ich im Grunde nur meine CSS verändere und sie an der fe_page.tpl quasi anpasse? und EVENTUELL wenn es sein muss an der tpl selbst kleine Änderungen vornehme?

Nur wie geht es im Backend dann weiter? lade ich die veränderte tpl als Template hoch? oder als Theme? Und dieser hänge ich meine neue Css an?
 
AW: Contao - Eigenes Layout einbinden ?

Wenn du Templates wie die fe_page.tpl wirklich anpassen musst/willst, mach das bitte immer updatesicher über den Button Templates, den du in linken Spalte im Backend findest. Dort klickst du dann auf neues Template, suchst dir dein zu veränderndes Template aus und passt es dann an. Nie die eigentlichen Templates selbst anpassen, da diese beim nächsten Update sonst überschrieben werden.

Wenn's dann an's CSS geht, leg ich dir den Firebug an's Herz. Dort siehst du dann genau, wie die Selektoren heißen, die du verändern willst. Eingeben lässt sich CSS dann über Themes->CSS (wobei du natürlich vorher eins anlegen musst). Dort kannst du dir einzelne Stylesheets anlegen oder auch bestehende importieren. Ich hab aber festgestellt, dass es einfacher ist, dass CSS komplett Stück für Stück neu anzulegen, macht die Fehlersuche dann auch leichter.
 

Samuelll

Aktives Mitglied

AW: Contao - Eigenes Layout einbinden ?

Ergänzung :
Da ich gerne meinen eigenen Editor nutze, leg ich diese von hand selbst an und binde sie in dem Theme dann über die "zusätzlichen Headerangaben" ein.

Also, CSS per FTP hochladen und dann über die Headerangaben Contao miteilen wo es liegt.

Dies kannst du in deinem neuen Theme einstellen und den Header der Seite somit um beliebige Inhalte erweitern.

Einzig die Angabe der Spaltenbreite setze ich über das Contao CSS Framework direkt "hardcodiert" im Theme um.
 

onpoint

Aktives Mitglied

AW: Contao - Eigenes Layout einbinden ?

hmmm..ich verstehe nicht wo bei Contao meine tpl mit der css verknüpft.

inder tpl selbst finde ich keinen Eintrag dazu....

außerdem liegt meine tpl halt im "Template" Bereich von Contao...um eine CSS anzulegen, musste ich jedoch erst ein "Theme" anlegen, und dazu dann die CSS erstellen.

Jedoch kann ich bei der Erstellung des "Themes" schonmal im Auswahlfeld für das dazugehörige Template keins auswählen..das Feld ist leer..müsste ich nicht dort quasi meine neue fe_page.tpl auswählen können? oder hab ich grad nen Denkfehler?
 

Samuelll

Aktives Mitglied

AW: Contao - Eigenes Layout einbinden ?

Du must auf jeden Fall ein neues Theme anlegen.

1. Das CSS kannst du komfortabel importieren

ODER wenn du es von Hand ändern willst

über den Klick-Pfand : Backend : Themes - Seitenlayout - "mein Layout" - zusätzliche <head> Tags einfügen.


2. Deine fe_page.tpl Datei fügst in dem Ordner :

templates/meinTemplate/

ein. ("Mein Template" musst du selbst anlegen)

Für eine gute Struktur ist es empfehlenswert unter tl-fines und unter templates jeweils einen ORdner anzulegen, der wie dein Theme heisst.

So vermeidest du, dass du bie mehreren Themes alles im gleichen Verzeichnis hast und was überschreibst.

DEINE Templates werden immer in den template-Ordner ausgelagert.
Nie das Original überschreiben !!!!
 

onpoint

Aktives Mitglied

AW: Contao - Eigenes Layout einbinden ?

Sehr schön! Danke Samuell! Nachdem ich im Template Ordner einen Unterordner erstellt habe, konnte ich ihn bei den Themeneinstellungen auch auswählen.

Ich bin jetzt soweit, dass ich:

- das fe_page.tpl im neuen Unterordner "MeinTemplate" habe.
- Ein neues Theme erstellt habe, mit den Einstellungen:

+ Ordner: Dort habe ich alle Ordner ausgewählt, in denen sich Dateien von meiner Website befinden. Heißt: Hauptordner, "style" (dort befindet sich die css...die ich aber vermutlich sowieso nicht mehr wirklich brauche da ich eine neue erstelle?), und letzendlich der Ordner "Bilder", indem sich alle Bilder für die Homepage befinden.

+ Templates-Ordner: Dort habe ich den Ordner "MeinTemplate" ausgewählt, in der sich die fe_page.tpl befindet.

- Danach hab ich diesem erstellten Theme eine CSS angehangen...habe einfach mal meine importiert und versuche sie zu verändern..wenns garnicht geht schreibe ich schritt für schritt eine neue.


Nur stellen sich bei mir folgende Fragen:

in der fe_page.tpl stehen ID´s, bei denen ich nicht weiß, was er eigentlich von mir will...was soll ich zu diesen Klassen dann in die css schreiben?!

der Codet lautet ja wie folgt:

Code:
<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<?php echo $this->robots; ?>
<?php echo $this->framework; ?>
<?php echo $this->stylesheets; ?>
<?php echo $this->mooScripts; ?>
<?php echo $this->head; ?>
</head>

<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
<div id="wrapper">
<?php if ($this->header): ?>

<div id="header">
<div class="inside">
<?php echo $this->header; ?> 
</div>
</div>
<?php endif; ?>
<?php echo $this->getCustomSections('before'); ?>

<div id="container">
<?php if ($this->left): ?>

<div id="left">
<div class="inside">
<?php echo $this->left; ?> 
</div>
</div>
<?php endif; ?>
<?php if ($this->right): ?>

<div id="right">
<div class="inside">
<?php echo $this->right; ?> 
</div>
</div>
<?php endif; ?>

<div id="main">
<div class="inside">
<?php echo $this->main; ?> 
</div>
<?php echo $this->getCustomSections('main'); ?> 
<div id="clear"></div>
</div>

</div>
<?php echo $this->getCustomSections('after'); ?>
<?php if ($this->footer): ?>

<div id="footer">
<div class="inside">
<?php echo $this->footer; ?> 
</div>
</div>
<?php endif; ?>

<!-- indexer::stop -->
<img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
<!-- indexer::continue -->

</div>
<?php echo $this->mootools; ?>

</body>
</html>

Was verlangt er von mir bei der id="top"? mit den php werten kann ich leider nichts anfangen....die id "header" ist klar..dort binde ich wohl das headerbild meiner seite ein..genauso "main" und "footer"....das sind im grunde die 3 Container die ich eigentlich brauche und in denen ich auch alle Werte eintragen würde...was machen die ganzen andern ?

Sind diese zwingend notwendig?

Hier ist mal die CSS von meiner Website:

Code:
@charset "utf-8";
/* CSS Document */

* {
    
    margin:0;
    padding:0;
    border:0;
}

html {
    background:url(../Bilder/bg.jpg) 0 0 repeat;
}

body {
    
    font:62.5%/1.2em "verdana",arial, sans-serif;
    color:#000000;
    background:url(../Bilder/bg-header.jpg) center 0 no-repeat;
    line-height:15px;
    
    
    
}

.p {
    width:800px;
    margin-left:20px;
    margin-right:20px;
    padding-left: 40px;
}

.clear {
    float:none;
    clear:both;
    
}

.noBorder {
    border:0!important;
    
}

/*--------------------------------*/


div#header {
    width:916px;
    height:286px;
    background:url(../Bilder/bg-header.jpg) no-repeat;
    margin:0 auto;
    position:relative;
}

div#header ul#navi-top {
    position:absolute;
    list-style:none;
    top:217px;
    right:10px;
    font-size:12px;
}

div#header ul#navi-top li {
    float:left;
    padding:0 45px;
    border-right:1px solid #757575;
    line-height:15px;
    text-transform: uppercase;
}

div#header ul#navi-top li a {
    color:#000000;
    text-decoration:none;
}

div#header ul#navi-top li a:hover,
div#header ul#navi-top li.active a {
    text-decoration:none;
    color:#ffffff;
}



div#content {
    width:916px;
    background:url(../Bilder/bg-content.jpg);
    margin:0 auto;
    
}


div#footer {
    width:916px;
    height:46px;
    background:url(../Bilder/bg-footer.jpg) 0 0 no-repeat;
    margin:0 auto;
    position:relative;
}


div#footer ul#navi-top2 {
    position:absolute;
    list-style:none;
    top:20px;
    right:10px;
    font-size:10px;
}

div#footer ul#navi-top2 li {
    float:left;
    padding:0 45px;
    border-right:1px solid #757575;
    line-height:15px;
    text-transform: uppercase;
}

div#footer ul#navi-top2 li a {
    color:#000000;
    text-decoration:none;
}

div#footer ul#navi-top2 li a:hover,
div#footer ul#navi-top2 li.active a {
    text-decoration:none;
    color:#ffffff;
}

Wie man sieht habe ich eigentlich auch nur die container "header", "content" und "footer" und die anderen bauen halt drauf auf.

Lg
 
AW: Contao - Eigenes Layout einbinden ?

Erstell doch erstmal deinen Content, dann siehst du bei der gerenderten Seite genau, was eigentlich benötigt wird und was nicht und vor allem, was aus deinem bestehenden CSS wohin muss.
Im Moment wirkt deine Vorgehensweise etwas durcheinander und ganz ehrlich würde ich dir empfehlen, in ein Contao Buch zu investieren, um das Ganze ordentlich zu lernen, da man auch viel falsch machen kann....
 

Samuelll

Aktives Mitglied

AW: Contao - Eigenes Layout einbinden ?

Das Contao-Framework bietet dir jede Menge Möglichkeiten, die auch über das hinaus gehen, dass gerade du in diesem Moment vielleicht brauchst.

Hierzu zählt auch das Vergeben einer ID für den Body und dergleichen mehr.

Da du doch an sehr vielen Funktionen und Punkten hakst, solltest dudir vielleicht erstmal eine fertige Beispielseite installieren, schaue wie Contao so funktioniert und was es alles kann.
Dann nimmst du erstmal nur das eigentliche Theme und passt es an und lernst damit weiter.
Spätestens hier wirst du sicher schon merken, dass du die fe_page.tpl eigentlich garnicht ändern musst und du mit sicherheit kein komplett eigenes Template (fe_page) neu schreiben musst.

Ebenfalsl schliesse ich mich dem Rat an, dass du dir unbedingt mal ein Buch kaufen solltest.

Folgende habe ich, die mir sehr geholfen haben :

1. "Das offizielle Contao-Handbuch" (noch nicht veröffentlicht)
Hier habe ich die den vorgänger als Typolight-Version
2. "Mit Contao Webseiten erfolgreich gestalten"

Alternativ ist auch das Video von Video2Brain zum Thema Typolight/Contao sehr gut.
 
AW: Contao - Eigenes Layout einbinden ?

Ebenfalsl schliesse ich mich dem Rat an, dass du dir unbedingt mal ein Buch kaufen solltest.

Folgende habe ich, die mir sehr geholfen haben :

1. "Das offizielle Contao-Handbuch" (noch nicht veröffentlicht)
Hier habe ich die den vorgänger als Typolight-Version
2. "Mit Contao Webseiten erfolgreich gestalten"

Alternativ ist auch das Video von Video2Brain zum Thema Typolight/Contao sehr gut.

Die Buchtipps sind gut, wobei mir da Contao: Das umfassende Praxisbuch () noch besser gefällt.
Das Video2Brain Training fand ich zwar für den Anfang ganz gut, aber mir haben da doch noch einige wichtige Sachen gefehlt, da ging das Buch doch besser darauf ein. Für den Anfang, vor allem als visuelle Hilfe zum Zurechtfinden aber super. (meine Erfahrungen habe ich noch mit dem nicht mehr ganz aktuellen Typolight Training gemacht).
 

Samuelll

Aktives Mitglied

AW: Contao - Eigenes Layout einbinden ?

Bücher sind wie immer Geschmackssache.

Soweit ich weis unterschieden sich die Bücher

Mit Contao Webseiten erfolgreich gestalten

und

r

primär darin, dass im ersten ein neuer Aufbau von Anfang an erklärt wird und im Zweiten von Fr. Merz ein fertiges Template editiert wird.
So habe ich es zumindest vor wenigen Tagen erst in einem Contao-Podcast gehört.

Die Grundlagen erklären sie also beide ausführlich. Nur der Ansatz ist ein anderer.

Bleibt also nur, Probekapitel lesen und schauen welche Art zu schreiben dir mehr liegt.
 

onpoint

Aktives Mitglied

AW: Contao - Eigenes Layout einbinden ?

Ich werd mir erstmal die Video to Brain DVD besorgen...da ich was das Lernen angeht von Büchern ziemlich abgeneigt bin :D Ich kann viel besser lernen, wenn ich live sehe, was da gerade gemacht wird!

Mal sehen was die DVD so taugt :)

Lg
 
J

jupiterjones

Guest

AW: Contao - Eigenes Layout einbinden ?

Die Buchtipps sind gut, wobei mir da Contao: Das umfassende Praxisbuch () noch besser gefällt.
Das Video2Brain Training fand ich zwar für den Anfang ganz gut, aber mir haben da doch noch einige wichtige Sachen gefehlt, da ging das Buch doch besser darauf ein. Für den Anfang, vor allem als visuelle Hilfe zum Zurechtfinden aber super. (meine Erfahrungen habe ich noch mit dem nicht mehr ganz aktuellen Typolight Training gemacht).

Hallo hätte da eine allgemeine Frage bezüglich der Thematik,

Ich habe auch gesagt bekommen, das Hauseigene Typolight oder Contao Template zu benutzen und es anzupassen (also auch das CSS).
Wie geht man vor, um nun ein kreatives und individuelles (also nicht von der Stange) Styling per CSS hinzubekommen? Der Friseur nimmt Gel und Haarspray - wie ist es aber mit CMS Usern? Welcher Werkzeuge bedient man sich denn da so im Allgemeinen? Ist es üblich, dass man CSS Styles mit einer entsprechenden Applikation (sei es Macromedia Dreamweaver) etwa entwirft und die entsprechenden CSS Quellcodes dann in Contao einbindet? Oder kann man sich "schöne" CSS Code Fragmente etwa im Web runterladen? oder einfach, wie macht Ihr das?
 

LaFaSiLuc

pauschalschuldig

AW: Contao - Eigenes Layout einbinden ?

@jupiter
Contao bietet doch im backend eine supereinfache Möglichkeit, Farben, Bilder, etc. flott zu ändern. Mit einem Knopfdruck änderst du da auch das Spaltenlayout, etc.
Schau doch mal auf deren website, da gibt es haufenweise Anregungen und Anleitungen.
CSS Code Schnipsel bringen dich nicht wirklich weiter, sind sie doch (wenn man nicht dreist klaut) selten zu 100% das, was du willst.


PS: Der Thread ist ja Asbach Uralt, du müsstest auch nach aktuelleren Büchern schauen :)
 
J

jupiterjones

Guest

AW: Contao - Eigenes Layout einbinden ?

Jo danke zunächst. Werde mir Buecher wohl holen.

Ja, man kann das über CSS style sheet Anpassung machen. Also Stichwort Stylesheets: Da wäre nämlich meine Frage, Wie geht man vor, um nun ein kreatives und individuelles (also nicht von der Stange) Styling per CSS hinzubekommen? Der Friseur nimmt Gel und Haarspray - wie ist es aber mit CMS Usern? Welcher Werkzeuge bedient man sich denn da so im Allgemeinen? Ist es üblich, dass man CSS Styles mit einer entsprechenden Applikation (sei es Macromedia Dreamweaver) etwa entwirft und die entsprechenden CSS Quellcodes dann in Contao einbindet? oder einfach, wie macht Ihr das?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben