blog.instantencore.com
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=