Does anyone know if there is a way to change the icon on the Closed Caption button in Storyline 3? The client in which I am building for requires the closed caption button to display a CC, and the default button on the Storyline player is just an image of a Caption box.
I'll share that I needed a better icon for captions than Articulate was providing, so I swapped out the icon myself. If you want to try it, it's a matter of editing the following two files (I'm using the latest version of Storyline 360):
Use an HTML editor (I prefer Sublime Text) and search for "M14.8517422,14". You should find one instance of that in each of those files. You'll find that text as part of an SVG path, which is essentially the coordinates for making a vector graphic. You'll need to replace everything in that string (between the double quotation marks) with new coordinates for a CC icon. Here's the path I'm using for the "CC" icon:
"M 1.5 3 C 0.675781 3 0 3.675781 0 4.5 L 0 11.5 C 0 12.324219 0.675781 13 1.5 13 L 13.5 13 C 14.324219 13 15 12.324219 15 11.5 L 15 4.5 C 15 3.675781 14.324219 3 13.5 3 Z M 1.5 4 L 13.5 4 C 13.78125 4 14 4.21875 14 4.5 L 14 11.5 C 14 11.78125 13.78125 12 13.5 12 L 1.5 12 C 1.21875 12 1 11.78125 1 11.5 L 1 4.5 C 1 4.21875 1.21875 4 1.5 4 Z M 5.5 5 C 4.125 5 3 6.125 3 7.5 L 3 8.5 C 3 9.875 4.125 11 5.5 11 L 7 11 L 7 10 L 5.5 10 C 4.664063 10 4 9.335938 4 8.5 L 4 7.5 C 4 6.664063 4.664063 6 5.5 6 L 7 6 L 7 5 Z M 10.5 5 C 9.125 5 8 6.125 8 7.5 L 8 8.5 C 8 9.875 9.125 11 10.5 11 L 12 11 L 12 10 L 10.5 10 C 9.664063 10 9 9.335938 9 8.5 L 9 7.5 C 9 6.664063 9.664063 6 10.5 6 L 12 6 L 12 5 Z"
To be clear, that's replacing this path (the old icon):
I'm attaching a screen cap of the results. Bear in mind, this change happens after the course is published and would need to be applied each time the course is published. The good news is that you don't need to republish the course to apply it.
26 Replies
Hi, all.
I'll share that I needed a better icon for captions than Articulate was providing, so I swapped out the icon myself. If you want to try it, it's a matter of editing the following two files (I'm using the latest version of Storyline 360):
./html5/lib/scripts/frame.mobile.min.js
./html5/lib/scripts/frame.desktop.min.js
Use an HTML editor (I prefer Sublime Text) and search for "M14.8517422,14". You should find one instance of that in each of those files. You'll find that text as part of an SVG path, which is essentially the coordinates for making a vector graphic. You'll need to replace everything in that string (between the double quotation marks) with new coordinates for a CC icon. Here's the path I'm using for the "CC" icon:
"M 1.5 3 C 0.675781 3 0 3.675781 0 4.5 L 0 11.5 C 0 12.324219 0.675781 13 1.5 13 L 13.5 13 C 14.324219 13 15 12.324219 15 11.5 L 15 4.5 C 15 3.675781 14.324219 3 13.5 3 Z M 1.5 4 L 13.5 4 C 13.78125 4 14 4.21875 14 4.5 L 14 11.5 C 14 11.78125 13.78125 12 13.5 12 L 1.5 12 C 1.21875 12 1 11.78125 1 11.5 L 1 4.5 C 1 4.21875 1.21875 4 1.5 4 Z M 5.5 5 C 4.125 5 3 6.125 3 7.5 L 3 8.5 C 3 9.875 4.125 11 5.5 11 L 7 11 L 7 10 L 5.5 10 C 4.664063 10 4 9.335938 4 8.5 L 4 7.5 C 4 6.664063 4.664063 6 5.5 6 L 7 6 L 7 5 Z M 10.5 5 C 9.125 5 8 6.125 8 7.5 L 8 8.5 C 8 9.875 9.125 11 10.5 11 L 12 11 L 12 10 L 10.5 10 C 9.664063 10 9 9.335938 9 8.5 L 9 7.5 C 9 6.664063 9.664063 6 10.5 6 L 12 6 L 12 5 Z"
To be clear, that's replacing this path (the old icon):
"M14.8517422,14 L20.008845,14 C21.1103261,14 22,13.1019465 22,11.9941413 L22,2.00585866 C22,0.897060126 21.1085295,0 20.008845,0 L1.991155,0 C0.889673948,0 0,0.898053512 0,2.00585866 L0,11.9941413 C0,13.1029399 0.891470458,14 1.991155,14 L8.09084766,14 L11.4712949,17.3804472 L14.8517422,14 Z M3,4 L13,4 L13,6 L3,6 L3,4 Z M14,4 L19,4 L19,6 L14,6 L14,4 Z M19,8 L8,8 L8,10 L19,10 L19,8 Z M7,8 L3,8 L3,10 L7,10 L7,8 Z"
I'm attaching a screen cap of the results. Bear in mind, this change happens after the course is published and would need to be applied each time the course is published. The good news is that you don't need to republish the course to apply it.