wie fang ichs an...

...so, ich bin nun das forum durch und hab mich entschlossen einfach zu fragen, da die passende antwort mir nicht übern weg geclickt kam:

nach dem deutschem tutorial und dem modern template building bin ich nun total verwirrt...

irgendwo im forum hab ich gelesen "...selber gestrickt geht schneller als ein mitgeliefertes template umzubauen", der meinung schliess ich mich nach vielen stunden herumgesteste auch an.

ich möchte also eine völlig neue seite stricken und möcht mir nicht von anfang an einen stein in den weg legen, der mir dann später auf den kopf fällt, aber...

laut der deutschen referenz bastle ich mir nun ein template (designvorlage), setz per hand die marker wie z.b. ###MENU### etc. den dynamischen inhalt spreche ich dann mit marks.blablabla an...

lt. modern template building I kann ich auch den autoparser verwenden - dann funktionierts auf einmal mit subparts.blabla... nach langem selberherumprobieren kann ich beides recht gut, auch eine mischform ist mir gelungen:

einmal ein klickpfadmenü nach modern template building I über autoparser:

subparts.menu_float = HMENU
subparts.menu_float {
special = rootline
special.range = 1|-1
1 = TMENU
1.target = _self
#1.wrap = <font face="Arial" size="1">|</font>
# die zeile mit font.. hab ich ausgeklammert, da das design von externer css gelnkt wird
1.NO.linkWrap = | >
}

und einmal hab ich einfach einen marker der ###TEST### heist gesetz

marks.TEST = HMENU
marks.TEST {
special = rootline
special.range = 0|-1
1 = TMENU
1.target = _self
1.wrap = <font face="Arial" size="1">|</font>
# HIER muss ich aber die eigenschaft des menüs (font,..) per hand definieren, da das externe css nicht eingebunden ist...
1.NO.linkWrap = | >
}

funktionieren tut beides wunderbar, nun stellt sich die frage nach dem WIE FANG ICHS DEN AN?

1. das aussehen der seite (fonts, color,..) würde ich gerne in ein stylesheet auslagern; aber, häng ich das .css an mein .html designvorlage an (wie nach modern template building I), oder ich verzichte auf den autoparser, (gefällt mir nicht so gut, da mit dem parser das menüaussehen schon sehr gut vorbestimmt werden kann) und ich lade die .css mit typoscript nach?

mmmmh total frustriert bin ich noch lange nicht, und der satz aus typo3.org "...People who know TYPO3 well can do it in hours. If you are a total newbee you will need weeks to learn it first." lässt mich noch hoffen, hatt mich auch ein halbes jahr "gekostet" so halbwegs mit c/c++ umgehen zu können (von herumjonglieren keine rede ;-) -

vielleicht nimmt sich wer die zeit und skizziert mir kurz wie ich ein neues projekt angehe -

besten dank im vorraus be_dee

Ich gehe so vor:

Erstens:
Erstellung eines HTML-Templates aus einer Vorlage, die mir ein graphisch begabter Mensch mit Dreamweaver gemacht hat. Dabei zerpflücke ich persönlich das Layout nochmal, sodass ich zwei Dateien bekomme, eine mit dem HTML-Code (standard.tmpl) und eine mit den Styles (styles.css). Meine "zerpflückte" Variante muss natürlich im Browser genauso aussehen wie die Dreamweaver-Variante.

Zweitens:
Dei beiden Dateien lade ich mir ins fileadmin-Verzeichnis und binde sie in mein TypoSkript-Template ein. Hierbei ist es beim Erstellen ganz nett, wenn man im "Include static"-Bereich nicht nur "tt_content" anklickt, sondern auch "cSet stylesheet". Dann sind nämlich alle komischen Formatierungen, die Typo3 sonst meint einbauen zu müssen, plötzlich weg.

Drittens:
Jetzt muss ich natürlich die Marker im HTML-Template einbauen und im Typoskript-Setup belegen, mit Inhalt, mit Menüs, mit News, mit was auch immer. Zum Testen der Menüdarstellung noch schnell ein paar Testseiten angelegt - fertig ist der Prototyp.

Dauert so 2-4 Stunden, je nach Komplexität des Layoutentwurfs.

Viertens:
Die Feinarbeit. Jetzt müssen noch die ganzen Inhaltsmodule überprüft werden, ob sie layoutkonsistenten Inhalt generieren. Vor allem wenn es sich um Erweiterungen handelt wie Forum oder News, muss man noch einige Handarbeit machen, um das Layout anzupassen.

Dauer: hier verschätzt man sich meistens völlig, und zwar immer zu Gunsten des Kunden.

Viel Spass
Stefan Padberg

hi stefan, vorab danke für deine antwort - als newbie ist die fülle an docus zu Typo3 nahezu erschlagend, da bin ich froh mich an irgendeinen leitfaden (wenns der richtige ist ;-) halten zu können -

wenn ich deine vorgehensweise zusammenfassen darf:

- du verzichtest vollständig auf den autoparser (siehe modern template building I)

- du verwendest stylesheets, die du direkt deinem html template anhängst (so quasi klassisch) - das heist bei dir steht im typo3script kein wörtchen mehr von styles.css

- das aussehen des menus sprich font, underline... im active, rollover... tippst du das im typoscript, oder hast du das schon im styless.css festgelegt ...

###### auszug aus mtbuilding I hier ist das "aussehen des menüs" ins .css ausgelagt:
# Menu 1 cObject
temp.menu_1 = HMENU
# First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1 {
# Normal state properties
NO.allWrap = <div class="menu1-level1-no"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level1-act"> | </div>
}

- im "Include static"-bereich finde ich bei mir kein tt_content nur ein "content (default)" meinst du das?

so unterm strich -programmierst- du nach dem "Typo3 - Die deutsche Dokumentation mit Referenz" - http://www.typo3server.com/fileadmin/downloads/dokumentation.pdf ?

ich setzt mich gern hin und lies mir einigige docus noch mal durch, zumal ich sicher einiges übersehen habe, aber welche docu? hat dich/euch irgendwie "auf den rechten weg" (klingt etwas pathetisch) geführt?

beste grüsse an die Typo3 gemeinde

greets be_dee

Hi!

Genau. Ich arbeite im Wesentlichen nach der Anleitung von typo3server.com/Robert Meyer.

Wobei ich die Stylesheets etwas stärker betone. Hierin habe ich mich vor allem von Eric Meyer [http://www.ericmeyeroncss.com] anregen lassen.

Ich versuche es so hinzubekommen, dass ich für das Wrapping der konkreten Content-Elemente keine Style-Klassen mehr vergeben muss.

Das ist jetzt kein Typo3-Thema, aber man kann die Styles kaskadieren, und damit wird der Template-Layout-Entwurf richtig flexibel.

Z.B. folgendes HTML-Template:

<!--###DOKUMENT###-->
<table id="layout"><tr>
<td id="navigation">
###MENU###
</td>
<td id="inhalt">
###INHALT###
</td>
</tr></table>
<!--###DOKUMENT###-->

Da kann ich jetzt die einzelnen Layoutelemente im stylesheet folgendermassen ansprechen:

/*  ein paar Standards für die ganze Seite */
body
    {margin:0;
      font-family:serif;
      font-size:11px;
      color:black;
     }

/*  die Breite der Layout-Tabelle */
table#layout
    {width:750px;}

/*  Layout des Navigationsbereichs */
table#layout td#navigation
    {width:200px;
      background-color:gray;
      color:darkblue;
      font-family:sans-serif;
      font-size:10px;
      font-weight:bold;
    }

/*  Navigationsbereich H1 */
table#layout td#navigation h1
    {color:darkblue;font-size:16px;}

/*  Navigationsbereich P */
table#layout td#navigation p
    {margin:5;}

/*   Navigationsbereich A mit Hover-Effekt */ 
table#layout td#navigation a
    {color:red;text-decoration:none;}
table#layout td#navigation a:hover
    {color:orange;
      text-decoration:none;
      background-color:#e0e0e0;
    }

/*   Hauptbereich */
table#layout td#inhalt
    {width:550px;
      background-color:white;
    }
/*  Hauptbereich H1  */
table#layout td#inhalt h1
    {font-size:20px;text-align:center;}

/*  Hauptbereich H2  */
table#layout td#inhalt h2
    {font-size:16px;text-align:left;}

/*  Hauptbereich P  */
table#layout td#inhalt p
    {margin-left:20px;}

/* usw. */

Der Kaskadierungseffekt bewirkt eben, dass ich <p> und <h1> und <strong> und alle anderen Tags je nach Tabellenfeld völlig anders stylen kann.

Gruß
Stefan

stpadberg schrieb

Ich gehe so vor:

Erstens:
Erstellung eines HTML-Templates aus einer Vorlage, die mir ein graphisch begabter Mensch mit Dreamweaver gemacht hat. Dabei zerpflücke ich persönlich das Layout nochmal, sodass ich zwei Dateien bekomme, eine mit dem HTML-Code (standard.tmpl) und eine mit den Styles (styles.css). Meine "zerpflückte" Variante muss natürlich im Browser genauso aussehen wie die Dreamweaver-Variante.

Zweitens:
Dei beiden Dateien lade ich mir ins fileadmin-Verzeichnis und binde sie in mein TypoSkript-Template ein. Hierbei ist es beim Erstellen ganz nett, wenn man im "Include static"-Bereich nicht nur "tt_content" anklickt, sondern auch "cSet stylesheet". Dann sind nämlich alle komischen Formatierungen, die Typo3 sonst meint einbauen zu müssen, plötzlich weg.

Hi!

Kannst Du zu den beiden Schritten vielleicht eine kleine Step-by-Step Anleitung machen?

Habe mir auch schon ein nettes Layout fertig gemacht und will es nun in meinem Frontend darstellen können. Nur bekomme ich es einfach nicht hin :-(

Bin da echt über jede noch so kleine Hilfe dankbar :-/

Gruß

danke fürs erste
ich kau das deutsch tut noch mal durch
greets be_dee

...ach weiss wer worans liegt wenn alles kracht und mir

Error!

The page is not configured! [type= 0][]

... um die Ohren fliegt?

Hi!

@be_dee:
Das sieht ganz stark danach aus, dass dein root-Template nicht richtig konfiguriert ist. Wenn du auf template klickst, und dann auf die Seite, die das root-Template enthält, und dann auf "configure the whole template record" oder so ähnlich, dann erscheinen alle Konfigurationsmöglichkeiten für das Template.

Suche den Bereich, der mit "Include static" überschrieben ist, und dort musst du auf jeden Fall "tt_content" anklicken. Alles andere braucht man eigentlich nicht. Wer gerne mit CSS arbeitet, kann auch noch "cSet stylesheet" anklicken. Alles andere erstmal löschen.

@entrust:
Wow, eine Step-by-Step-Anleitung ist ein Haufen Holz, zumal es ja mindestens eine gute gibt: die von Robert Meyer auf typo3server.com. (Und es gibt bestimmt noch mehr...)

Ich würde raten, arbeite die mal durch und poste die Schritte, wo es bei dir nicht klappt. So ins Blaue hinein finde ich es schwierig, eine detaillierte Anleitung zu geben, die noch besser sein soll, als das Material, das es schon gibt.

Nicht entmutigen lassen: aller Anfang mit Typo3 ist (manchmal) schwer... 😉

Gruß
Stefan

thanx

ich zitier mal Kasper Skårhøj:
"Most people are overwhelmed by the amount of documentation for TYPO3 - there is simply too much documentation available for a person new to TYPO3."