My Tickets Page CSS¶

This article provides additional guidance on creating a custom My Tickets page. Using TouchPoint Ticketing is a pre-requisite.

See also

Ticketing in TouchPoint

My Tickets Page

To create a custom My Tickets page for a specific event/Involvement, you will create an Ad Hoc Multi Line Extra Value in the Involvement called MyTicketsCSS, with the value being the CSS code that you created. Example with image added:

https://i.tpsdb.com/Dania/CustomTicketPage.jpg

The Extra Value will look similar to this:

https://i.tpsdb.com/Dania/TicketExtraValue.jpg

You can also add code to the file called MyTicketsOptions.CSS located at Administration > Advanced Options > Special Content. CSS code entered here will affect all Ticketing involvements that don’t have specific code entered in the Extra Value field outlined above.

You will need to use your in-house staff with CSS knowledge to customize the page by adding code to the Extra Value. However, we are providing some starter code for you. These are some of the most common attributes that you may want to customize. NOTE: You can use the color name or its HEX code:

Colors:¶

Change the My Tickets Title Color:

h1 {
    color: blue;
}

Change the Event Name (which reflects the Involvement name):

.order > div > label,
.title-container > label {
    color: blue;
}

Change the Background Color of the Event Name:

.order > div:has(>label) {
    background-color: yellow;
}

Add an Image in place of the Event Name:

.order > div:has(>label) {
    background-image: url(https://c4265878.ssl.cf2.rackcdn.com/pr3197.2310241425.Christmas_Eve_Service.jpg);
    background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 260px;
    margin-bottom: 10px;
}
.order > div > label {
    color: transparent;
}

Change the left border color on list view of ticket page:

.my-tickets .seat {
    border-left-color:  blue;
}

Change the color of the Transfer and Release buttons:

.btn-primary {
    background-color: #c00!important;
}
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    background-color: #a00!important;
}

Click on Ticket text¶

Change the color and verbiage of the text at the top that says “Click on ticket to view, transfer or release”:

div.col.text-center:has(label.mt-15.red) {
    color: blue!important;
    font-weight: bold;
    padding-top:15px;
}
div.col.text-center:has(label.mt-15.red):after {
    content: 'Click on ticket to view';
}
label.mt-15.red {
    display: none;
}

General Admission ticket:¶

Remove the row and seat:

.order .seat > div:nth-child(2):not(:has(label)),
.order .seat > div:nth-child(3):not(:has(label)),
.seat-detail .body-container > div:nth-child(3):not(:has(label:nth-child(2))),
.seat-detail .body-container > div:nth-child(4):not(:has(label:nth-child(2))) {
    visibility: hidden;
}

Note

It may be easier to construct all your code at one time and then paste the finished product into the Extra Value field.

New Article

10/25/2023