Support » Allgemeine Fragen » CSS-Eigentschaften des RSS-Titels im Widget-Bereich ändern, aber wo?

  • donaldtrump

    (@donaldtrump)


    CSS-Eigentschaften des RSS-Titels im Widget-Bereich ändern, aber wie?

    Auf einer Kategorie-Seite möchte ich im sidebar-widget einen feed (z.b. feed-rss2) mit den letzten posts darstellen. Dazu gebe ich im Widget die URL des feeds ein, z.b. …/?cat=167&feed=rss2

    Soweit sogut. Ich gebe dann (optional) den Feed-Titel ein (falls hier kein Eintrag erfolgt, wird der Page-Titel plus Kategorie-Titel gezeigt, was ich nicht möchte).

    • Wo kann ich css-Eigenschaften dieses Feed-Titels verändern?

    • Erstmal paßt mir nicht, daß der Titel verlinkt ist mit der Startseite, also bei mir noch: localhost:8888. Er sollte logischerweise mit der entsprechenden Kategorie-Seite verlinkt sein.

    • Als zweites übernimmt der Titel die css-Eigenschaften des sidebar-widgets (in style.css), was in meinem Fall häßlich aussieht, denn die widget-Titel sind bei mir in dem Fall background=dunkle Farbe und color=ffffff.
    Wenn da nun, wie von WP vorgesehen, der Feed-Titel als Link (mit den link-Eigenschaften laut style.css) dargestellt wird, wirds häßlich, denn die Links sind auf meiner Seite violett; außerdem möchte ich die Fontgröße des Feed-Titels verändern.

    • Und das eingeblendete Feed-Logo möchte ich in der Größe verändern bzw. evtl. ersetzen.
    • außerdem hat der gesamte Feed-Bereich eine border:dotted-Linie, die will ich löschen.

    Aber wo kann ich das alles in meinem Sinne anpassen?

    Habe schon mal in wp-includes/feed-rss2.php geschaut aber da liegt wohl die Problemlösung nicht.

    Auf der WP-Seite Customizing Your Feeds geht es um das template für die feed-Ausgabe auf einer extra-Seite, aber nicht im Widgetbereich.

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Thread-Starter donaldtrump

    (@donaldtrump)

    ACHTUNG ROMAN.

    Habe jetzt gesucht und gesucht und probiert, dann im Entwickler-Inspektor gesehen daß es eine

    aside id="rss-2"

    und eine

    class="rsswidget"

    gibt an der Stelle, wo der RSS-Feed von mir ins Widget eingefügt wurde. Diese stehen nicht in der style.css im Hauptverzeichnis.

    Die ebenfalls vorhandene

    h3.class="widget-title"

    existiert im style.css und hat dort von mir gegebene Eigenschaften. Für den RSS-Feed wollte ich jedoch andere Eigenschaften, um ihn von den anderen Widget-Titeln optisch abzugrenzen. Diese konnte ich in folgender Form geben:

    h3.widget-title a {
    	background:#000;
    	font-size:1.2em !important;
    	line-height:1;
    	color:#fff !important;
    	text-align:center;
    }

    Ohne die !important-Anweisung hätte es nich funktioniert. Und es war nur möglich, weil der Inspektor zeigte, daß durch die Implantierung des RSS-Feeds in der Sidebar auch der Titel automatisch einen Link erhielt, weshalb ich eben h3.widget-title a definieren konnte (denn h3.widget-title a gibt es ansonsten in den Sidebar-headlines nicht, nur unverlinkte Titel)

    Soweit sogut. Aber der Inspektor zeigt, um es genau zu erzählen, ZWEI Links im Titel-Bereich: erstens ist ein image eingefügt (rss.png), das auf eine regelrechte Feed-Seite verlinkt, die ich eigentlich nicht will. Zweitens ist die direkt daneben bzw. schräg darunter vorhandene Überschrift selbst auch verlinkt, dummerweise aber auf die Startseite und nicht auf die Kategorie-Seite, was logischer wäre. Diese beiden Link-Bereiche liegen leider sehr dicht beieinander, die Maus trifft leider meistens den Homepage-Link vom Titel.

    Das einzige, was ich außerdem noch tun konnte, war die Einfügung folgender divs in die style.css, um dort meine Stilanweisungen zu implantieren:

    #rss-2 {} und #rss-2 a {}

    Damit konnte ich immerhin margin und padding-Werte definieren und einen Rahmen.

    Aber die Feed-Links sind leider schon von WP eingerahmt mit 1px dotted (dieser verschwindet unter meinen Rahmen-Eigenschaften rechts und links, aber nicht oben und unten…), würde ich gerne auch weghaben aber ging nicht, muß irgendwo anders noch definiert sein, wo die Stilanweisungen der style.css nicht greifen, auch mit !important nicht.

    Ist vielleicht alles zu abstrakt weil es außer mir niemand sehen kann auf localhost, aber vielleicht will nochmal jemand einen RSS-Feed in der sidebar konfigurieren und deshalb habe ich hier diesen Roman geschrieben.

    Irgendwo müssten ja noch die erwähnten, von WP vordefinierten Link-Angaben zu finden sein, aber ich habe sie nicht gefunden.

    Moderationshinweis: Nur ein Tipp: Dein Beitrag lässt sich leichter lesen, wenn du Code in so genannte Backticks (Shift+Akzentzeichen) setzt. Ist wirklich nicht weiter tragisch, aber ich dachte, dir hilft vielleicht der Hinweis. Grüße, Bego

    Flower33

    (@flower33)

    Ist vielleicht alles zu abstrakt weil es außer mir niemand sehen kann

    Wo du Recht hast, hast du Recht… ;-))
    Das ist ja anscheinend keine ganz triviale Sache, und da ist es doppelt schwierig, wenn man die konkreten Stellen nicht selbst im Entwickler-Tool vor Augen hat.

    Für die *zwei* unmittelbar benachbarten Titel-Links scheint mir in WP 4.5 die Datei class-wp-widget-rss.php im Ordner wp-includes/widgets zuständig zu sein. Wenn du mit einer älteren Version arbeitest, musst du dir die Datei/Stelle selbst heraussuchen, weil das anscheinend je nach Version verschieden ist.

    Hier der mMn entscheidende Ausschnitt (ab Zeile 82) aus der relevanten Code-Passage:

    $title = '<a class="rsswidget" href="' . esc_url( $url ) . '"><img class="rss-widget-icon" style="border:0" width="14" height="14" src="' . esc_url( $icon ) . '" alt="RSS" /></a> <a class="rsswidget" href="' . esc_url( $link ) . '">'. esc_html( $title ) . '</a>';

    Du könntest lokal mal testen, analog zu diesem Beispiel, im oben zitierten Code je nach deinem Bedarf den Image-Link oder den Title-Link (vorsichtig 😉 herauszulöschen und dann eine entsprechend geänderte Datei in die nachgebildete Ordnerstruktur wp-includes/widgets in deinem Child-Theme zu platzieren und zu schauen, ob das ohne negative Auswirkungen so klappt, wie von dir beabsichtigt.

    Was die von dir beschriebene Schwierigkeit der passenden CSS-Regeln betrifft, so ist das, ohne den betreffenden Kontext zu sehen, fast nicht zu beurteilen. Daher kann ich für den Moment nur vorschlagen, es bei den fraglichen CSS-Regeln mal mit einer höheren Spezifität zu versuchen.

    Ich hoffe, dass dir irgendwas hiervon weiterhilft 😉

    @bego:
    Woran könnte es liegen, dass nun schon in einem zweiten Beitrag von mir der Code, obwohl er bei der Eingabe von mir als solcher markiert wurde, nicht, wie üblich, mit blauer Hintergrund-Markierung angezeigt wird? Obs vielleicht daran liegt, dass in beiden Fällen der Code mit einem Semikolon endet? Kann ich mir aber auch nicht so recht vorstellen…?


    Moderationshinweis: Bei der Code-Auszeichnung gibt es zwei Möglichkeiten: du kannst inline formatieren, wenn du die Backticks im fortlaufenden Text verwendest. Soll hingegen ein Code-Block formatiert werden, müssen die Backticks in einer einzelnen Zeile stehen. Ich hab’s mal korrigiert. Grüße, Bego

    Thread-Starter donaldtrump

    (@donaldtrump)

    Oh super besten Dank, habe es gefunden, da ich auf meinem localhost allerdings noch WP-Version 4.2.7 habe, ist es die Datei default-widgets.php im wp-includes-Ordner.

    Habe die RSS-feed-URL samt rss.png gelöscht, und bei $ Title einfach die Linkadresse eingegeben.

    Im Endergebnis sieht es nun aus wie ein „normales“ Widget (mit leicht veränderten CSS-Eigenschaften), ABER ich habe jetzt in einer Sidebar einen dynamischen feed mit den letzten News-Meldungen (bis zu 20 posts) – die schon auf einer Kategorie-Seite im main-content erscheinen, aber jetzt von mir nach Wunsch zusätzlich auf eine andere Seite mit eingebaut werden können. Und das ohne plugin mit bordeigenen Mitteln.

    Habe aber auch das plugin „posts in sidbar“ am arbeiten, das ist auch gut, es zeigt posts (auch mit images), deren ID man eingeben muß, aber es ist statisch, die gezeigten posts muß man ggfs. manuell ändern durch Angabe anderer gewünschter IDs.

    Flower33

    (@flower33)

    Im Endergebnis sieht es nun aus wie ein „normales“ Widget (mit leicht veränderten CSS-Eigenschaften), ABER ich habe jetzt in einer Sidebar einen dynamischen feed mit den letzten News-Meldungen (posts) – die schon auf einer Kategorie-Seite im main-content erscheinen, aber jetzt von mir nach Wunsch zusätzlich auf eine andere Seite mit eingebaut werden können. Und das ohne plugin mit bordeigenen Mitteln.
    Habe aber auch das plugin „posts in sidbar“ am arbeiten, das ist auch gut, es zeigt posts (auch mit images), deren ID man eingeben muß, aber es ist statisch, die gezeigten posts muß man ggfs. manuell ändern durch Angabe anderer gewünschter IDs.

    Da sind jetzt so viele „Abers“ drin, dass es mich etwas verwirrt – verstehe ich das richtig, dass das Problem jetzt so weit gelöst ist? 😉

    Flower33

    (@flower33)

    @bego:
    Danke schön für die nachträgliche Formatierung, aber deine Erklärung habe ich ausnahmsweise mal nicht verstanden. Ich hatte den gesamten Code im Eingabefeld markiert und dann oben auf die Schaltfläche „Code“ geklickt, wodurch der Code von den Backticks umgeben wurde. Wie hast du das gemacht?

    Moderator Bego Mario Garde

    (@pixolin)

    Ist ja auch richtig so. Die Frage ist einzig, ob die Backticks auf einer neuen Zeile stehen oder ob in der Zeile noch weiterer Text kommt. Leider kann ich das schlecht mit den Backticks zeigen, weil dann die Eingabe als Code dargestellt wird … denk dir einfach die Hochkommas als Backticks:

    Das würde als grau hinterlegter Textblock angezeigt

    define( ‚RELOCATE‘, true );

    und das hier als Text ‚mit fester Laufweite‘ innerhalb der Zeile.

    Verständlicher? 🙂

    Thread-Starter donaldtrump

    (@donaldtrump)

    @flower33
    ja gelöst 🙂
    nochmal danke

    Moderator Bego Mario Garde

    (@pixolin)

    Kein Thema 🙂

    Flower33

    (@flower33)

    @bego: Jetzt ists klar, vielen Dank!

    @donaldtrump: Sehr schön! Hat sich durch diese Änderungen das Thema CSS-Spezifität erübrigt?

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Das Thema „CSS-Eigentschaften des RSS-Titels im Widget-Bereich ändern, aber wo?“ ist für neue Antworten geschlossen.