About InstantEncore

InstantEncore is the leading provider of mobile solutions to performing arts organizations around the globe. Our partners use the InstantEncore platform to power their mobile apps, enhance live experiences and create deeper relationships with their audiences. InstantEncore partners include Chamber Music Society of Lincoln Center, Curtis Institute of Music and Dallas Summer Musicals. With Tessitura™ Network, Inc., our partners include the New York Philharmonic, The Shaw Festival and Santa Fe Opera.

Proud member of

  • Home
  • /
  • Featured App
  • /
  • The Royal Scottish National Orchestra Makes Advanced Customization Easy

The Royal Scottish National Orchestra Makes Advanced Customization Easy

InstantEncore is designed to require just a little setup work to make a great looking app. But sometimes you need to make modifications that go beyond these normal steps to give your app something extra that makes it unique.

The Royal Scottish National Orchestra has done just that. We’re going to take a look at a few advanced customizations they made which anyone can do.

But first…

Custom CSS

While the Custom CSS feature is a “use at your own risk” area of the control panel, there are plenty of simple changes that anyone can make. Here are a few general tips for working with CSS:

  • If you don’t know anything about HTML or CSS, we recommend the great resources at w3schools.com to get you started.
  • Modern web browsers such as Chrome or Firefox give you the ability to right-click on an element of a website and “Inspect” it. This shows what CSS has been applied to the HTML, which can help you decide what custom CSS to set.
  • Most importantly, Don’t be afraid to try new things. Use “Test Mode” (the last option on the left side of your Control Panel) to try CSS changes without them affecting your live app.

Now on to the good stuff!

Slideshow Changes

The RSNO decided that they wanted to use the Slideshow as their Home Tab. But instead of using the title and button text overlays that our system provides, they wanted a bit more freedom to design text information directly into their Slideshow graphics.

They used a handy trick that lets them easily hide those overlays:

.home-featured-tab .featured-item .x-html{
display: none;

Using their web browser’s inspect tool, they identified .home-featured-tab .featured-item .x-html as the CSS classes that affected the overlays. Setting these classes to display: none; hides them from view, leaving just the slideshow graphic.

NOTE: The final slide in the RSNO’s Slideshow doesn’t link through to any content. It is a convenient instructional aid that shows users where to go to find more information – a very cool idea!

Modifying Standard Text

Originally designed for a mostly American audience, static text in the app follows the rules of American English. For instance, on event listings there is a section of information called “Program”. As most of the RSNO users are used to British English, they wanted to change this word to “Programme” instead.

They were able to modify the text using some less common CSS selectors.

[class="section-header"]:after {
content: "me";

This is a little more complicated than the Slideshow example. What happens here is that the content me will get injected after the content inside of the section-header class, which is the word “Program”. This ends up looking like “Programme”, providing a region specific feel. This won’t work for everything (it wouldn’t be possible to inject characters in the middle of some existing content), but there are still ways you can use this to your advantage.

Instead of adding “me”, try adding ” Details” or ” Information” so that you end up with “Program Details” or “Program Information”. It is important to include the leading space so that the content appears as two separate words.

You could even take it one step further and change after to before and set the content to “Today’s ” which would give you “Today’s Program” (this time with a trailing space to display it as two words).

NOTE: As with all CSS changes, always review your app and make sure there were no unintended changes. The CSS class you just styled might also be in use somewhere else.

Telephone Links

We’ve covered this method before in our Call Link How-to video, but this is a great real world application.

The RSNO has different box office numbers for different areas. So, it wouldn’t make sense to provide a single box office number in the app’s Basic Settings (they’ve left this field blank). Instead, they created a custom HTML Tab that includes all of the box office numbers, labeled by what area they serve.

Aberdeen <a href="tel:01224641122">01224 641 122</a>

This simple telephone link format turns an otherwise non-interactive plain text phone number into a link that users can easily tap, opening the number in their device’s phone call app. This gives users direct, easy access to their local RSNO box office.

Check it out!

Click here to download the Royal Scottish National Orchestra’s App

Leave a Reply