FAQ: CSS Styling for iFrames

Stephen Cripps
Stephen Cripps
  • Updated

What is it?

CSS - or Cascading Style Sheet - is a computer language that adds styling (colours, fonts, formatting and the like) to websites.

In Spektrix we use it to style the 'iFrames' (our standard booking pages) that probably appear on your website in a few places. 

CSS makes our pages match the rest of your website and ensures that the customer sees a seamless integrated booking path - if your website uses fabulous gold buttons so should your booking pages!

The CSS for your iframes is written and maintained by your website developers - the Spektrix support team have been known to dabble in iframe CSS but generally we leave it to the experts.

From time to time, you may need to ask your developer to change your CSS to alter the styling of the iFrames and perfect your customer's booking journey.

What does CSS do?

The un-styled Spektrix iFrame does not use any CSS, and so looks very plain.

But with the addition of CSS, the iFrame changes significantly and matches the rest of your website.

In this example, you can see that the CSS has altered the font, spacing and colour of how these items are displayed in the basket.

 

Why might I need to change my CSS?

It might be something very simple - perhaps your website used to use one house font and now it uses another - perhaps all the buttons used to be gold and now they're purple. The iframes can all be changed to match.

It's also possible to change the some of the layout of the iframes using CSS - if there's something that you want to tweak in the iframe it's possible that CSS can help.

If you're unsure whether it's the CSS or something else that needs amending please give support a shout.

Where is my CSS?

You can access your iframe CSS through the Website Admin Interface within Spektrix. Here you are able to view the CSS files that are available on your system. 

You or your developer can download and amend the CSS file from this interface.

In order for any new CSS to be pulled through to the site, your website developer must upload the edited CSS file to your Spektrix system's website resources folder.

This is done in the Resources tab.

Your developer will need to select the file they wish to upload, and then click the "Upload file" button to add it to the resources folder. Once it is in the resources folder it can then be used on your website.

To start using the newly uploaded CSS file it must be selected as the Default Style Sheet for the domain, which can be found under Domain Specific Config.

Select the style sheet that you want to have as the default, and the change will be made immediately to your iFrames and published to your website.

 

What if I have multiple websites integrated with the same Spektrix system?

As of Release 34, it is possible to have different style sheets as the default for different URLs that are hosting Spektrix iFrames.

For example, you can now style iFrames hosted on your festival website to match the festival branding, without changing your main site.