Bildunterschrift erstellen / CSS spricht nicht an

1. offizieller Beitrag

    Hallo allerseits

    Ich arbeite mit Wordpress, mache das schon ein paar Jahre, aber hier auf diesem Forum bin ich neu. Danke vorab für Eure Hilfe. Folgendes ist mein Problem:

    Das Theme meines Blogs https://www.velofahrer.ch zeigt standardmässig keine Bildunterschriften zu den Artikelbildern. Deshalb möchte ich diese Funktion selbst einbauen. So bin ich vorgegangen:

    In die Datei content-single.php habe ich an der passenden Stelle diesen Code eingefügt:

    PHP
    <?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?>

    Das Ganze habe ich so eingepackt:

    PHP
    <p class="bildlegende"><?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?></p>

    So sollte ich doch in der style.css die Bildunterschrift formatieren können, oder?

    Der Code dort lautet (mal fürs erste):

    CSS
    .bildlegende { font-size: 0.9rem;
               line-height: 1.25;
               font-style: italic;
               padding: 0px 2px 0px; 0px !important;
}


    Ergebnis:

    Die Bildunterschrift erscheint, guckt mal hier:

    https://www.velofahrer.ch/2017/04/rotkae…chen-des-wolfs/


    Weiter tut sich aber nichts, d.h. die CSS-Anweisung wirkt sich nicht aus. Woran könnte das liegen? Kann mir jemand weiterhelfen?

    Via "Untersuchen" stelle ich zudem fest, dass zwischen Bild und Bildunterschrift ein <a>...</a>-Abstand ist, den es dort eigentlich nicht braucht.

    Danke für Eure Hilfe!

    Grüsse


    Dominik

    • Offizieller Beitrag

    Hi,

    Deine CSS-Regel wird an zwei Stellen überschrieben. Einmal wird in der Klasse entry-content p ( Zeile 1022 ) die line-height überschrieben und einmal in einer MediaQuery für die gleich Klasse ( Zeile 2978 ) die font-size.
    Deine CSS-Regel ist in Zeile 21 verankert. Du solltest eigene Regeln ans Ende der Datei setzen, damit Deine die Standardregeln überschreiben und nicht umgekehrt.

    Gruß Arne

    Hallo Arne

    Danke für deine Antwort. Ich verstehe das soweit, Deine Anleitung übersteigt aber meine Kenntnisse. Bis jetzt macht ich das so: Das zusätzliche CSS wird in die style.css im Child-Theme geschrieben. Falls nötig, kommt ein !important ans Ende. Das ist ja in diesem Fall auch so, funktioniert aber offenbar nicht. Darf ich nochmals fragen, wie Du konkret vorgehen würdest?

    Grüsse, Dominik

    • Offizieller Beitrag

    Hi Dominik,

    Du hast eine style.css irgendwo liegen ( ich kenne Dein System/Theme nicht ).
    Darin legst Du ja auch schon Deine eigenen Styles ab, was durchaus eine gängige Lösung ist.
    Besser fände ich - und so würde ich das machen -, wenn man eine eigene CSS anlegt, die im Head des Dokument nach der style.css geladen wird.
    Dazu einfach ein weiteres <link>-Tag nach den bereits vorhandenen im Template anlegen, bspw.:

    HTML
    <link rel="stylesheet" href="https://www.velofahrer.ch/wp-content/plugins/contact-form-7/includes/css/dominik-style.css" type="text/css" media="all">


    Wichtig ist halt, dass die als letztes von allen CSS geladen wird. Du überschreibst dann allerdings u.U. auch MediaQueries aus den Original-Styles.
    Das musst Du Dir dann anschauen.

    Was das important angeht, ist das eigentlich schon eher die Holzhammermethode.
    Wenn man auf important setzen muss, hat man in gefühlt 95% aller Fälle einen "Hierarchiefehler" innerhalb der CSS-Regeln.
    Nur um ein leicht verständliches Beispiel zu nennen: CSS id-Selektionen haben Prio vor CSS class-Selektionen.
    Da gibts dann noch weiteres in Bezug auf Siblings oder auch zum Thema Inline-Style zu beachten, aber das soll hier nicht das Thema sein.

    Du hast auch eine Art "Hierarchie"- bzw. "Overwrite"-Problem.
    Deine CSS-Regel befindet sich wie gesagt vor den Standard-Regeln der style.css. Bei gleichwertigen Regeln "gewinnt" die letzte, sprich auf Dateiebene die zuletzt definierte Regel. Deshalb werden Deine Regeln tlw. überschrieben.

    Anstatt important zu benutzen, solltest Du Deine Regeln an geeigneter Stelle im unteren Bereich der style.css ansiedeln.
    Oder eben eine eigene Style-Datei verwenden.

    Gruß Arne