Skip to main content

How to customize Regiondo Ticketshop or Booking Widget with Custom CSS?

Kay Endörfer
  • Updated
Note
The Calendar Widget cannot be customized trough Regiondo CSS since it's loaded as a <div>.
Supplier can customize it inside it's personal source code inside the <style> tag.
 

1. Customizing via Shop Editor

Regiondo Ticketshop or Booking Widget is easily customizable via the Shop Editor.

You may want to take customization a little further by changing the color of specific elements, using different fonts, hiding elements or inserting icons. This can be reached using Custom CSS.
 

2. Customizing via Custom CSS

Note
Basic knowledge of CSS is required. We suggest hiring an Expert if you are not comfortable proceeding with the following guide. Regiondo does not offer technical assistance with CSS customization, and cannot guarantee that a Custom CSS will be compatible with all future feature enhancements and appearance improvements. Therefore, be careful to test compatibility of your Custom CSS with Regiondo releases.

We may, but have no obligation to, remove content that we determine in our sole discretion are unlawful, offensive, threatening, libelous, defamatory, obscene or otherwise objectionable or violates any party’s intellectual property.
 
Navigate to Shop Configuration > Integration Website > Custom CSS
 
 
On this page you can see:

Select Language - select box, which allows you to select one of your stores, where Custom CSS will be applied. Default "Global" value means that CSS will output for all stores.

CSS Code - textarea, where you can provide css code to overwrite default regiondo css rules, overwrite css settings from Shop Editor, or to make additional changes to specific elements inside Regiondo iframe.
Note
CSS Code field has embedded CSS syntax highlighter, which can be very helpful to identify possible issues or errors in CSS code. Any HTML tags are not allowed, and will be stripped out before output inside Ticketshop/Widget. If you do load images or additional content, it must be served via https://
For example, if you want to replace the primary font-family and adjust font size in ticketshop and widget globally, Select "Global" from select box, and simply include your font and specify its font name as shown below:
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body,
button,
.product-shop,
.product-shop select {
    font-family:'Open Sans', Helvetica, Arial, sans-serif;
}
 
Result:
 
Here we are using "Open Sans" font from Google's Font Directory (https://fonts.google.com/), where you can find the one that suits best for your website design. Or you can use @font-face to specify your own font. The font itself can be hosted on your site by uploading it to your webspace or may be hosted anywhere else. The URL must be correct in the file path of the @font-face declaration:
 
@font-face {
    font-family:'Custom Font';
    src:url(https://www.your-website.com/fonts/Custom-Font.otf);
    font-weight:400;
}
body,
button,
.product-shop,
.product-shop select {
    font-family:'Custom Font', Helvetica, Arial, sans-serif;
}
Or if you aim for website loading speed performance, you may want to use just default font stack. Adding Helvetica here first in this stack for iOS devices to use it over Arial font, as follows:
 
body,
button,
.product-shop,
.product-shop select {
    font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
 
Selecting Global or switching to one of your stores allows you easily specify different font per each store.

 

3. How to locate CSS you want to change

To locate the CSS you want to change, you can use the "Inspect/Inspect Element". If you have a webkit browser such as Chrome, Firefox, Safari or Opera, Inspect Element is available from the context menu and will popup a panel in your browser showing you the markup on the left and styles on the right. Note that this tool is only available in Safari if you enable the developer tools. IE users must have version 11 or higher.
 
The inspector will help you identify the selector or original style containing the properties you want to change. Once you've identified the CSS you want to change, copy it into the custom CSS area and adjust it however you'd like.

For example, we want to hide an element in Booking Widget. Right click on an element, select "Inspect", locate it in page HTML code, and look for existing selectors for this element (or we can create new):
 
 
Copy ".booking-content .tab-info" selector to Custom CSS area, and set its display property to none:
 
.booking-content .tab-info { display:none; }
 
Result:
 
This will hide the "tab-info" element in both Ticket and Gift tabs of widget. If we want to hide it only for Ticket tab, then we need to overwrite its display property for Gift tab, as they both have the same class name:
 
.booking-content .tab-info { display:none; }
.booking-content .gift-container .tab-info { display:block; }
Once we save changes, with display property set to "block" for .gift-container .tab-info, it will be hidden only for Ticket tab, and shown on Gift tab. This is a simple example how widget can be customized by overwriting its preceding CSS rules.
 

4. Testing Changes

You can just edit and preview specific styles in the Brower Inspector sidebar by clicking on the property value, clicking or double-clicking the blank space at the end of the last property to add a new one. This also helps to grab the correct style selector.

Once you save changes on Custom CSS page it will take effect immediately, and will be reflected on your Ticketshop and Booking widget. Be careful changing CSS rules for global tags, and avoid such cases when white colored text may appear on white background.

5. Advanced Examples

Here are advanced "Custom CSS" examples to demonstrate how we can change appearance of Ticketshop/Widget.
 

5.1 How to change Booking Widget background and border colors?

Copy and paste this css code snippet into the Custom CSS code textarea field:
 
.product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }
 
Note
As you can see we used !important css rule here, to overwrite inline assigned declaration on .product-shop element. The !important rule is used for overriding the previously assigned CSS, or inline declarations set within style attribute of HTML tags.
 
Result:
 
These changes will affect both Booking Widget and Ticketshop. If you want to declare classes only for widget or only for ticketshop you can separate them by parent unique elements, which are present in Widget but not in Ticketshop code. For example:
 
<!-- CSS Rules only for Booking Widget: -->
#widget-wrapper .product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }

<!-- CSS Rules only for Ticket Shop: -->
#page-wrapper .product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }

 

5.2 How to change Booking Widget tabs colors?

 

.tabs .tab { background:#336699; }
.tabs .tab h2 { color:#fff; }
.tabs .tab.active { background:transparent; }
.tabs .tab.active h2 { color:#336699; }
 
Result:

 

5.3 How to change Add to Cart button styles?

 

.product-shop .add-to-cart .button {
    background:none; border:2px solid #336699; color:#336699;
}
.product-shop .add-to-cart .button:hover {
    background:#336699; color:#fff;
}
If you add styling to elements such as links or buttons, don't forget to add rules for :hover state, when user mouse over links or buttons.

Result:
 

 

5.4 How to add Ticket Shop full page background image?

 

#shell,
.whitelabel > body,
.wl-background-main,
.wl-background-around { background:none; }

html.whitelabel { background:#fff url(images/bg.jpg) no-repeat center top fixed; background-size:cover; }
First here we clear all backgrounds to set only one background to html tag. After that we add rule where we put image url and set it to cover whole page centered, aligned top, and fixed.

To increase page loading speed you may use different image for different resolutions, as follows:
 
@media screen and (max-width:1024px) {
    html.whitelabel { background-image:url(images/bg-1024.jpg); }
}
@media screen and (max-width:640px) {
    html.whitelabel { background-image:url(images/bg-640.jpg); }
}

 

5.5 How to change Booking Widget steps titles?

 

.a-title-option:after { content:'Select an Option:'; }
.a-title-date:after { content:'Select a Date:'; }
.a-title-time:after { content:'Select a Time:'; }

.a-label.a-title-option:after { content:'Selected Option:'; }
.a-label.a-title-date:after { content:'Selected Date:'; }
.a-label.a-title-time:after { content:'Selected Time:'; }
You can specify different text for step title that isn't proceeded yet, and for step title after user select values, as shown above.
 

5.6 How to change Booking Widget steps "edit" icon?

 

.booking-content .a-edit:before { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyUlEQVQ4T6XTMU5CQRCA4Y/GhsOgiRUJBbHWRhoOYUc4AS0NBafQitpY2csxOAA9meRNsjzh7UOn2c1m/39nsjMD/4xBT36ILd6xK5k+goADmjbgA35SUhMkPMIzVoj9U0q6BCWcQJ49YoL9NcElOLMe4xtrLC4JuuB7fMbLTUnHtuAmOFIqBTfDpeBPcCnY4A1nf4xfNbcbL0uIDrvDS3GhCpcZhCBi1qy94LbgFR9NJtF1X/lVXfOSJcwRgowDljjWhq02CzXeCYkkNxFv6LDiAAAAAElFTkSuQmCC) no-repeat 50% 50%; }
Here we used base64 for image to load it inline. This can help to reduce extra http requests per page, but it is not recommended to use with bigger images, as base64 images are not cached by browser.

Result:
 

 

5.7 How to change styles of select dropdowns?

 

select { padding:2px; color:#336699; background:#fff; border:1px solid #336699; }
Result:
 
 
This will be applied globally to all select fields including checkout fields. If you want to specify such styling only for booking widget, or only for checkout sections, you can use parent selectors such as ".product-shop select", ".sc-content select" etc.
 

5.8 What is the code for changing the sentence in booking widget that asks the customer to choose a date and activity?

 

.tab-info {
 visibility: hidden;
}


.tab-info:after {
Content: 'Enter text here';
visibility: visible;
display: block;
position: absolute;
top: 45px;
}

 

5.9 How to change the background-colour of the rating message/review message ?

 

You cannot change the background color of the rating message/review message in the shop editor. But you can change it in custom CSS with a simple code.

 .form-box { 
            background-color: #002f53 !important; 
}
You can copy the code and paste it in custom CSS. Change the background color code. You need to save your new setting. 
 

 

Check out the following resources for further help:

Related articles