![]() In the above syntax, all things will be going to same additionally, we can specify height and width in pixels format, defining them as. ![]() It is also possible to give some specific height and width to our Iframe in pixels format as follows:.Src attributes that are used to define the URL of the inline frame page will be included. Here is a tag where HTML iframes will be defined.Now we will see how exactly Iframe is going to use:.When a client uses wiki text, we will wrap the text in specific HTML elements or classes to allow you to easily style.īelow we list out the available options and how they will render in HTML inside our Iframes. 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. 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 We allow clients to add customer facing copy and messaging in a variety of locations across the system. This also allows you some control of how the card entry elements are displayed to the end user. 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 is our secure payments iframe, allowing customers to input their card details. When styling the checkout and myaccount iframe you may notice a nested iframe pointing towards. 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.Īs 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. 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. Using the standard booking flows of the Iframes is a good way to structure the work of building out your stylesheet. This will show you which style classes are being used and where. We advise beginning the styling process by inspecting the source code within each Iframe. When that is working, move on to the styling. 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. 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. How to Approach Styling the Spektrix Iframes ![]() This would allow for a toggle on the parent site to opt for which css to use. 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. com/clientname/website/eventlist.aspx?stylesheet=alternate-stylesheet.css 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. The default stylesheet can then be set at domain level using the Domain Specific Config. images) to our servers using the Website Admin interface. To apply styles to the Spektrix pages, first upload stylesheets and any accompanying resources (e.g. It is not possible to add your own custom classes to the elements in iframes. 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. You will notice, however, that many of the html elements also have id values. Most of the content from Spektrix comes with CSS classes defined on the html elements. 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. The look and feel of the pages served from the Spektrix system can be tailored to fit seamlessly with almost any website. If you have implemented a custom domain for your Integration, please replace with your chosen subdomain. In the following article, links will be referenced as originating from.
0 Comments
Leave a Reply. |