Tutorial: How to display chords in Stage View

Hello there,

I found a (relatively) quick and (relatively) easy way to display chords in stage view. Here’s my step by step guide:

How to display chords in Stage View

1. Prepare your songs

In the songs, you have to insert the chords into the lyrics as follows:
The {c}F{/c}day thou {c}C{/c}gavest {c}Dm{/c}Lord, {c}Bb{/c}is {c}C{/c}ended

2. Configure Formatting Tags

As outlined in the manual, you can configure custom formatting tags by going to “Settings > Formatting Tags”. Click “New”, then enter the following information.
Description: Chords
(or whatever you want to call it)
Tag: c
(has to be the same letter or letter combination as in step 1 in the curly brackets)
Start HTML: <nobr><span class="chord" style="display:none">
End HTML: </span></nobr>
(this will make it so the chords are not seen on the main screen)
(If someone has a better way of achieving the no-break without the deprecated <nobr> tag, I’d be glad to know.)

3. Set up Custom Stage View

Follow the instructions in the manual to set up a custom stage view: Go to the OpenLP Data Folder. Inside this folder, create a folder named “stages”. Inside of that create a folder named “chords”. Then, copy three files (“stage.html”, “stage.css” and “stage.js”) from inside OpenLPs program folder into the folder “chords”.
The last one is the tricky part. On macOS you have to find the OpenLP application (usually in your “Applications” folder), then right-click (or ctrl-click) it and select “Show Package Contents”. Then navigate to “Contents > MacOS > plugins > remotes > html”. There you will find the three files you have to copy over to the new folder. Congratulations, you’re almost done!

4. Configure your Custom Stage View

Now you have to modify all three of the copied files. For that you need a text editor (one that shows you the source code of the files and does not render it as html). First, open “stage.html” and change the following lines
Line 26: <link rel="stylesheet" href="/files/stage.css" />
Line 29: <script type="text/javascript" src="/files/stage.js"></script>
to this
Line 26: <link rel="stylesheet" href="/stage/chords/stage.css" />
Line 29: <script type="text/javascript" src="/stage/chords/stage.js"></script>
Close the file and open “stage.js”. Here you need to replace all instances of
You will find six of them in the lines 63, 70, 103 and 123.
(Honestly, I’m not very good at JavaScript. So I’m not sure if you have to replace ALL instances. It seems to also work if you only do lines 103 and 123. If anyone knows what exactly all the lines are doing I would be very glad if someone could comment on that.)
Finally, go to the file “stage.css” and just add the following lines to the end of the file:
span.chord {
    display: inline-block !important;
    height: 2em;
    width: 0px;
    vertical-align: bottom;
(The !important is not very elegant. I would be interested in having an alternative that also works.)
Then you’re done! Restart OpenLP (just in case) and open the stage view at “http://localhost:4316/stage/chords” (you can replace “localhost” with your IP, see the manual for details on how to set up the Remote server).


Sign In or Register to comment.