[Frage] .Mit eigener CSS .less-Dateien in Theme bootstrap_mosaic überschreiben TYPO3-Version: 6.2.25

  • knut59 knut59
    R2-D2
    0 x
    78 Beiträge
    0 Hilfreiche Beiträge
    06. 12. 2016, 21:33

    Hallo zusammen,
    ich baue an einer T3-Seite mit Themes bootstrap_mosaic. Da ich mit .less noch keine Erfahrung habe und mir gesagt wurde, das ich die css.less mit einer eigenen CSS-Datei überschreiben kann, möchte ich dies tun.
    Ich habe versucht, eigene CSS einzubauen im Setup des root-templates mit folgender Variante:

    1. // TypoScript Setup
    2. // Einbinden zweier CSS Dateien
    3. page.includeCSS {
    4. file1 = fileadmin/templates/css/cssdatei.css
    5. file2 = fileadmin/templates/css/nocheinecssdatei.css
    6. }

    Das war leider erfolglos.
    Wie kann ich das machen? Ich habe es auch mit Schreiben in die .less-Dateien versucht (wurde mich auch empfohlen), das klappt gar nicht so schlecht. Aber bei manchen Dateien kippt dann das Layout, obwohl ich nur ein Farbe geändert habe (z.B. in der lib.menu.miniNavbar.less).Ich weiß nicht, wo die Farbe durch die Komprimierung dann evtl. noch eingesetzt wurde. Auch kann ich keine zusätzlichen Google-Fonts einsetzen oder welche ändern. Mit (Beispiel)
    1. page.headerData.60 = TEXT
    2. page.headerData.60.value = <link href='http://fonts.googleapis.com/css?family=Irish+Grover' rel='stylesheet' type='text/css'>
    ]
    bekomme ich keinerlei Reaktion. Bin jetzt etwas verzweifelt. Kann mir bitte jemand bei der Lösung des Problems helfen?
    Vielen Dank schon mal!
    Catarina


  • 1
  • Norman2k Norman2k
    Jedi-General
    0 x
    1657 Beiträge
    79 Hilfreiche Beiträge
    07. 12. 2016, 12:24

    1. Guck dir im Firebug den Code und die CSS an und prüfe ob deine CSS drin steht und wann sie geladen wird. Eventuell wird deine CSS zuerst geladen und dann die vom Theme, somit musst du dann mit !important arbeiten.

    2. Wenn du mit less arbeitest und plötzlich ist das Layout total zerhauen, wirst du einen Fehler drin haben, so dass der Parser die CSS nicht erstellen kann, dann fehlt natürlich eine Menge CSS und die Seite sieht zerschossen aus.

    3. Was heißt "keinerlei Reaktion"? Siehst du die CSS von Google im Quelltext? Einbinden alleine reicht natürlich nicht, du musst in deiner CSS dann auch angeben, wo der Font verwendet werden soll, z.B. body {font-family: 'Irish Grover';}

  • knut59 knut59
    R2-D2
    0 x
    78 Beiträge
    0 Hilfreiche Beiträge
    07. 12. 2016, 14:51

    Hallo,
    Danke für deine Antwort!
    Ich habe mir den Code in firebug angesehen. Meine CSS sthet nicht drin und die Google-CSS auch nicht.
    Habe ich das falsch eingebunden?

  • Norman2k Norman2k
    Jedi-General
    0 x
    1657 Beiträge
    79 Hilfreiche Beiträge
    08. 12. 2016, 16:53

    Dein Typoscript ist korrekt. Guck dir dein TS mal im Template Analyzer an ob irgendwelche Fehlermeldungen vorhanden sind

  • knut59 knut59
    R2-D2
    0 x
    78 Beiträge
    0 Hilfreiche Beiträge
    11. 01. 2017, 19:25

    Sorry, dass ich mich erst jetzt wieder melde! War zur Weiterbildung.
    Habe mir mein TS im Analyzer angesehen und Fehler bei Google gefunden. Nach Änderung erscheint das jetzt im firebug, juhu!
    Die CSS-Dateien fehlen allerdings immer noch.
    Folgendes steht jetzt im Analyzer in meinem TS:

    1. [GLOBAL]
    2. page.headerData.60 = TEXT
    3. page.headerData.60.value = <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i" rel=’stylesheet’ type='text/css'>
    4.  
    5. // TypoScript Setup
    6. // Einbinden zweier CSS Dateien
    7. page.includeCSS {
    8. file1 = fileadmin/css/new-color-styles.css
    9. file2 = fileadmin/css/new-ui-elements.css
    10. }

    Das [GLOBAL]am Anfang habe ich nicht eingesetzt, stand da so.

    Findest du da etwas falsch?

    Vielen Dank für deine Hilfe!

    Catarina

  • 1