D4mations.com

…ein TYPO3 Fluid Tutorial – BackendLayout & Bootstrap [002]

[ad_1]
https://i.ytimg.com/vi/XBT0GPQXsEc/hqdefault.jpg



Bevor wir mit Bootstrap loslegen, zeige ich Euch noch wie das mit den Backendlayouts funktioniert und wie Ihr diese dann mit Fluid in Euer Layout einbauen könnt.
Im zweiten Abschnitt spielen wir dann die “Installation” des Bootstrap Frameworks durch und bringen das StarterPack zum laufen.

Viel Spaß!

Links:
Twitter Bootstrap: http://www.getbootstrap.com

Original source

d4mer

,
, , , , , , , , , , , , , ,

10 responses to “…ein TYPO3 Fluid Tutorial – BackendLayout & Bootstrap [002]”

  1. Tutorial ist super – vielen Dank.1:1 mit Typo3 – 8.7.9 nachgestellt und …ERROR: Content Element with uid "4" and type "header" has no rendering Definition!"In der Theorie ist der Wechsel von CSS styled contend auf Fluid styled content überhaupt kein Problem. In der Praxis mag sich das etwas anders gestalten. "http://www.itfoo.de/web/wechsel-von-css-styled-content-zu-fluid-styled-content/Dann weiß ich ja Bescheid – typisch Typo3 🙂

  3. Danke für das Tutorial
    Ich habe allerding sein Problem. Bei mir werden die Artikel nicht angezeigt. Wenn ich den Seitenquellentext anzeigen lasse, merke ich, dass die Platzhalter einfach ausgeblenet werden durch eine Leerzeile.

    Ich kann bei Page–>Appearance nicht das richtige Backend Layout reingeben, weil bei mir keine Backend Layouts zur Auswahl stehen, obwohl ich welche gemacht habe.

    Seitenquelltext:
    <title>Home</title>
    <meta name="generator" content="TYPO3 CMS">

    <link rel="stylesheet" type="text/css" href="typo3temp/Assets/b9db200ac9.css?1499090184" media="all">
    <link rel="stylesheet" type="text/css" href="fileadmin/private/styles/style.css?1499090040" media="all">

    </head>
    <body>

    <div id="wrapper">
    <div id="header">

    <img src="fileadmin/_processed_/d/2/csm_organic_chicken_f754838f13.jpg" width="940" height="250" alt="" />

    </div>

    <div id="top_nav">
    <!–mit diesem Viewhelper wird Fluid dazu gezwungen, 1:1 übersetzen und nicht irgend einen shit zu machen–>
    </div>

    <div id="left">

    </div>

    <div id="right">

    </div>

    <div id="center">

    </div>
    <div id="footer">

    </div>
    </div>

    </body>
    </html>

  4. Ich habe hier tatsächlich was dazugelernt. Ich möchte Dir, lieber Daniel, gern was zurückgeben: Wenn Du *.min.css oder auch *.min.js eingebunden hast, musst Du nicht noch *.css bzw *.js einbinden. Das ".min" bedeutet, dass die Datei den gleichen Inhalt hat, allerdings deutlich komprimiert. Das heißt z.B., dass in *.min.css alle Kommentare, unnötigen Semikola und Zeilenumbrüche entfernt wurden.

  5. Moin.
    Wieder mal ein super hilfreiches Tutorial. Danke

    Aber es hat sich glaube ich etwas geändert im layout zum Ausgeben der Variablen. Nach etwas Suchen bin ich auf folgende Schreibweise gestoßen, welche bei mir funktioniert mit Typo3 Version 8.7.1

    <f:format.raw>{oben}</f:format.raw>

    {oben -> f:format.raw} hat bei mir nicht (mehr) geklappt. Ich denke mal es liegt an der Version.

    Update: Ne doch nicht. -> f:format.raw ist scheinbar die inline Variante. Es fehlen aber () nach dem raw.

    {oben -> f:format.raw()} funktioniert bei mir.

  7. Ganz interessant: Nach der Definition des background Layouts steht bei mir nach Korrektur von ein paar Rechtschreibfehlern statt 'oben' 'rechts' und das obwohl oben als auch rechts jeweils nur einmal definiert sind (rechts kommt jetzt zwei Mal vor).
    backend_layout {
    colCount = 3
    rowCount = 3
    rows {
    1 {
    columns {
    1 {
    name = oben
    colspan = 3
    colPos = 3
    }
    usw

  8. Vielleicht ganz interessant zu wissen:
    Die Bootstrapdateien sind fehlerhaft. Wenn man die Files vom Downloadpackage so einfügt, liegt der Content und die h1 Überschrift hinter dem Balken des Menüs. Um das zu beheben muss man die bootstrap.css editieren. In der Datei:
    1.) strg+f (suche): .container
    2.) hier fügt ihr über padding-right: 15px eine Zeile mit text-align:center; ein. Dadurch wird der Container Zentriert.

    Nun muss der Text noch nach unten verschoben werden. Dazu habe ich nach dem .container{} einen weiteren Eintrag für die class .starter-template. Dort muss die Zeile padding-top: 90px; eingefügt werden nun sollte alles passen.

    Für die faulen zum C/P: (denkt dran, der vorhandene container Eintrag muss überschrieben werden, ka welcher greift wenn 2 mit dem selben Namen verfügbar sind):

    .container {
    text-align:center;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }
    .starter-template {
    padding-top: 90px;
    }

  9. Hab soweit alles nachgemacht, aber bei mir werden keine erstellten Artikel angezeigt. Die Platzhalter sind schon mal verschwunden.
    setup.ts

    page = PAGE
    page {

    10 = FLUIDTEMPLATE
    10 {
    file = fileadmin/Private/templates/template.html
    partialRootPath = fileadmin/Private/partials
    layoutRootPath = fileadmin/Private/layouts

    variables {

    oben < style.content.get
    oben.select.where = colPos=3
    links < style.content.get
    links.select.where = colPos=1
    mitte < style.content.get
    mitte.select.where = colPos=0
    rechts < style.content.get
    rechts.select.where = colPos=2
    footer < style.content.get
    footer.select.where = colPos=4

    }

    }
    includeCSS.style = fileadmin/Private/styles/style.css
    }

    layout.html

    <f:layout name="layout"/>

    <div id="wrapper">

    <div id="header">
    <f:render section="header"/>
    </div>

    <div id="top_nav">
    {oben -> f:format.raw()}
    </div>

    <div id="left">
    {links -> f:format.raw()}
    </div>

    <div id="right">
    {rechts -> f:format.raw()}
    </div>

    <div id="center">
    {mitte -> f:format.raw()}
    </div>

    <div id="footer">
    {footer -> f:format.raw()}
    </div>
    </div>

    Woran könnte das liegen?

  10. Schöne Tutorialreihe 🙂 Ich hab jetzt nochmal 2 Fragen. Und zwar zum einen, warum verwenden wir jetzt Fluid? Wo liegen jetzt genau die Vorteile, hätte man das gleiche nicht einfach so wie gewohnt machen können? Also klar z.B. du hast hier die TypoScripts in einzelne Dateien ausgelagert und so müssen wir nicht mehr alles in ein Typoscript schreiben, aber das wäre jaa auch ohne Fluid möglich. Du hast das Template vom Layout getrennt (bin mir immer noch nicht ganz sicher was Template und was Layout ist) aber warum hast du das gemacht? So wie ich das verstanden habe, bietet Fluid einem die Möglichkeit eben genau das zu machen.

    Und 2. wie kann ich mehrere Layouts auf meiner Website haben? So soll z.b. meine Startseite anders aussehen als meine News Seite, sowie auch anders als meine Kontakt Seite. Wo kann ich das implementieren? (So wie ich das verstanden habe ist Fluid dafür ebenfalls gedacht? oder geht das auch ohne Fluid?

    Und ich habe doch noch eine kleine Frage: hat man auch Nachteile, wenn man Fluid verwendet?
    Ich hoffe du kannst mir helfen
    LG Dosenbiiir

Leave a Reply