Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 2, 2021 at 12:54 pm #1284713
    gregcarrollLMG

    Hi

    Looking at another thread i have changed the CSS in Quick CSS as follows but it doesn’t seem to change the colours
    Any ideas what to do?

    Thanks

    /* Player background */
    #top .mejs-container,
    #top .mejs-controls,
    #top .mejs-embed,
    #top .mejs-embed body {
    background-color: #620815;
    }

    /* Player controls */
    #top .mejs-button > button {
    background-image: url(images/mejs-controls-dark.svg);
    }

    #top .mejs-time {
    color: #888888;
    }

    /* Progress and audio bars */

    /* Progress and audio bar background */
    #top .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
    #top .mejs-controls .mejs-time-rail .mejs-time-total {
    background-color: #620815;
    }

    /* Track progress bar background (amount of track fully loaded)
    We prefer to style these with the main accent color of our theme */
    #top .mejs-controls .mejs-time-rail .mejs-time-loaded {
    background-color: rgba(219, 78, 136, 0.075);
    }

    /* Current track progress and active audio volume level bar */
    #top .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
    #top .mejs-controls .mejs-time-rail .mejs-time-current {
    background: #db4e88;
    }

    /* Reduce height of the progress and audio bars */
    #top .mejs-time-buffering,
    #top .mejs-time-current,
    #top .mejs-time-float,
    #top .mejs-time-float-corner,
    #top .mejs-time-float-current,
    #top .mejs-time-hovered,
    #top .mejs-time-loaded,
    #top .mejs-time-marker,
    #top .mejs-time-total,
    #top .mejs-horizontal-volume-total,
    #top .mejs-time-handle-content {
    height: 3px;
    }

    #top .mejs-time-handle-content {
    top: -6px;
    }

    #top .mejs-time-total {
    margin-top: 8px;
    }

    #top .mejs-horizontal-volume-total {
    top: 19px;
    }

    March 3, 2021 at 8:58 am #1284972
    Rikard

    Hey gregcarrollLMG,

    What exactly are you looking to target or modify? Please try to explain a bit further, or post a screenshot highlighting your intentions.

    Best regards,
    Rikard

    March 3, 2021 at 1:03 pm #1285009
    gregcarrollLMG

    Hi

    I want to play button in the middle of the screen to not be white
    I want the play/pause button on the bottom to not be white too
    basically i want to change the colour of the controls so that they show up on a white background. As they are presently white its not intuitive for someone to press play. It jsut looks like there is a white box there when in reality that is just the white back ground of the video

    March 5, 2021 at 5:18 am #1285609
    Rikard

    Hi,

    Thanks for the update. The images which are used in the controls all look to be white, so you would have to add new images if you don’t want them to be white. Otherwise you can try to add backgrounds to them:

    .mejs-overlay-button {
    background: rgba(0,0,0,.33) url(mejs-controls.svg) no-repeat;
    background-position: 0 -39px;
    height: 80px;
    width: 80px;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
    background: rgba(0,0,0,.33);
}

.mejs-button>button {
    background: rgba(0,0,0,.33) url(mejs-controls.svg);
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.