Example : Print at home ticket with 1D barcode

This is an example ticket layout for a print at home ticket with a 1D barcode. The result will look like this

Usage:

  1. Go to the Ticket layouts module in the Settings app and create a new ticket layout and ticket layout template
  2. Copy-paste the html and css from below into the new template
  3. Upload the assets in the Assets module in the Settings app

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <link rel="stylesheet" href="normalize.css">
  6 </head>
  7 <body>
  8 <div class="a4-ticket">
  9 
 10     <div class="a4-content">
 11         <div class="event-header">
 12             <div class="event-logo">
 13                 <img src="logo.svg" width="143">
 14             </div>
 15             <div class="event-meta">
 16                 Decon Gent<br>
 17                 Lammerstraat 24<br>
 18                 9000 Gent
 19             </div>
 20         </div>
 21         <div class="event-info">
 22             <p>15 november 2015</p>
 23             <h2>Floating Points/Tycho</h2>
 24         </div>
 25         <div class="ticket-info">
 26 
 27             <div class="barcode-holder">
 28                 <div class="barcode">{{ ticket.barcode_code128 }}</div><br/>
 29                 <div class="barcode-hint">{{ ticket.barcode_text }}</div>
 30             </div>
 31 
 32             <div class="ticket-info-left">
 33                 <p>
 34                     Johan Ronsse<br>
 35                     Korte Leemstraat 118<br>
 36                     2018 - Antwerpen
 37                 </p>
 38             </div>
 39             <div class="ticket-info-right">
 40                 Regular<br>
 41             <span class="ticket-info-price">
 42               <span></span>{{ ticket.price | number_format(2) }}
 43             </span>
 44                 </p>
 45             </div>
 46         </div>
 47         <div class="event-calendar">
 48             <h2>Bekijk de komende maanden ook:</h2>
 49 
 50             <div class="months">
 51                 <div class="month">
 52                     <h3>September</h3>
 53                     <table>
 54                         <tbody>
 55                         <tr>
 56                             <td>15</td>
 57                             <td>Le Peuple de L’Herbe</td>
 58                         </tr>
 59                         <tr>
 60                             <td>17</td>
 61                             <td>Die Antwoord</td>
 62                         </tr>
 63                         <tr>
 64                             <td>18</td>
 65                             <td>Santigold</td>
 66                         </tr>
 67                         <tr>
 68                             <td>22</td>
 69                             <td>Underworld</td>
 70                         </tr>
 71                         <tr>
 72                             <td>23</td>
 73                             <td>Bonobo (live)</td>
 74                         </tr>
 75                         <tr>
 76                             <td>28</td>
 77                             <td>John Hopkins</td>
 78                         </tr>
 79                         </tbody>
 80                     </table>
 81                 </div>
 82                 <div class="month">
 83                     <h3>Oktober</h3>
 84                     <table>
 85                         <tbody>
 86                         <tr>
 87                             <td>15 </td>
 88                             <td>Le Peuple de L’Herbe</td>
 89                         </tr>
 90                         <tr>
 91                             <td>17 </td>
 92                             <td>Die Antwoord</td>
 93                         </tr>
 94                         <tr>
 95                             <td>18 </td>
 96                             <td>Santigold</td>
 97                         </tr>
 98                         <tr>
 99                             <td>22 </td>
100                             <td>Underworld</td>
101                         </tr>
102                         <tr>
103                             <td>23 </td>
104                             <td>Bonobo (live)</td>
105                         </tr>
106                         <tr>
107                             <td>28 </td>
108                             <td>John Hopkins</td>
109                         </tr>
110                         </tbody>
111                     </table>
112                 </div>
113                 <div class="month">
114                     <h3>November</h3>
115                     <table>
116                         <tbody>
117                         <tr>
118                             <td>15</td>
119                             <td>Le Peuple de L’Herbe</td>
120                         </tr>
121                         <tr>
122                             <td>17</td>
123                             <td>Die Antwoord</td>
124                         </tr>
125                         <tr>
126                             <td>18</td>
127                             <td>Santigold</td>
128                         </tr>
129                         <tr>
130                             <td>22</td>
131                             <td>Underworld</td>
132                         </tr>
133                         <tr>
134                             <td>23</td>
135                             <td>Bonobo (live)</td>
136                         </tr>
137                         <tr>
138                             <td>28</td>
139                             <td>John Hopkins</td>
140                         </tr>
141                         </tbody>
142                     </table>
143                 </div>
144             </div>
145         </div>
146         <div class="legal">
147             <p>Dit is uw persoonlijk ticket. Biedt het aan aan de wachtrij voor de ingang. Dit ticket is op naam en kan slechts éénmaal gebruikt worden. Eens de toegang verschaft is kan u het evenement niet meer opnieuw binnenkomen. Trud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
148         </div>
149         <div class="sponsors-holder">
150             <img src="sponsors.png" alt="Sponsors" class="sponsors">
151         </div>
152     </div>
153 </div>
154 </body>
155 </html>


Questions?

We're always happy to help! Send us an e-mail