Wie den Seitentitel farbig hinterlegen?

  • altf4

    (@altf4)


    vor 6 Jahren, 7 Monaten

    Hallo liebe Community,

    ich verwende das Theme Bento und möchte gerne den Seitentitel auf der Startseite farbig hinterlegt haben. Allerdings habe ich keine Ahnung wie das geht. Da ich blutiger Anfänger bin, möchte ich auch nicht einfach so auf gut Glück im CSS herumpfuschen, weshalb ich mich über Hilfe/Anregungen/Lösungen eurerseits sehr freuen würde.

    Der Link zu meiner Seite ist folgender: (Link in „Link zu der Seite, für die du Hilfe brauchst:“ verschoben. – espiat Moderator)
    Die weiße Überschrift soll farbig hinterlegt werden, vgl. CTA-Button.

    Danke im Voraus,
    Emma

    • Dieses Thema wurde geändert vor 6 Jahren, 7 Monaten von Marcus Spanier. Grund: Link verschoben

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 1 Antwort (von insgesamt 1)
  • Moderator Bego Mario Garde

    (@pixolin)

    vor 6 Jahren, 7 Monaten

    Wenn du individuelle Anpassungen am Layout deiner Webseiten vornehmen möchtest, ist der beste Ausgangspunkt die Verwendung der Entwicklerwerkzeuge deines Browsers. Um die zu starten, rufst du deine gewünschte Webseite auf, machst einen Rechtsklick auf die Webseite, dann (Element*) Untersuchen (*heißt je nach Browser etwas anders) und schon siehst du in einem neuen Abschnitt links das HTML und rechts die verwendeten Stil-Regeln im Cascading Style Sheet.

    Ein Rechtsklick auf den Seitentitel ergibt
    .post-header-title h1, .entry-header h1 { … }
    (wobei im Moment wohl eine fehlerhafte CSS-Regel eingetragen ist).

    Um nun der Überschrift z.B. die Farbe Rot zuzuweisen, kannst du in den Entwicklerwerkzeugen in die CSS-Regel klicken und versuchsweise color: #ee0000; einfügen. Die Farbe sieht natürlich nicht hübsch aus und du kannst nun einen besseren Farbwert ausprobieren. Wenn du mit dem Ergebnis zufrieden bist, kopierst du die CSS-Regel und fügst sie im Customizer unter Zusätzliches CSS ein:

    .post-header-title h1, .entry-header h1 {
    color: #f5eddf;
}

    Nun gilt diese Regel natürlich generell für alle Überschriften in einem <div>-Tag mit der Klasse .post-header-title oder .entry-header, also auch auf Folgeseiten. Die Startseite hat aber im <body>-Tag zusätzliche CSS-Klassen, die nur für die Startseite eingefügt werden: home und page-id-52. Diese CSS-Klassen kannst du nutzen, um die Regel ausschließlich auf dieser Seite anzuwenden:

    .home .post-header-title h1, 
.home .entry-header h1 {
    color: #f5eddf;
}
Ansicht von 1 Antwort (von insgesamt 1)
  • Das Thema „Wie den Seitentitel farbig hinterlegen?“ ist für neue Antworten geschlossen.

Schlagwörter