Wie kann ich eine in WordPress erstellte CSS- Regel verändern?

  • tipokrat

    (@tipokrat)


    vor 9 Jahren, 7 Monaten

    Hallo,
    so erstelle ich eine CSS- Regel in WordPress: Erst gehe ich auf Design–Menü. Dann klicke ich oben rechts auf „Ansicht anpassen“. Dann klicke ich unter „Erweiterte Menüeigenschaften anzeigen“ auf die Checkbox CSS-Klassen. Als nächstes gehe zu Design–Menüs–Menüstruktur. Im nächsten Schritt gehe ich zu Startseite und klicke rechts bei Startseite auf das kleine Dreieck neben Seite. Dann öffnet sich ein Fenster. Oben ist ein Formularfeld zu sehen, bei dem darüber die Beschriftung „Angezeigter Name“ zu sehen ist. Im Feld selber ist das Wort Startseite zu sehen. Im unteren Feld habe ich die Möglichkeit, eine CSS- Klasse zu definieren. Nun meine Frage: Wie kann ich diese CSS-Klasse verändern? Wo in der style.css Datei/ bzw. in welcher Zeile finde ich die neu definierte Eigenschaft, so dass ich diese mit dem HTML-Editor verändern kann?
    Ich verwende Windows7.

Ansicht von 3 Antworten – 1 bis 3 (von insgesamt 3)
  • Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 9 Jahren, 7 Monaten

    Nehmen wir an, du legst ein Navigations-Element in deiner Menüstruktur an und gibst diesem Element die Klasse „rot“ weil du gerne diesen Menüeintrag in roter Schrift anzeigen möchtest.

    Anschließend gehst du in Design > Customizer > Zusätzliches CSS und gibst dort für die Klasse .rot die zugehörige Regel ein:
    .rot {color: red;}`

    Es ist allerdings gut möglich, dass die CSS-Klasse nicht greift, weil die Kaskade durch ein anderen Element unterbrochen wird. Hier ein Beispiel für den HTML-Code des Menüeintrags:

    <li id="menu-item-203" class="rot menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item ">
  <a href="http://ccc.dev/?customize_changeset_uuid=8849f8f3-c3c4-4104-b71c-ea37c5f5d4d5&customize_messenger_channel=preview-0" target="_self">
    Ben Harris
  </a>
</li>

    In diesem Beispiel hat das Listenelement li zwar die CSS-Klasse .rot zugewiesen bekommen, aber der Text des Menüeintrags liegt in einem weiteren Tag <a href="…"> … </a>. Wenn im Stylesheet ausdrücklich eine Farbe für den Link vorgegeben ist (also z.B. 

    .navigation-top .current-menu-item > a, 
.navigation-top .current_page_item > a {
    color: #767676;
}

    dann greift die eigene CSS-Regel nicht, weil sie nicht spezifisch genug ist. Du müsstest die CSS-Regel also erweitern, z.B.

    .navigation-top .rot > a, 
.navigation-top .rot > a {
    color: red;
}

    Spätestens jetzt sollte die eigene CSS-Regel greifen.

    Dein Betriebssystem spielt dabei übrigens keine Rolle.

    Themenersteller tipokrat

    (@tipokrat)

    vor 9 Jahren, 7 Monaten

    Danke für die Antwort,
    aber wo finde ich den die CSS-Regel
    .navigation-top .rot > a,
    .navigation-top .rot > a {
    color: red;
    }
    nachdem ich diese im Design > Customizer > Zusätzliches CSS erstellt habe? Wo, bzw. in welcher Zeile in der style.css kann ich diese CSS- Regel mittels eines HTML-Editors finden und verändern?

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 9 Jahren, 7 Monaten

    Mit den Entwickler-Werkzeugen (Developer Tools) deines Browsers kannst du herausfinden, welche CSS-Klassen in deinem Navigationsmenü verwendet werden: Rechtsklick auf den Menüeintrag > Element untersuchen und dann siehst du in der linken Spalte des eingeblendeten Bereichs das HTML und in der rechten Spalte die zugehörigen CSS-Regeln. Mehr Informationen dazu findest du in

    https://developer.mozilla.org/de/docs/Tools/Seiten_Inspektor

    Das Mozilla Developer Network hat auch eine gute Einführung in CSS, in der dir auch die Kaskade erklärt wird.

Ansicht von 3 Antworten – 1 bis 3 (von insgesamt 3)

Das Thema „Wie kann ich eine in WordPress erstellte CSS- Regel verändern?“ ist für neue Antworten geschlossen.