Web skins

23min

Ticketmatic gives you full control over the look and feel of the websales widgets through webskins.
A webskin consists of a html template and a css stylesheet and allows you to decide on the main structure of the widget pages. 
You can, among others:
decide where the main 'content' block will be placed on the page
add headers, footers, sidebars and images
decide where the wizard navigation buttons (Previous, Next) will be placed
You can style all aspects of the widgets:
build on the structured css that is used in all widgets (Bootstrap based), for easy styling
use custom fonts
use scss variables
The widgets are all fully responsive, so with minimal effort you can create web sales for all devices and screens.
Multilanguage webskins are supported: all text in the webskin is easily translatable.
﻿
Getting started: set up a new web skin
Go to the Web skins module in the Settings app and click on + Add to create a new web skin. A default html template and css will be created.
HTML
<div class="tm-wrapper tm-wrapper-header">
  <div class="tm-wrapper-inner container">
    <h1>{{tm.account.name}}</h1>
  </div>
</div>
<div class="tm-wrapper tm-wrapper-content">
  <div class="tm-wrapper-inner">
    <h2 ng-if="tm.page.title" class="tm-page-title">{{tm.page.title | translate}}</h2>
    <span class="visible-event">
        <h1 class="tm-event-name">{{tm.events[0].name}}</h1>
        <p>{{tm.event[0].startts | date:'medium'}}</p>
    </span>
    <div>{{CONTENT}}</div>
  </div>
</div>
<div class="tm-wrapper tm-wrapper-action-buttons">
  <div class="tm-wrapper-inner">
    <div class="tm-actions-button cf">
      <div class="pull-left">{{PREVIOUS}}</div>
      <div class="pull-right">{{NEXT}}</div>
    </div>
  </div>
</div>
<div class="tm-wrapper tm-wrapper-footer">
  <div class="tm-wrapper-inner container">
    <div class="tm-copyright-notice">&copy; 2015 {{tm.account.name}}</div>
  </div>
</div>
<div class="tm-wrapper tm-wrapper-header">
  <div class="tm-wrapper-inner container">
    <h1>{{tm.account.name}}</h1>
  </div>
</div>
<div class="tm-wrapper tm-wrapper-content">
  <div class="tm-wrapper-inner">
    <h2 ng-if="tm.page.title" class="tm-page-title">{{tm.page.title | translate}}</h2>
    <span class="visible-event">
        <h1 class="tm-event-name">{{tm.events[0].name}}</h1>
        <p>{{tm.event[0].startts | date:'medium'}}</p>
    </span>
    <div>{{CONTENT}}</div>
  </div>
</div>
<div class="tm-wrapper tm-wrapper-action-buttons">
  <div class="tm-wrapper-inner">
    <div class="tm-actions-button cf">
      <div class="pull-left">{{PREVIOUS}}</div>
      <div class="pull-right">{{NEXT}}</div>
    </div>
  </div>
</div>
<div class="tm-wrapper tm-wrapper-footer">
  <div class="tm-wrapper-inner container">
    <div class="tm-copyright-notice">&copy; 2015 {{tm.account.name}}</div>
  </div>
</div>
﻿
CSS
// Override variables here:

// The line below should always be present:
@import "style";

// Override css classes here:
// Override variables here:

// The line below should always be present:
@import "style";

// Override css classes here:
﻿
﻿
﻿
This default webskin is fully functional and is a good base to start customizing the css and html.
Preview and testing environment
While you are editing a web skin, you will see the Preview pane on the right displaying your changes in realtime. You can select the page size to see how your web skin behaves on tablet and phone screens.
Dimensions
﻿
You can select several screens to check how your web skin looks for the different widgets and pages. The pages you find here are generated from an actual test account, so the generated html is identical to the html generated in the actual websales. But, as the websales widgets are highly dynamic and the content in your account will be different than the content from the test account, the preview pages can never show 100% of the use cases. So, while the preview will give you a good indication of how your web skin will look, it is advised to test your web skin with an actual websales widget before putting it in production.
Screens
﻿
﻿
Customizing the CSS
In the css, you will see a single @import "style"; statement. This statement is required and will load the default variables and css styles. You will notice that the styling is based on Bootstrap, so if you are familiar with this, you should be able to get up and running quickly.
There are 2 main ways to customize the css:
﻿Define scss variables﻿﻿
﻿Override css classes﻿﻿
1. Define scss variables
An easy way to customize a web skin is by defining values for (part of) the scss variables that are used throughout the standard stylesheets. Bootstrap defines a list of variables that can be used, for example $brand-primary or $link-color, and Ticketmatic adds some Ticketmatic-specific variables like $tm-header-background.
Try the example css below:
CSS
/* Color definitions
   ========================================================================== */

$blue-lighter: #BCD6EA;
$blue-lightest: #ECF3F7;
$blue-light: #85B5D9;
$blue: #09B3DF;
$red: #D54026;
$red-light: #EC9F92;
$brown: #60220E;
$white: #FFF;

/* Bootstrap variable overrides
   ========================================================================== */

$table-bg-accent: lighten($blue-light,20%);
$brand-primary: $red;
$well-bg: mix($blue-light,$blue-lightest,20%);
$well-border: mix($blue-light,$blue-lightest,20%);
$table-border-color: $blue-light;

/* Ticketmatic specific variables
   ========================================================================== */

$tm-header-background: $white;
$tm-content-background: $blue-lightest;
$tm-action-buttons-background: $blue-light;
$tm-btn-previous: #FFF;
$tm-btn-next: #FFF;
$tm-tfoothead-top-border: $table-border-color;
$tm-tfoothead-border: $table-border-color;
$tm-cart-total-top-border: darken($table-border-color, 20%);
$addtickets-remove-ticket-count: true;
// Seatingplan specific
$tm-seat-selected: #d9534f !default;
$tm-seat-available: #FFF !default;
$tm-seat-available-stroke: #8C96A5 !default;
$tm-seat-unavailable: #8C96A5 !default;
$tm-seat-inactive: lighten($tm-seat-unavailable, 20%) !default;

@import "style";
/* Color definitions
   ========================================================================== */

$blue-lighter: #BCD6EA;
$blue-lightest: #ECF3F7;
$blue-light: #85B5D9;
$blue: #09B3DF;
$red: #D54026;
$red-light: #EC9F92;
$brown: #60220E;
$white: #FFF;

/* Bootstrap variable overrides
   ========================================================================== */

$table-bg-accent: lighten($blue-light,20%);
$brand-primary: $red;
$well-bg: mix($blue-light,$blue-lightest,20%);
$well-border: mix($blue-light,$blue-lightest,20%);
$table-border-color: $blue-light;

/* Ticketmatic specific variables
   ========================================================================== */

$tm-header-background: $white;
$tm-content-background: $blue-lightest;
$tm-action-buttons-background: $blue-light;
$tm-btn-previous: #FFF;
$tm-btn-next: #FFF;
$tm-tfoothead-top-border: $table-border-color;
$tm-tfoothead-border: $table-border-color;
$tm-cart-total-top-border: darken($table-border-color, 20%);
$addtickets-remove-ticket-count: true;
// Seatingplan specific
$tm-seat-selected: #d9534f !default;
$tm-seat-available: #FFF !default;
$tm-seat-available-stroke: #8C96A5 !default;
$tm-seat-unavailable: #8C96A5 !default;
$tm-seat-inactive: lighten($tm-seat-unavailable, 20%) !default;

@import "style";
﻿
You see that we first define some skin-specific variables representing colors.
These variables are then used to overrule the standard values:
CSS
$brand-primary: $red;
$brand-primary: $red;
﻿
will set the brand-primary color to $red or #D54026.
You can also use SassScript in the css. For example to modify a color using the lighten function:
CSS
$table-bg-accent: lighten($blue-light,20%);
$table-bg-accent: lighten($blue-light,20%);
﻿
﻿More info on SassScript functions﻿
There is a long list of Bootstrap variables that can be overruled. Take a look at the Bootstrap Customizer for an overview of the available variables﻿
﻿
Also some Ticketmatic-specific variables are set. You can recognize these by the tm--prefix. These are the Ticketmatic-specific variables:
Variable
Description
$tm-header-background
background color for the header
$tm-action-buttons-background
background color for the content block
$tm-action-buttons-background
background color for the action buttons
$tm-btn-previous
color for Previous button
$tm-cart-total-top-border
﻿
$tm-tfoothead-top-border
﻿
$tm-tfoothead-border
﻿
$addtickets-remove-ticket-count
boolean value indicating whether the ticket count should be shown in the addtickets widget
$tm-seat-available
seatingplan specific, color for a seat that is available
$tm-seat-available-stroke
seatingplan specific, stroke color for a seat that is available
$tm-seat-unavailable
seatingplan specific, color for a seat that is unavailable
$tm-seat-selected
seatingplan specific, color for a seat that is selected
$tm-seat-inactive
seatingplan specific, color for a seat that is inactive
$tm-authentication-background
authentication widget background color
$tm-authentication-logo
authentication widget logo
Note that you should include the variables you want to customize before the @import "style"; command.
﻿
2. Override the css classes
To further customize the web skin, you can override the css classes used in the html. The html used in the widgets is based on Bootstrap and we try to apply the Bootstrap conventions as much as possible. In addition, we added a list of Ticketmatic-specific semantic css classes to the widgets.
For example:
CSS
body {
    background: #c1d9ed url("/images/bg-grad.jpg") repeat top center;
}

.tm-wrapper-header {
  background: url(/images/shine.png") no-repeat top center;
}
body {
    background: #c1d9ed url("/images/bg-grad.jpg") repeat top center;
}

.tm-wrapper-header {
  background: url(/images/shine.png") no-repeat top center;
}
﻿
This css will set a background image for the body, and an additional background image for the tm-wrapper-header. You can use the Developer Tools of your favourite browser to inspect the html in the Preview pane to find out the css classes used in the widgets. 
Note that you should include the classes you want to customize after the @import "style"; command.
﻿
﻿
Customizing the html
The html in a web skin contains all html structure inside the body tag, and can completely be customized.
You will notice a few placeholders in upper case: {{CONTENT}}, {{PREVIOUS}} and {{NEXT}}. These 3 placeholders should always be included in the html template. By wrapping them in divs, you can position and style them any way you like.
{{CONTENT}} will be replaced by the actual widget content
{{PREVIOUS}} will be replaced by the wizard button Previous
{{NEXT}} will be replaced by the wizard button Next
You will also notice other (lower case) placeholders like {{tm.account.name}} or {{tm.page.title}}. These placeholders are interpreted at run-time in the browser and are actually regular AngularJS expressions. These placeholders are optional and can be used by use to display dynamic information about the account, order or event in the skin.
We provide the following placeholders:
Placeholder
Description
tm.account
tm.account.id
Account id
tm.account.name
Account name
tm.page
tm.page.name
the name of the page (= the identification)
tm.page.title
the language sensitive name of the current page
tm.page.label
a one-word label for the current page (useful for titles)
tm.events
tm.events[x].name
Event name
tm.events[x].subtitle
Event subtitle
tm.events[x].startts
Event startdate
tm.events[x].endts
Event enddate
tm.events[x].locationname
Event location
tm.events[x].webremark
Event webremark
tm.events[x].c_customfield1
All event custom fields are also available
tm.order
tm.order.nbroftickets
Number of tickets in the order
tm.order.totalamount
Total amount for the order
Other
tm.year
the current year (useful for copyright notices)
tm.CURRENCY_SYMBOL
The currency symbol used. Use this with a currency filter to get correct monetary formatting
tm.returnurl
A signed returnurl containing the orderid and contactid (if specified). The reason for the return is skin
Placeholders often used in combination with AngularJS filters or directives. Some examples:
Text
//put the event name in uppercase
{{ tm.events[0].name | uppercase }}
//put the event name in uppercase
{{ tm.events[0].name | uppercase }}
﻿
You can use these elements when formatting a date:
Text
//format a date
{{ tm.events[0].startts | date:'EEE dd/MM - HH:ss'}}
//format a date
{{ tm.events[0].startts | date:'EEE dd/MM - HH:ss'}}
﻿
The AngularJS directive ngIf can for example be used to display the subtitle only when it is filled in:
Text
<h2 ng-if="tm.events[0].subtitle">{{ tm.events[0].subtitle }}</h2>
<h2 ng-if="tm.events[0].subtitle">{{ tm.events[0].subtitle }}</h2>
﻿
Text
//Display the total amount in the correct currency
{{ tm.order.totalamount | currency:tm.CURRENCY_SYMBOL }}
//Display the total amount in the correct currency
{{ tm.order.totalamount | currency:tm.CURRENCY_SYMBOL }}
﻿
﻿More info on AngularJS expressions.
Working with images
You can use images in the html. You can link to an external url (should always be https) or upload the image in the Assets module in the Settings app and link internally.
If an image with the name logo.png is uploaded in Assets in the images folder it can be loaded in the webskin with the following html:
Text
<img src="images/logo.png"/>
<img src="images/logo.png"/>
﻿
Using Ticketmatic-specific css classes in the html
Ticketmatic provides a few custom css classes that can be used in the html.
Class
Description
tm-visible-event 
if used on a div, the content inside the div will only be visible if an event is active for the current wizard
tm-hidden-event
if used on a div, the content inside the div will only be visible if an event is not active for the current wizard
﻿
﻿
Translating the web skin
Ticketmatic supports fully mulitlingual web skins. Click on translate in the top menu to access the translation module. You will see that all default web skin strings are listed and can be translated or customised.
You can also translate text that you added yourself in the web skin. You should annotate it with a translate attribute. For example:
HTML
<p translate>Text to be translated.</p>
<p translate>Text to be translated.</p>
﻿
And in order to make dynamic placeholders translatable, use the translate filter:
Text
{{tm.page.title | translate}}
{{tm.page.title | translate}}
﻿
﻿
Web skin settings
You can modify web skin settings on the Settings tab:
Setting
Description
Favicon
The favicon to be used for the wizard. You should refer to an icon in the assets here.
Page title
The page title to be used for the wizard. You can use dynamic placeholders in the page title, for example: {{tm.page.label }} - {{tm.account.name}}
Google Tag Manager ID
An id (formatted like GTM-XXXXXX) that activates a Google Tag Manager container on websales. More info on Google Tag Manager﻿﻿
Typekit ID
the id of your Typekit account (if any). This enables you to use custom fonts
Facebook Pixel ID
The Facebook Pixel ID for user tracking.
﻿

Variable	Description
$tm-header-background	background color for the header
$tm-action-buttons-background	background color for the content block
$tm-action-buttons-background	background color for the action buttons
$tm-btn-previous	color for Previous button
$tm-cart-total-top-border
$tm-tfoothead-top-border
$tm-tfoothead-border
$addtickets-remove-ticket-count	boolean value indicating whether the ticket count should be shown in the addtickets widget
$tm-seat-available	seatingplan specific, color for a seat that is available
$tm-seat-available-stroke	seatingplan specific, stroke color for a seat that is available
$tm-seat-unavailable	seatingplan specific, color for a seat that is unavailable
$tm-seat-selected	seatingplan specific, color for a seat that is selected
$tm-seat-inactive	seatingplan specific, color for a seat that is inactive
$tm-authentication-background	authentication widget background color
$tm-authentication-logo	authentication widget logo

Placeholder	Description
tm.account
tm.account.id	Account id
tm.account.name	Account name
tm.page
tm.page.name	the name of the page (= the identification)
tm.page.title	the language sensitive name of the current page
tm.page.label	a one-word label for the current page (useful for titles)
tm.events
tm.events[x].name	Event name
tm.events[x].subtitle	Event subtitle
tm.events[x].startts	Event startdate
tm.events[x].endts	Event enddate
tm.events[x].locationname	Event location
tm.events[x].webremark	Event webremark
tm.events[x].c_customfield1	All event custom fields are also available
tm.order
tm.order.nbroftickets	Number of tickets in the order
tm.order.totalamount	Total amount for the order
Other
tm.year	the current year (useful for copyright notices)
tm.CURRENCY_SYMBOL	The currency symbol used. Use this with a currency filter to get correct monetary formatting
tm.returnurl	A signed returnurl containing the orderid and contactid (if specified). The reason for the return is skin

Class	Description
tm-visible-event	if used on a div, the content inside the div will only be visible if an event is active for the current wizard
tm-hidden-event	if used on a div, the content inside the div will only be visible if an event is not active for the current wizard

Setting	Description
Favicon	The favicon to be used for the wizard. You should refer to an icon in the assets here.
Page title	The page title to be used for the wizard. You can use dynamic placeholders in the page title, for example: {{tm.page.label }} - {{tm.account.name}}
Google Tag Manager ID	An id (formatted like GTM-XXXXXX) that activates a Google Tag Manager container on websales. More info on Google Tag Manager
Typekit ID	the id of your Typekit account (if any). This enables you to use custom fonts
Facebook Pixel ID	The Facebook Pixel ID for user tracking.

Ticket delivery

Google Tag Manager