Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Ergebnis 1 bis 8 von 8
Like Tree3Likes
  • 1 Post By Sailor56
  • 1 Post By Sailor56
  • 1 Post By Sailor56

Thema: Startseite Schriftzug/Schriftfarbe/Schriftgröße vom Seitennamen bzw. Logo ändern

  1. #1
    PostRank: 0
    Registriert seit
    30.08.2017
    Beiträge
    15

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

    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. #2
    PostRank: 4
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    265
    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
    shanty82 likes this.

  3. #3
    PostRank: 0
    Registriert seit
    30.08.2017
    Beiträge
    15
    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. #4
    PostRank: 4
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    265
    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;
    }
    shanty82 likes this.

  5. #5
    PostRank: 0
    Registriert seit
    30.08.2017
    Beiträge
    15
    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. #6
    PostRank: 4
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    265
    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-Code:
    <div class="title-block">
    
             <h1 class="site-title"><a href="http://www.segelpause.de/" title="Segelpause" rel="home">Segelpause</a></h1>
    
             <h3 class="site-description">von Herzen für Herzen</h3>
                    
    </div>
    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!
    shanty82 likes this.

  7. #7
    PostRank: 0
    Registriert seit
    30.08.2017
    Beiträge
    15
    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. #8
    PostRank: 0
    Registriert seit
    30.08.2017
    Beiträge
    15
    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

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •