Tagesschau.de Audiofenster in Artikel

  • Firefox-Version
    126.0.1
    Betriebssystem
    Windows 11

    Hallo,

    am Ende von z. B. diesem Artikel: https://www.tagesschau.de/ausland/amerik…huldig-100.html

    befindet sich eine Box, um ein Audio abzuspielen. Diese möchte komplett in #00016 färben.

    Problem hierbei ist, dass die Bilder, welche im Artikel sind, auch ein Audio beeinhalten. Wenn ich die untere Box entsprechend einfärbe, verschwinden die Bilder. Gibt es da eine Lösung?


    Edit: Hier meine bisherige .css, welche auch funktioniert


    Mein Name bezieht sich auf die Firefox-Version, die zum Zeitpunkt meiner Anmeldung hier aktuell war.

  • Zur hilfreichsten Antwort springen
  • Der entsprechende Codeausschnitt hätte auch gereicht, wer soll das denn alles durchlesen/arbeiten?

    EDIT: Das habe ich wahrscheinlich falsch verstanden: Der Code um den es geht ist scheinbar nicht in dieser css vorhanden.

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf | Astrid Lindgren]
    Dieser Beitrag wurde ohne Hilfe einer 'KI' erstellt.

    2 Mal editiert, zuletzt von Mitleser (11. Juni 2024 um 22:51) aus folgendem Grund: Rechtschreibfehler

  • Der entsprechende Codeausschnitt hätte auch gereicht, wer soll das denn alles durchlesen/arbeiten?

    Sonst wird immer nach dem Code gefragt... Für die Fragegestellung an sich habe ich noch nichts gefunden. Aber teilweise wirkt sich ja bereits vorhandener Code auf andere Änderungen aus.

    Mein Name bezieht sich auf die Firefox-Version, die zum Zeitpunkt meiner Anmeldung hier aktuell war.

  • Eine Farbangabe mit 8 Stellen gibt es nicht. Im allgemeinen wird die Farbe im RGB-Format angegeben. Das hat nur 6 Stellen. #00016e ist OK, #00016e82 aber nicht. Oder meintest du eigentlich #000082? #00016 gibt es auch nicht, aber hier meintest du wohl auch #00016e.

    .ardplayer ist eine Klasse ja, die wirkt sich auf alle Elemente aus, die die Klasse haben. Wenn es aber nur um die unterschiedlichen Artikel geht, bette mal die Einträge mit .ardplayer am Anfang in @-moz-document url("https://www.tagesschau.de/ausland/amerik…huldig-100.html")

    Dann sollte dein CSS nur auf den ARD-Player auf dieser Seite funktionieren, aber auch nur auf dieser Seite. Ich halte es für Unsinn den ARD-Player auf jeder Seite unterschiedlich zu gestalten. Die ARD hat es bewusst so gemacht, dass der Player auf allen Seiten das gleiche Aussehen hat. Ich nehme mal an, dass deine falschen Farbangaben die Ursache für dein Problem sind.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Eine Farbangabe mit 8 Stellen gibt es nicht. Im allgemeinen wird die Farbe im RGB-Format angegeben. Das hat nur 6 Stellen. #00016e ist OK, #00016e82 aber nicht. Oder meintest du eigentlich #000082? #00016 gibt es auch nicht, aber hier meintest du wohl auch #00016e.

    .ardplayer ist eine Klasse ja, die wirkt sich auf alle Elemente aus, die die Klasse haben. Wenn es aber nur um die unterschiedlichen Artikel geht, bette mal die Einträge mit .ardplayer am Anfang in @-moz-document url("https://www.tagesschau.de/ausland/amerik…huldig-100.html")

    Dann sollte dein CSS nur auf den ARD-Player auf dieser Seite funktionieren, aber auch nur auf dieser Seite. Ich halte es für Unsinn den ARD-Player auf jeder Seite unterschiedlich zu gestalten. Die ARD hat es bewusst so gemacht, dass der Player auf allen Seiten das gleiche Aussehen hat. Ich nehme mal an, dass deine falschen Farbangaben die Ursache für dein Problem sind.

    Danke für deine Ausführungen. Ja, #00016e ist korrekt. Habe ich mWn auch so in der .css.

    Das "#00016e82" habe ich über den Farbwähler in den Entwicklerwerkzeugen erzeugt, in dem ich von dem #00016e die Deckkraft reduziert habe. Die Farbe funktioniert an sich auch, wie sie soll.

    Problem konkret:

    Wenn ich den unteren Player (div.player.ardplayer.ardplayer-show-controls.ardplayer-state-audio.ardplayer-state-audio-inline.ardplayer-state-inactive ardplayer-m.ardplayer-bs-break.rdplayer-bs-xl) auf #00016e setze, wirkt sich das auf den (div.ardplayer-posterframe) aus.

    Ich möchte nicht den Player auf jeder Seite einzeln ändern, sondern nur den großen am Artikelende. Die kleinen Bild-Player sollen bleiben, wie sie sind.

    Mein Name bezieht sich auf die Firefox-Version, die zum Zeitpunkt meiner Anmeldung hier aktuell war.

  • Geht das:

    CSS
    .ardplayer-state-audio:not(.ardplayer-s) {
      background-color: red !important;
    }

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf | Astrid Lindgren]
    Dieser Beitrag wurde ohne Hilfe einer 'KI' erstellt.

  • Eine Farbangabe mit 8 Stellen gibt es nicht. Im allgemeinen wird die Farbe im RGB-Format angegeben. Das hat nur 6 Stellen. #00016e ist OK, #00016e82 aber nicht.

    Acht Stellen sind in Ordnung. Das ist dann nicht RGB, sondern RGBA, sprich mit Angabe des Alpha-Kanals für Transparenz. Farbangaben mit der Raute können 3, 4, 6 oder 8 Stellen haben. Siehe:

    <hex-color> - CSS: Cascading Style Sheets | MDN
    The <hex-color> CSS data type is a notation for describing the hexadecimal color syntax of an sRGB color using its primary color components (red, green, blue)…
    developer.mozilla.org
  • Acht Stellen sind in Ordnung. Das ist dann nicht RGB, sondern RGBA, sprich mit Angabe des Alpha-Kanals für Transparenz.

    Ah, danke. Mit Transparenz kannte ich nur die Darstellung rgba(00, 01, 6e, 0.82).

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Geht das:

    CSS
    .ardplayer-state-audio:not(.ardplayer-s) {
      background-color: red !important;
    }

    Teilweise. Wirkt sich leider nur auch auf (div.ardplayer-posterbackdrop) aus.

    Mein Name bezieht sich auf die Firefox-Version, die zum Zeitpunkt meiner Anmeldung hier aktuell war.

  • Wirkt sich leider nur auch auf (div.ardplayer-posterbackdrop) aus

    Aber nicht auf dem von dir erwähnten Beispiellink (https://www.tagesschau.de/ausland/amerik…huldig-100.html) oder doch? Oder wo sonst (Bitte Link/Screen). Und was heißt 'teilweise'?

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf | Astrid Lindgren]
    Dieser Beitrag wurde ohne Hilfe einer 'KI' erstellt.

    5 Mal editiert, zuletzt von Mitleser (12. Juni 2024 um 18:15) aus folgendem Grund: 'Bilder einfügen' Übung

  • Wirkt sich leider nur auch auf (div.ardplayer-posterbackdrop) aus

    Aber nicht auf dem von dir erwähnten Beispiellink (https://www.tagesschau.de/ausland/amerik…huldig-100.html) oder doch? Oder wo sonst (Bitte Link/Screen). Und was heißt 'teilweise'?

    Teilweise = Auf der genannten Seite funktioniert es, aber es wirkt sich auf Elemente auf der Startseite (https://www.tagesschau.de/) Videoeinbettung unter der Überschrift "Zollstreit mit China" aus.

    Mein Name bezieht sich auf die Firefox-Version, die zum Zeitpunkt meiner Anmeldung hier aktuell war.

    • Hilfreichste Antwort

    Ok, dann auf die harte Tour:

    CSS
    .mediaplayer.mediaplayer--reduced-m.mediaplayer--audio.mediaplayer--lazy-loading.mediaplayer--loaded div.player.ardplayer.ardplayer-show-controls.ardplayer-state-audio.ardplayer-state-audio-inline.ardplayer-state-inactive.ardplayer-m.ardplayer-bs-break {
      background-color: red !important;
    }

    Jetzt?

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf | Astrid Lindgren]
    Dieser Beitrag wurde ohne Hilfe einer 'KI' erstellt.

  • Ok, dann auf die harte Tour:

    CSS
    .mediaplayer.mediaplayer--reduced-m.mediaplayer--audio.mediaplayer--lazy-loading.mediaplayer--loaded div.player.ardplayer.ardplayer-show-controls.ardplayer-state-audio.ardplayer-state-audio-inline.ardplayer-state-inactive.ardplayer-m.ardplayer-bs-break {
      background-color: red !important;
    }

    Jetzt?

    Ja. Perfekt. Danke für deine Hilfe.

    Mein Name bezieht sich auf die Firefox-Version, die zum Zeitpunkt meiner Anmeldung hier aktuell war.

  • Ja. Perfekt.

    Leider nein! Starte mal den Player. Jetzt aber (kürzen musst du selber):

    CSS
    /*player inaktiv*/
    .mediaplayer.mediaplayer--reduced-m.mediaplayer--audio.mediaplayer--lazy-loading.mediaplayer--loaded div.player.ardplayer.ardplayer-show-controls.ardplayer-state-audio.ardplayer-state-audio-inline.ardplayer-state-inactive.ardplayer-m.ardplayer-bs-break {
      background-color: red !important;
    }
    /*player spielt ab*/
    .mediaplayer.mediaplayer--reduced-m.mediaplayer--audio.mediaplayer--lazy-loading.mediaplayer--loaded div.player.ardplayer.ardplayer-show-controls.ardplayer-state-audio.ardplayer-state-audio-inline.ardplayer-m.ardplayer-bs-break {
      background-color: green !important;
    }

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf | Astrid Lindgren]
    Dieser Beitrag wurde ohne Hilfe einer 'KI' erstellt.

    Einmal editiert, zuletzt von Mitleser (12. Juni 2024 um 19:23)