Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; COUNT_CLASS has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/functions.php on line 1713

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; sidebar_generator has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/plugins/multiple_sidebars.php on line 29

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_video_widgets has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/video.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_soundcloud has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/soundcloud.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_counter_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/social-counter.php on line 9

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_news_in_pic has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/new-in-pic.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Flickr_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/flickr.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_fb_likebox has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/fb.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_google_follow has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/google-follow.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_popular has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/popular-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_recent_posts has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/recent-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_cate_posts has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/category-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; tabs_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/tabs.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_youtube_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/youtube-subscribe.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_social_links has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/social-links.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_comments_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/comments.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_author_bio has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/bio-author.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_login has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/login.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_search_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/search.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_120_600_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads120.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_125_125_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads125.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_250_250_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads250.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_300_300_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads300.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_tweets_load has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/twittes.php on line 10

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; feedburner_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/newsletter.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_related has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/related.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_slider has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/slider.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_top_rate has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/top-review.php on line 6
…ein TYPO3 Fluid Tutorial – BackendLayout & Bootstrap [002] | D4mations.com
  • Monday , 10 December 2018

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

Code Canyon
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

3d Ocean

Related Posts

10 Comments

  1. Eves Sinister
    November 12, 2018 at 12:06

    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 🙂

  2. Tarik Dedić
    November 12, 2018 at 12:06

    Daniel I got a problem when I download bootstrap I dont have jquery.js. Where did you get that file Jquery.js?

  3. Richard Wolfmayr
    November 12, 2018 at 12:06

    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. Fly Kasual
    November 12, 2018 at 12:06

    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. Torben Gabriel
    November 12, 2018 at 12:06

    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.

  6. actargis
    November 12, 2018 at 12:06

    Ich habe nun das Problem das die variablen in den einzelnen Felern ausgegeben werden auf dem Frontend anstelle des Contents : z.B. {mitte -> f:format.raw() }

  7. Andreas Kurz
    November 12, 2018 at 12:06

    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. Kasimir Poro
    November 12, 2018 at 12:06

    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. Run Da Trap
    November 12, 2018 at 12:06

    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. Dosenbiiir
    November 12, 2018 at 12:06

    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 Comment

You must be logged in to post a comment.