TYPO3 - überschreiben von styles auf einer einzigen Seite

Gewusst wie: überschreiben einige Stile auf einer bestimmten site?
Ich möchte tun es die css-Datei Weg.

Immer noch keine Lösung unten funktioniert in meinem Fall..

InformationsquelleAutor Sven Koluem | 2011-05-26
  1. 6

    Je nach der Menge von CSS zu übernehmen, können Sie auch einfach fügen Sie die Seiten-ID als Klasse für das <body>, z.B. <body class="uid-456">:

    page.bodyTag >
page.bodyTagCObject = TEXT
page.bodyTagCObject {
    field = uid
    wrap = <body class="uid-|">
}

    Dann im CSS:

    .uid-456 myElement {
    myCustomStyle... /* Applies to page ID = 456 only. */
}

    UPDATE

    Getestet mit Templavoilà. Die folgenden arbeitete (Von der Setup - Feld des Haupt-template):

    page = PAGE
page {
    typeNum = 0

    10 = USER
    10.userFunc = tx_templavoila_pi1->main_page

    bodyTag >
    bodyTagCObject = TEXT
    bodyTagCObject {
        field = uid
        wrap = <body class="uid-|">
    }

    ...
}
    • das war die größte überraschung evert.. das typo3 fügen Sie keine Seiten-ids, die der Körper für Standard. ok, aber auch, das tsconfig Feld die richtigen Plätze für Ihre Codes?
    • Koluem Nein, das gehen wird in der template-Datensatz ("Setup") für die Website, da diese Website-Breite (d.h., die Seiten-ID wird Hinzugefügt, um alle Seiten - Sie können sich bewerben, CSS wenn nötig).
    • klebte es in das tsconfig-Feld -> @ die Seite Optionen. gespeichert -> refresehd es -> sah auf den source-code .. da war keine id Hinzugefügt.
    • +1 beautieful Lösung. @Sven, wenn Sie änderungen im typoscript-cache gelöscht werden muss.
    • sry.. noch kein body id="xyz" set im sourcecode.. ich auch gelöscht, den cache..
    • wo muss ich diese Zeile des codes ..
    • Geben Sie nicht dieses als PageTS in den Eigenschaften der Seite. PageTS ist für die Backend-Konfiguration! Geben Sie diesen code im Template-Setup. Wählen Sie das Template-Modul (aus dem Menü auf der linken Seite) und dann navigieren Sie zu der Seite, wo Sie Sie möchten, fügen Sie diese. Wenn keine Vorlage vorhanden ist, erstellen Sie ein neues extension-template.
    • Genau. Ich würde wahrscheinlich fügen Sie ihn einfach in das Hauptverzeichnis (root) - template; es kann nicht Schaden eine Kennung auf der <body>. @Sven Koluem verwenden Sie Templavoilà? Habe ich noch nicht getestet :-S
    • Koluem Finden Sie unter update. Dies verdeutlicht, wohin mit dem code. Hoffe, Sie bekommen es funktioniert.

    InformationsquelleAutor jensgram
  2. 1

    Verwenden TypoScript hinzufügen von CSS-Regeln (mit Seite.cssInline) oder zusätzliche CSS-Dateien (Seite.includeCSS). Sehen TSref, Kapitel, SEITE.

    InformationsquelleAutor StephenKing
  3. 1

    Empfehle ich Typoscript-Bedingungen hinzufügen/überschreiben der Dateien (css).
    zB.

    page.headerData.10 = TEXT
page.headerData.10.value (

    <link rel="stylesheet" href="fileadmin/js_css/style.css" />
)
#### add css to Page ID 1
[globalVar = TSFE:id = 1]
page.headerData.20 = TEXT
page.headerData.20.value (

    <link rel="stylesheet" href="fileadmin/js_css/mycustomstyle.css" />
)
[end]

    oder eine schmutzige, aber nützliche Art und Weise zu tun, damit im backend ist dieses kleine snippet. Es verwendet die abtract Feld in den Seiteneigenschaften, wo Sie fügen Sie code in Ihre <head>.

    page.headerData.20 = TEXT
page.headerData.20.data = field:abstract
page.headerData.20.wrap =  |
    • Ich habe bearbeitet Sie meine post. Es gab einige Deutsche Rechtschreibung drinnen, sorry. Stellen Sie sicher, dass "Seite.headerData.20" ist von keinem anderen Objekt, sonst wird das original überschrieben wird. Und stellen Sie sicher, dass Sie havent verwendet Sie Ihre abstract-Feld für etwas anderes. Abgesehen davon, dass Sie können mit diesem snippet, aber vergessen Sie nicht, fügen Sie ein <style> - tag in Ihrem abstract-Feld.
    • page.headerData.60 = TEXT page.headerData.60.data = field:abstract page.headerData.60.wrap = <style >*{background-color:black !important;} </style> möglich?
    • zweite Frage swould werden kann, poste ich es direkt in das tsconfig-Feld?
    • Nein. Den <pre>|</pre> ist eine Trennwand für einen wrap. Ohne eine TS-condition, wäre es auf die gesamte Seite. Legen Sie Ihre CSS in das abstract-Feld der Seite Eigenschaften, so dass es wirkt sich nur auf Ihre eigene Seite. @2.Frage: ich habe nie versucht es.
    • ok, ich erkenne die dirty snippet, legt den Stil, das könnte in der abstrakten, auf die Seite .. aber wohin mit dem snippet " - Seite.headerD..."
    • Mit Seite.includeCSS wäre der saubere Weg, im Vergleich zu Seite.headerData.

    InformationsquelleAutor Rito
Schreibe einen Kommentar