[Frage] Unterschiedliche CSS je Menüelement TYPO3-Version: 6.1.7

  • 0 x
    19 Beiträge
    0 Hilfreiche Beiträge
    30. 01. 2014, 16:51

    Hallo Foren-Gemeinde,
    ich möchte gerne für jedes Thema einer Hauptnavigation ein eigenes Farbschema verwenden.
    Ich habe hierzu verschiedene CSS-Files gebaut, die ich in die einzelnen Seiten meines Seitenbaumes
    durch Erweiterungs-Templates einbaue.

    Das klappt auch so wie erwartet.

    Mein Problem ist nun banal: Da ich für jedes Thema der Hauptnavigation immer wieder ein abgewandelte
    Kopie der CSS benutze, muss ich nun bei jeder Änderung des Designs jede einzelne CSS-Datei anfassen
    und ändern - mit dem entsprechenden Fehlerpotionzial.

    Nun meine Frage: Gibt es in Typo3 die Möglichkeit, im Haupttemplate eine CSS-Datei einzubinden, die
    alle wesentlichen Merkmale entält und in den einzelnen Menüthemen nur eine zusätzliche CSS-Datei, die
    nur die Farbangaben enthält anzugeben?
    Die "unteren" CSS-Dateien sollen sich also zu der Haupt-CSS "addieren" (Ich hoffe, Ihr versteht, was ich meine :-) ).

    Vielen Dank für Eure Unterstützung!

    Torsten


  • 1
  • 0 x
    12 Beiträge
    0 Hilfreiche Beiträge
    30. 01. 2014, 18:54

    Es gibt auch die Möglichkeit Seiten ein Layout zuzuweisen dann brauchst Du keine Erweiterungstemplates (Seiteneigenschaften bearbeiten > Erscheinungsbild > Frontend-Layout auswählen) Diese kannst Du dann jeweils mit einer body id versehen. CSS dann entsprechend anpassen. Du kannst natürlich auch entsprechend nur die CSS Dateien laden

    Achtung TSFE : page ohne Leerzeichen vor dem Doppelpunkt

    1. [globalVar=TSFE : page|layout=1]
    2. page {
    3. bodyTag = <body id="colorOne">
    4. }
    5. [global]

    1. [globalVar=TSFE : page|layout=1]
    2. page.includeCSS {
    3. 10 = fileadmin/default/templates/css/colorOne.css
    4. 10.media = screen
    5.  
    6. }
    7. [global]

  • 0 x
    19 Beiträge
    0 Hilfreiche Beiträge
    30. 01. 2014, 19:05

    Danke für Deinen Tipp, das ist aber nicht genau das was ich suche.

    Ich möchte gerne ein "Ober"-CSS, das alle wesentlichen Bestandteile enthält.
    Dann möchte ich je Menüpunkt eine zusätzlich (!) CSS laden, die nur die
    Erweiterungen enthält, die in dem jeweiligen Kontext gelten.

    Deine Variante habe ich bereits am Laufen. Ich möchte aber die zentralen
    Elemente halt nur an einer Stelle ändern müssen.

    Gruß
    Torsten

  • 0 x
    12 Beiträge
    0 Hilfreiche Beiträge
    30. 01. 2014, 20:48

    Ne so richtig versteh ich das Problem noch nicht. Ich würde ein Root-Template anlegen und dort die Conditions setzen

    1. # die "Ober"-CSS
    2. # enthält alle wesentlichen Bestandteile
    3. page.includeCSS {
    4. 10 = fileadmin/default/templates/css/main.css
    5. 10.media = screen
    6. 20 = fileadmin/default/templates/css/print.css
    7. 20.media = print
    8. }
    9.  
    10. # Conditon setzen http://wiki.typo3.org/wiki/index.php?title=De:TSrefConditions
    11. # wenn Seitenlayout 1 des Menüpunkts ausgewählt ist
    12. # lade zusätzlich diese CSS
    13. [globalVar = TSFE : page|layout = 1]
    14. page.includeCSS {
    15. 30 = fileadmin/default/templates/css/extra.css
    16. 30.media = screen
    17. # ...
    18. }
    19. [global]

  • 0 x
    19 Beiträge
    0 Hilfreiche Beiträge
    31. 01. 2014, 09:38

    Hallo somaberlin,
    hier ein Beispiel von dem, was ich meine:

    Haupt-CSS:
    -----------------------
    body {
    background-color: #FFF;
    }
    #id {
    font-size: 12px;
    color: #000;
    }
    #container {
    background-color: #FFF;
    }
    -----------------------

    Jetzt die CSS für die 1. Unterseite:

    -----------------------
    #container {
    background-color: #F00;
    }
    -----------------------

    Und hier die CSS für die 2. Unterseite:

    -----------------------
    #container {
    background-color: #0F0;
    }
    -----------------------

    usw.

    Im Endergebnis soll die Hapt-CSS für alle Seiten und die jeweiligen Unter-CSS ergänzend nur bei den Unterseiten gelten und die ID "container" der Haupt-CSS ersetzen.
    Nun klar?

    Gruß
    Torsten

  • 0 x
    12 Beiträge
    0 Hilfreiche Beiträge
    31. 01. 2014, 10:32

    Hab das nicht getestet, aber wenn eine Seite zwei CSS Dateien enthält, die beide die id #container enthalten dann werden die Anweisungen der letzten CSS ausgeführt.

    1. <link type="text/css" href="fileadmin/tlp/css/main.css" />
    2. <link type="text/css" href="fileadmin/tlp/css/unterseite.css" />
    3. </head>

    möglich wäre dann auch noch für das CSS der 2. Unterseite:

    1. #container {
    2. background-color: #0F0 !important;
    3. }

    Aber vielleicht verstehe ich auch einfach nicht was Du vor hast. Sorry

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2559 Beiträge
    27 Hilfreiche Beiträge
    31. 01. 2014, 14:06

    Oben ist doch schon das Beispiel mit page.includeCSS mit mehreren Dateien. Damit kannst Du doch genau das machen?

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact
    Release Manager TYPO3 Neos 1.1
    Ich habe Probleme mit den PMs hier, also schreibt mir bitte eine Mail oder über Twitter!

  • 0 x
    19 Beiträge
    0 Hilfreiche Beiträge
    31. 01. 2014, 21:55

    Hi All,
    ich habe es mittlerweile herausgefunden.
    In einem Erweiterungs-Template kann ich eine
    weitere CSS einbinden. Tatsächlich werden
    dann ja beide Templates geladen und es werden
    auch beide CSS geladen, die kumulativ genutzt
    werden. Genau das was ich wollte.
    Vielen Dank Euch für den Support
    Gruß
    Torsten

  • Chrissli Chrissli
    Jedi-General
    0 x
    1015 Beiträge
    28 Hilfreiche Beiträge
    03. 02. 2014, 17:42

    Alternativ könnte man das vielleicht auch mit den Seiten-Resourcen sprich dem media-Feld und Slide machen können. Das hätte dann den Vorteil, dass für einzelne Verzweigungen ein vererbbares CSS angegeben werden kann.

    God's in his heaven, all's right with the world

  • 1