1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP <5.0 Startseite Schriftzug/Schriftfarbe/Schriftgröße vom Seitennamen bzw. Logo ändern

Dieses Thema im Forum "Design" wurde erstellt von shanty82, 11. Februar 2018.

  1. shanty82

    shanty82 Member

    Registriert seit:
    30. August 2017
    Beiträge:
    15
    Zustimmungen:
    0
    Hallo ihr Lieben,

    leider habe ich Schwierigkeiten, denn ich weiß nicht, wie ich die Einstellungen meines Logos bzw. den "Kopf der Seite" flexibel verändern kann: www.segelpause.de "Segelpause" und "VON HERZEN FÜR HERZEN".

    Mit dem Plugin "Google Typography" hatte ich es eigentlich schon wunschgemäß geändert. Sobald ich allerdings ausgeloggt bin, erscheint "VON HERZEN FÜR HERZEN" auf der Startseite segelpause.de für meinen Geschmack in zu großem Schriftzug und nicht in schwarzer Farbe.

    Was mache ich falsch? Ist dieses Plugin evtl. mit anderen Plugins oder meinem Theme nicht kompatibel? Müsste ich noch einen zusätzlichen Code eingeben, damit die Sache funktioniert?

    Vielen Dank vorab für jede hilfreiche Antwort!

    Liebe Grüße
     
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Rechtsklick auf das fragliche Element... in deinem Fall der Schriftzug... im Kontextmenü dann 'Element untersuchen' auswählen - es startet der Inspektor. Das gewählte Element ist schon ausgewählt.
    Schauen, welches Element es ist und welcher CSS Selektor angesprochen werde muss. Rechts sieht man die zur Zeit gültigen CSS Formatierungen.
    Der Rest, also die neuen Formate setzen, wird dann im zusätzlichen CSS gemacht! ... und ein Video zur Hilfestellung...
    https://www.youtube.com/watch?v=KJpZT5IkOpc
     
  3. shanty82

    shanty82 Member

    Registriert seit:
    30. August 2017
    Beiträge:
    15
    Zustimmungen:
    0
    Hallo,

    vielen Dank für die Antwort, lieber Sailor56!

    Welchen CSS Selektor muss ich denn genau ansprechen? Im Gegensatz zum Video erscheint es bei mir nicht eindeutig. Gibt es die Möglichkeit, diesen CSS Selektor zu kopieren und ins Forum zu stellen?
    Habe alles probiert, aber die Schriftfarbe der Überschrift "VON HERZEN ZU HERZEN" lässt sich einfach nicht ändern...

    Vielen Dank vorab für jede hilfreiche Antwort!

    Liebe Grüße
     
  4. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Zunächst hast du schon mal (fast) alles richtig gemacht - nur hast du, so wie ich es sehe, folgendes in dein zusätzliches CSS geschrieben:

    .entry-header, .title-block {

    {color:
    #000000;
    }

    {.title-block .site-title a, .header-image .title-block .site-title a, .title-block .site-description, .header-image .title-block .site-description {
    color: #000000;}

    Diese geschweiften Klammern { (rot markiert) ganz am Anfang gehören da nicht hin und macht den gesamten folgenden Ausdruck unwirksam - CSS ist in diese Hinsicht sehr sensibel!

    So eine CSS Anweisung hat immer das Format und wenn diese Syntax nicht eingehalten wird, führt das zu Fehlern... die Anweisung wird nicht ausgeführt... oder sogar alle folgenden Anweisungen werden ignoriert!

    Selektor {
    Eigenschaft: Wert;
    }

    Wenn du diese 'falsche' Klammer gelöscht hast, wirst du feststellen, dass der gesamte Überschriftenbereich in schwarzer Schrift dargestellt wird, da deine Selektoren eben alles dort ausgewählt haben.

    Im Moment sieht das bei dir so aus..
    segelpause1.png

    Das Element, dass du ändern willst ist das <h3 class="site-description">...</h3>
    Damit hast du schon mal die Möglichkeit gezielt auf dieses Element zuzugreifen - durch ... h3.site-description oder auch nur .site-description
    Um sicher zu gehen, dass du nicht noch ein anderes Element ansprichst, dass den selben Selektor verwendet, grenzt du etwas weiter ein und benennst noch das Elternelement deines <h3>.
    Das ist das umschließende <div class="title-block">... </div>.
    mit
    .title-block .site-description {
    Eigenschaft: Wert;
    }
    triffst du dann dein 'VON HERZ ZU HERZ'

    Mein Vorschlag - lösche die fehlerhaften Anweisungen, die ich oben erwähnt habe (die sind sowieso unwirksam - weil falsch) und schreibe stattdessen:
    .title-block .site-description {
    color: #000000;
    }
     
  5. shanty82

    shanty82 Member

    Registriert seit:
    30. August 2017
    Beiträge:
    15
    Zustimmungen:
    0
    Lieber Sailor56!

    Vielen lieben Dank für deine ausführliche und hilfreiche Antwort.

    Wie du siehst, ist der Schriftzug jetzt insgesamt in schwarzer Farbe, dabei wollte ich den Blognamen weiterhin in rot-brauner Farbe (#a83c26) wie vorher halten.

    Ich habe versucht, deine Vorschläge umzusetzen, verstehe allerdings nicht, wie man ein Elternelement benennt. Sorry, bin Neuling... Wie ich zu <h3 class="von Herzen zu Herzen"></h3> komme, habe ich verstanden. Dieses Element würde ich dann mit rechter Maustaste anklicken und dann?

    Liebe Grüße :)
     
  6. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Kein Problem... das Forum ist ja für 'Neulinge' da! Und jeder ist mal so angefangen.. als Neuling.
    Schau dir deinen Quellcode an... der sieht an dieser Stelle etwa so aus!
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Da siehst du, da ist ein <div class="title-block> und zwischen dem öffnenden Tag <div> und dem schließenden Tag </div> sind 2 Elemente eingefügt... ein <h1>..</h1> und ein <h3>...</h3>.
    Beide.. das <h1> und das <h3> sind dann Kindelemente von <div class="title-block">... oder anders herum, das <div> ist das Elternelement von den beiden Überschriften!

    Wenn du im CSS eines von beiden ansprechen willst, dann ist es sinnvoll, hier möglichst genau zu sagen, was du ansprechen willst - in dem Elternelement <div class="title-block"> das Kindelement <h3 class="site-description">...</h3>
    Das würde dann (vollständig) so aussehen...
    div.site-title h3.site-description {
    anweisung: wert;
    }
    oder (verkürzt)
    .site-title .site-description {
    anweisung: wert;
    }

    War das jetzt verständlicher? Die Informationen, die du brauchst, sind alle im Quellcode enthalten.

    Und wenn du meine obige Antwort mal genau liest, dann steht da schon ganz genau drin, wie du nur die <h3 class="site-description">von Herzen für Herzen</h3> schwarz bekommst!
     
  7. shanty82

    shanty82 Member

    Registriert seit:
    30. August 2017
    Beiträge:
    15
    Zustimmungen:
    0
    Lieber Sailor56,

    zunächst einmal vielen Dank für all deine Geduld und Mühe.

    Auch wenn ich manches schon dank dir viel besser verstanden habe, z.B. die Kinderelemente und das umschließende Elternelement, so habe ich immer noch nicht begriffen, wo und wie nun diese Änderung vorzunehmen ist.

    Um das Element "von Herzen für Herzen" von der Überschrift des Blogs "Segelpause" farblich abzugrenzen, ist also folgender Einschub hinzuzufügen:
    div.site-title h3.site-description {
    anweisung: wert;
    }

    Ist das richtig? Falls ja, wo füge ich diesen Einschub ein, in "Zusätzliches CSS"? Wenn ja, genauso? Wenn nein, wo und wie?

    Mir leuchtet noch nicht ein, wie beispielsweise ein Kindelement anzusprechen ist bzw. was genau vorzunehmen ist, um es anzusprechen. Mir ist theoretisch klar, dass die Elemente bei Änderungen angesprochen werden müssen, nur die praktische Umsetzung verstehe ich noch nicht.

    Vielen Dank vorab für jede hilfreiche Antwort :)!!!

    Liebe Grüße
     
  8. shanty82

    shanty82 Member

    Registriert seit:
    30. August 2017
    Beiträge:
    15
    Zustimmungen:
    0
    Lieber Sailor56,

    es hat funktioniert, ich danke dir nochmals herzlich für deine Hilfe :)!

    Ich gebe zu, dass ich mich in dem ganzen Dschungel erstmal zurechtfinden musste und muss...

    Alles was zu ändern war, geschah über den "Customizer" im "Zusätzliches CSS" mit der Anpassung:


    .title-block .site-description {
    color: #000000;
    }

    Ich hatte die ganze Zeit gedacht, im Quellcode Änderungen vornehmen zu müssen, dabei hattest du ja zu Beginn geschrieben, die Änderungen im "Zusätzliches CSS" vorzunehmen.
    Mein Gedankengang war zu kompliziert ;).

    1000 Dank für alles & alles Liebe!

    Herzliche Grüße
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden