Styling the Iframes
In the following article, links will be referenced as originating from system.spektrix.com. If you have implemented a custom domain for your Integration, please replace system.spektrix.com with your chosen subdomain.
The look and feel of the pages served from the Spektrix system can be tailored to fit seamlessly with almost any website. The use of tables has been minimised and a comprehensive set of CSS classes have been included in each page to allow as much freedom as possible to web designers.
CSS Classes and ID Values
Most of the content from Spektrix comes with CSS classes defined on the html elements. You will notice, however, that many of the html elements also have id values. We do not recommend referencing elements using the id properties for styling purposes as these are auto-generated and may change in future releases of the system.
It is not possible to add your own custom classes to the elements in iframes.
Setting the stylesheet
To apply styles to the Spektrix pages, first upload stylesheets and any accompanying resources (e.g. images) to our servers using the Website Admin interface. The default stylesheet can then be set at domain level using the Domain Specific Config.
The system allows multiple stylesheets to be uploaded in resources and a stylesheet can also be applied to an individual Iframe using the ‘Stylesheet’ query string parameter in the source of the Iframe. For example:
https://system.spektrix.com/clientname/website/eventlist.aspx?stylesheet=alternate-stylesheet.css
This functionality can also be used to address accessibility concerns, for example, by allowing a large font stylesheet could be uploaded as well as the standard one. This would allow for a toggle on the parent site to opt for which css to use.
How to Approach Styling the Spektrix Iframes
Please note that the Express Checkout uses a more up-to-date CSS Architecture, more details of which can be found in our guide on Styling the Express Checkout.
The easiest way to begin a Spektrix integration is to embed the Iframes and make sure that all the basic linking functionality works as you want it to, as covered in the Quick Start guide. When that is working, move on to the styling.
We advise beginning the styling process by inspecting the source code within each Iframe. This will show you which style classes are being used and where.
Using the standard booking flows of the Iframes is a good way to structure the work of building out your stylesheet. You may find it easier to start with a more straight forward customer journey, such as the donation or membership flow, for your first pass.
Many of the styles you apply in these more simple flows will then cascade into more complicated flows such as the ticket purchase path, allowing your focus to shift naturally to the more involved styling required for unique features such as seating plans.
As you work through each flow and become more familiar with the way the Iframes work, it should be clear how to approach making the Iframes blend in with the website.
Payment Iframe
When styling the checkout and myaccount iframe you may notice a nested iframe pointing towards payments.spektrix.com. This is our secure payments iframe, allowing customers to input their card details.
This iframe will also accept styling added into the CSS file you use to style the rest of our Iframe (see above), allowing you to keep all styling in one single location. This also allows you some control of how the card entry elements are displayed to the end user.
Styling Wiki Text
We allow clients to add customer facing copy and messaging in a variety of locations across the system. This text can often be written using our Wiki Text builder, giving clients the option to set certain lines and words with additional formatting options using a simple markup language
The stylesheet used in the Spektrix integration should be built to accommodate the various options available via the Wiki Text editor to ensure these render correctly inside the iframe journey. When a client uses wiki text, we will wrap the text in specific HTML elements or classes to allow you to easily style.
Below we list out the available options and how they will render in HTML inside our Iframes.
Wiki Text Options
| Function | Wiki Markup Example | Visible in Iframe Source |
|---|---|---|
| Main Title | +Main title | <h1>Main title</h1> |
| Subtitle | ++Subtitle | <h2>Subtitle</h2> |
| Bold Text | *Bold text* | <span class="BoldText">Bold text</span> |
| Italic Text | /Italic text/ | <span class="ItalicText">Italic text</span><span><br/></span> |
| Bold Italic | /*Bold italic*/ | <span class="ItalicText"><span class="BoldText">Bold italic</span></span> |
| Underlined | _Underlined_ | <span class="UnderlineText">Underlined</span> |
| Bulleted List | -first Item -second item | <ul><li>first item</li><li>second item etc<li><ul> |
| Numbered List | -1first Item -1second item | <ol><li>first item</li><li>second item etc</li></ol> |
| Link: Same Page | #(http://LinkUrl.com)Link Text# | <a target="_top" href="http://LinkUrl.com">Link Text</a> |
| Link: New Window | #(newWindow=http://LinkUrl.com)Link Text# | <a target="_blank" href="http://LinkUrl.com">Link Text</a> |
| Link: Inside Iframe | #(insideIframe=http://LinkUrl.com)Link Text# | [Link Text](http://LinkUrl.com) |
| Show Image | $ShowImage$ | <img src="https://image.link" alt="[image]" /> |
| Show Thumbnail | $ShowThumbnail$ | <img src="https://thumbnailimage.link" alt="[image]" /> |
| Table | [-- >first cell >> second cell -- >first cell >> second cell --] | <table class=" BorderOn" border="0"> <tr> <td align="left" colspan="1">first cell </td> <td align="left">second cell<span><br/></span></td> </tr> <tr> <td align="left" colspan="1">first cell </td> <td align="left">second cell<span><br/></span></td> </tr> </table> |