Remote Interface

Most of the time we are using the remote interface to present lyrics to the VMix input source as a web browser. Recently released version 3.0 Live view URL is showing the entire desktop screen.

We're excepting that the entire only Live view of OpenLP needs to display, as this feature is working fine on V2.4.6.

And Fade effect is not reflected in the remote interface, which we see in the Live View.


  • Use stage url: /stage

    Add following custom CSS (taken for OBS browser source):

    body { margin: 0px auto; padding:0; overflow: hidden; }
    .overlay{background:#00FF00; min-height: 100vh;justify-content:flex-end;flex-direction:column}
    .overlay-content {flex:0}
    .container {margin:0}
    .overlay .slide {text-align:center;
      font-size: 24pt;
      line-height: 1.1;
      font-weight: 700;
      color: white;
      text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.7);
    .nextSlides, .toolbar, .overlay-content .tags {display:none}

  • Can you walk me through this change please? I have added my custom stages and it will no longer open. If I add to the stage view url, it says the url is not found. (this one works and is the default in the openlp) (is my custom and will no longer open as it is stating that my url can not be found. help! I have been able to use this in vmix up until I upgraded. I sure would appreciate any help you can give me.

  • Hi, no custom stages support in openlp 3.0. Sorry, i didn't know vmix does not support custom css in browser source.

  • Custom stages does work in openlp 3, we are using it for lower 3rds words overlay in OBS, but you have to make a couple of changes in your code from v2.

    First thing is you have to manually download JQuery.min.js into your custom stage folder as it doesn't seem to be part of the OpenLP installation any more

    Then at the top of your stage.html where the js files are included you need to modify the src= so it is just the filename with no path (in v2 this had the path to the custom stage folder)


     <meta charset="utf-8" />


     <link rel="stylesheet" href="stage.css" />

     <link rel="shortcut icon" type="image/x-icon" href="/files/images/favicon.ico">

     <script type="text/javascript" src="jquery.min.js"></script>

     <script type="text/javascript" src="stage.js"></script>


  • edited February 18


    @congoblue & @jednou Based on his reply I achieved a custom stage view like the pro-presenter view.

    Based on this documentation

    With just some tweaks we can get the final output as we like.

    Here is the Github Link.


    Thanks for the input,


  • Does the above coding enable text fade on stage view within web browser?

Sign In or Register to comment.