mb.miniAudioPlayer Layout Problem

    Hallo,
    ich benutze den mb.minAudioplayer, der auch tadellos funktioniert. Ich habe aber ein Darstellungsproblem: der untere Rand ist zu hoch, verdeckt teilweie die "Pause" und "Play" buttons. 8siehe Anhang).
    Alle Versuche, css-Dateien zu tweaken, sind fehlgeschlagen - ich mache es wohl falsch.
    Über ein Tipp zur Lösung des Problems bin ich sehr dankbar!
    Grüße Derugo

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    CSS Probleme kann man nur mit einem Link zur Seite lösen. Bitte die Forenregeln beachten: Was in einen Thread gehört.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Den Player habe ich erst auf einer Testseite eingebaut:
    https://maedchenchor-hannover.de/?page_id=14163
    Die CSS des Players ist
    QUOTE

    * DO NOT REMOVE OR MODIFY */
    /*{"skinName": "mySkin", "borderRadius": 5, "main": "rgb(204, 0, 0)", "secondary": "#fff", "playerPadding": 3}*/
    /* END - DO NOT REMOVE OR MODIFY */
    /*++++++++++++++++++++++++++++++++++++++++++++++++++
    Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi);
    http://pupunzi.com/mb.components/…/skinMaker.html

    Skin name: mySkin5
    borderRadius: 5
    background: rgb(204, 0, 0)
    icons: #fff
    border: rgb(242, 242, 242)
    borderLeft: rgb(255, 0, 0)
    borderRight: rgb(153, 0, 0)
    mute: rgba(255, 255, 255, 0.4)
    download: rgba(204, 0, 0, 0.4)
    downloadHover: rgb(204, 0, 0)
    height:30px !important;
    ++++++++++++++++++++++++++++++++++++++++++++++++++*/

    /* Older browser (IE8) - not supporting rgba() */
    .mbMiniPlayer.mySkin .playerTable span{background-color:#cc0000}
    .mbMiniPlayer.mySkin .playerTable span.map_play{border-left:1px solid #cc0000;}
    .mbMiniPlayer.mySkin .playerTable span.map_volume{border-right:1px solid #cc0000;}

    /*++++++++++++++++++++++++++++++++++++++++++++++++*/

    .mbMiniPlayer.mySkin .playerTable{background-color:transparent; border-radius:5px !important;}
    .mbMiniPlayer.mySkin .playerTable span{background-color:rgb(204, 0, 0); padding:26px !important; font-size: 23px;}
    .mbMiniPlayer.mySkin .playerTable span.map_time{ font-size: 13px !important; width: 50px !important}
    .mbMiniPlayer.mySkin .playerTable span.map_title{ padding:4px !important}
    .mbMiniPlayer.mySkin .playerTable span.map_play{border-left:1px solid rgb(153, 0, 0); border-radius:0 4px 4px 0 !important;}
    .mbMiniPlayer.mySkin .playerTable span.map_volume{padding-left:9px !important}
    .mbMiniPlayer.mySkin .playerTable span.map_volume{border-right:1px solid rgb(255, 0, 0); border-radius:4px 0 0 4px !important;}
    .mbMiniPlayer.mySkin .playerTable span.map_volume.mute{color: rgba(255, 255, 255, 0.4);}
    .mbMiniPlayer.mySkin .map_download{color: rgba(204, 0, 0, 0.4);}
    .mbMiniPlayer.mySkin .map_download:hover{color: rgb(204, 0, 0);}
    .mbMiniPlayer.mySkin .playerTable span{color: #fff;text-shadow: none!important;}
    .mbMiniPlayer.mySkin .playerTable span{color: #fff;}
    .mbMiniPlayer.mySkin .playerTable {border: 1px solid rgb(242, 242, 242) !important;}
    .mbMiniPlayer.mySkin .playerTable span.map_title{color: #000; text-shadow:none!important}
    .mbMiniPlayer.mySkin .playerTable .jp-load-bar{background-color:rgba(204, 0, 0, 0.3);}
    .mbMiniPlayer.mySkin .playerTable .jp-play-bar{background-color:#cc0000;}
    .mbMiniPlayer.mySkin .playerTable div.map_controlsBar{background-image:none;background-color:#fff;}
    .mbMiniPlayer.mySkin .playerTable span.map_title{color:#000;}
    .mbMiniPlayer.mySkin .playerTable span.map_volumeLevel a{background-color:rgb(255, 255, 255); height:83%!important }
    .mbMiniPlayer.mySkin .playerTable span.map_volumeLevel a.sel{background-color:#fff;}
    .mbMiniPlayer.mySkin span.map_download{font-size:53px !important;}
    /* Wordpress playlist select */
    .map_pl_container .pl_item.sel{background-color:rgba(204, 0, 0, 0.1) !important; color: #999}
    /*++++++++++++++++++++++++++++++++++++++++++++++++*/
    UNQUOTE

    Ich benutze Theme Sydney und WP Version 5.4–de_DE, alles auf den neuesten Stand aktualisiert.
    Gruß Derugo

    Dein Player kollidiert mit dem CSS Boxmodell von Elementor, ergänze z.B. sowas hier in Design > Customizer > Zusätzliches CSS:

    Code
    .mbMiniPlayer * {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden