iframes are just one of the integration tools you can use to integrate your website with Spektrix. Using CSS is one method you can use to configure your iframes.
In this article, we’ll walk you through what CSS is and how to upload your CSS file to your Spektrix system.
What is CSS?
CSS, or Cascading Style Sheet, is a computer language that adds styling (colours, fonts, formatting, etc.) to websites.
By default, iframes come without any styling.
As part of your website integration, your web developer will need to create the CSS rules which will be applied to your iframes. This is so that when the iframes appear on your website, they match the rest of your website styling, giving a seamless experience.
For example, if your website has green buttons, your web developer can write the code which makes the buttons on your iframes appear the same size and colour.
-
This is an example of the Basket iframe, without any styling.
-
This is an example of the Basket iframe with CSS styling applied. 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.
From time to time, you may need to ask your developer to change your CSS to alter the styling of the iframes to perfect your online journey.
How to upload your CSS
You can access your iframe CSS through the Website Admin Interface within Spektrix.
REMINDER: You’ll need the Web Integration Administrator or General Administrator User Role to be able to access the Website Admin Interface. If you don’t have these permissions, ask the administrator in your organisation
- Navigate to the Website Admin Interface by choosing Website Admin from the Control Pane.
- Click on the Resources tab.
- Upload your CSS file by clicking the Choose file button, finding the file on your computer and then clicking the Upload file button.
WARNING: If the file you upload has the same name as an existing file, the old file will be overwritten.
- To upload multiple files at once, add them to a zip file and upload the zip file.
Domain Specific Config
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 click Save.
The change will be made immediately to your iframes and published to your website.
If you have multiple domains, you can use different stylesheets by repeating this process for each domain. This means that if you use your iframes on multiple websites, each website can apply different CSS rules to the iframes.
You can find out more about adding new named domains in the article Website Admin Interface.
Downloading or Deleting CSS files
If you already have any CSS files on your system you’ll be able to see and download them here.
You can download a CSS file by clicking on the CSS file within the File Name column.
This will open the code in a new tab. Right click and choose Save Page As.
Save the file as a CSS file on your computer.
Applying CSS to more than one website
If you have multiple websites using your Spektrix system, you can set different style sheets as the default for each of the different URLs.
- Select the Add New Config button.
- Enter the domain string of your alternate site. The domain string is the main part of the URL of your website. So if your website address is www.myfestival.com, then enter myfestival.com as the domain string.
- Once you have added your new domain, you can switch between domains in the Domain Specific Config settings.
Further Reading
To continue learning about how to configure iframes, take a look at the following articles: