Content & Design

Email Headers and Footers

Email Headers and Footers in OPS-COM allow administrators to define and manage reusable layout components for system-generated emails. By customizing these elements, you can ensure consistent branding, provide essential contact information, and apply uniform styling across all your automated email communications, creating a professional and cohesive user experience.

Using this Feature

Email Headers & Footers are managed through a dedicated section within System Configuration.

  1. Hover over System Configuration, then Contents & Design, and click Email Headers & Footers.

The Email Template Layout List page displays the various sections of your email layouts (e.g., Header, Footer, Style). From here, you can select and edit the individual components that make up your email layouts.

image.png

Editing Email Layout Templates
  1. Click Toggle Templates. Locate the corresponding Section you wish to edit (e.g., "Header" "Footer" or "Style").
  2. Click the Edit button for that section.
  3. Within the editor, you can:
    • Add or modify text.
    • Insert images (e.g., your organization's logo).
    • Include inline styles directly within the HTML to control appearance (e.g., colors, fonts, spacing).
  4. Click Save Changes. You will see a message that your changes have been saved.
  5. You can also archive your template by clicking the Archive Template button in the Top Right.
  6. Click the Back button to edit other sections.

Best Practices & Considerations

Email Templates

Email Templates in OPS-COM allow administrators to customize the content and appearance of automated emails sent by the system. By leveraging available shortcodes and a smart editor, you can create dynamic, informative, and engaging messages for various notifications, ensuring clear and consistent communication with users.

Using this Feature

To access and manage your default email templates:

  1. Hover over System Configuration, then Contents & Design, and click Email Templates.
  2. All the default email templates available in the system will be displayed. 

The Email Templates interface allows you to edit existing templates, utilize dynamic shortcodes, and configure various fields to tailor your messages.

Editing Default Email Templates
  1. Locate the template you wish to edit in the list.
  2. Click the Edit button next to it.
  3. You will be taken to a dedicated editor interface where you can make changes to the email template.

image.png

Creating Templates for Other Languages

If you have other languages installed, you can click the Create button to create templates for these languages.

Email Template Fields - What do they do?

When editing an email template, you will configure the following fields:

Using Shortcodes

Each email template has a set of available shortcodes that you can use to dynamically insert specific information into your message.

image.png


Best Practices & Considerations

Translations

Where are Translations Supported

Currently, translations are only supported on the user side, however, they are managed and set up on the admin side, by admins that have the correct permissions set up to work with languages. 

  1. Translations that are in red, are translations on the adminside which are not yet supported. Since they are not supported you will see them come up in English only until the adminside is supported. 
  2. Translation that are in black, are translations that are on the userside that can currently be changed. 

image.png

Navigating to Translations

To begin reviewing, editing or creating your translations/languages, you will need to navigate to System Config → Content & Designs → Translations.

2024-10-04_14-34-02.png

This will take you to the Installed Languages page where you can begin managing your current languages.


image.png

Adding New Languages 

To begin adding your own languages simply click Add Language on the Installed Languages page which will bring up a new modal to add a label and locale. 


image.png

When you are finished click Save Changes and your new language will be instantly added to the list. Once the language has been added, your users can begin using it on the user-side assuming you have the language enabled. 

The locales are used when we want to create sub-languages, while the label is used to identify our translations throughout the site. 

Adding Sub Languages and How do They Work

Sub-languages are created by using a locale that currently exists with an underscore '_' followed by the sub-language that you want to set up. 


image.png


For example, you can support multiple variations of the English language for your users. In the image below I have created a sub-language for American English using the locale en_us. 


image.png

When you create a new sub-language, it will automatically use the translations that have been set up on the main language, which is the locale on the left side of the underscore, such as en_us. You will need to create the main language first before creating any sub-languages, otherwise the sub-language will always default to English instead of the main language you may have intended to use. 

Installing Languages

Installing a language will create a new language template with the translations we have set up for it as well as the Name and Locale we have created for you. You can then click Edit Translations to adjust the preset translations to your liking. If there is not a language already in the system that can be installed you will need to add a new language and setup the translations yourself. Currently, we only support the ability to install French and English. 


image.png

Disabling or Enabling Translations 

We can choose to disable particular languages that we don't want to be selectable from the user side. To do this we can toggle the visibly of our languages under the Enabled column on the Installed Languages Page 


image.png


Once a language is toggled as Disabled it can no longer be selected by the users of your site as seen in the example image below. 


image.png

Searching Language Translations 

You can search for all translations that relate to a specific component in the system using the search bar at the top right of the Edit Translations page. For example, we can search for permits to find all permit related translations 


image.png


We can also go onto the user side and use the Token language, which will show all of the Names found on the Edit Translations page, under the Name column, (See the image above) to find where that translation exists so it can be changed. This can't be seen by logging is as the user from the user side but requires an admin to go to the profile of a user and click the Login as User button from the admin side. This is to ensure that your regular users don't see the token language option. 


image.png


The token language finds the tokens used so you can better search where the translations are being used on the userside. 

Edit Translations

To begin editing language translations you have to make your changes and then click away from the input field. Once you do this you will see that the translation gets highlighted in yellow indicating that a change has been made. The number of affected records will also display at the bottom of the translations page. 

image.png

When you are finished making your changes click Save Changes for the update to take effect. 

Delete Languages

To delete languages, you can click the delete button next to the language you want to remove. Keep in mind that if you remove the base English and French language it can be re-installed. However, if you delete a language that we do not provide you, then this data will be lost and you will need to contact support for assistance with recovering these translations. 


image.png

Keep in mind that deleting a language will not delete any of the sub-languages you may have created. For example, if I were to delete English, the English US language would still remain with all of its translations. 


Creating Templates and Messaging for New Languages

It's important to note that when you create a new language it will not rely on the default templates and system messaging that you have setup for your previous languages. For example, if I use the new French American language I created, and go onto the userside where languages are supported, then I will see a blank template as well as blank messages. 


image.png

Adding Templates

To add a new template for your languages that you create you will need to go into Templates & Design followed by Toggle Templates for the templates that are currently being used. From there you will have the option to click the Create button to add the new template. If you just want your new language to use the same template, from a language that is already in the system, just go into Edit and copy the text over into your new language, after clicking the Create button.

image.png

Adding System Messages

System messaging will work a bit differently than templates as you will need to go into each individual message and click the Edit button next to that message 

image.png


From there you should be able to select your new language.


image.png


If you want multiple messages to display for all your languages you will need to create a new system message and type out the translations for that language template. 

Changing Terminology Using the Translator

There is another use for the translation tool that may not be obvious at first. Since the translator is essentially a list of code terms and a corresponding list of what is actually displayed on any page not only can you edit the various languages but for each language you can also edit the display term to fit a local "version" of the term. A perfect example of this is in some areas one might refer to recieving a "ticket" as receiving a "citation". It is entirely possible to replace any spot in the interface where the term ticket is used with the term citation.

To do so go into the language editor and search for the term you wish to localize. In our example simply enter ticket in the search bar and hit return. A list of all translatable instances of the word ticket will appear. Click the box where the term is editable and type in your preferred term. In this case we are changing Manage Ticket Categories to Manage Citation Categories. Once you save the changes you have made the displayed text associated with Manage Ticket Categories will display as Manage Citation Categories throughout the system. You may edit the remaining instances of the word Ticket that are in the list before saving to change the term in bulk for all entries listed.

image.png

User Portal Branding and Setup

OPS-COM administrators can define global default branding for the User Portal. By configuring the Default Site Logo and Default Site Header, you can ensure consistent branding and visual presentation across your OPS-COM User environment.

Setup & Configuration

Default images are configured within the Global component of the System Settings.

  1. Hover over System Configuration, and click System Settings.
  2. Click the Global settings tab. Within the Global Setting section, you will find two key areas where you can configure images:
    • Default Site Logo
    • Default Site Header
Setting the Default Logo
  1. Next to the Default Site Logo setting, click on Select Image.
  2. You will be taken to the Manage Files section (your file repository).
  3. Browse your computer or search for the image you wish to use as your default site logo.
  4. Select the desired image.

Follow the Uploading and Managing Files guide for best practices regarding file management and organization.

Setting the Default Header Image
  1. Similarly, next to the Default Site Header setting, click on Select Image.
  2. Follow steps 3-4 above.

Once the images are selected, their file names or previews will appear in the respective configuration settings fields. Remember to Save Settings to apply these selections.

Observing the Changes

These default images serve as fallbacks and will appear in various places throughout the OPS-COM system if no specific logo or header is set in other areas (such as the Contents and Designs section).

Common places where these default images are utilized include:


Best Practices & Considerations

Pages and Content Blocks

Accessing System Messaging

To access and manage your System Messaging navigate to the gears icon  and click on Content & Designs -> Pages and Content Blocks.

2024-10-04_14-34-02.png

Creating Pages

We also provide a video to visually demonstrate how to use system messaging https://drive.google.com/file/d/1DU3qorWnAp_2N9mcNGFYTttNHMeRpXsQ/view

Pages display the visual content found throughout your application. You can edit the contents of your page or post a System Message by using the Disclaimer Shortcode on the Page you want it to show up on. Shortcodes also make it convenient to add interactive content to your pages. For more information on Shortcodes scroll to the bottom of this page. 

  • To create a Page click the Create Page/Message button at the top right of the Manage System Messaging screen. It doesn't matter what tab you're on when you do this as you will specify the Page Type when you go to create the page.    

image.png

  • Once you click this button OPS-COM will take you to a different section where you can set the properties and content of the page. Below is a detailed description of the options available to you when creating new Pages
Page Attributes Short Description 
Title The Title of the page you wish to create, which will be the name displayed on the user navigation bar. 
Path

The path after the domain. i.e.

login → This is the home page 

Changing this to lockers/area/1 will display login/lockers/area/1 as the URL for that page. 

Visibility You can toggle the visibility of your pages which will make it so your users can't see the page anymore, but you can still edit it.
Language Use this to select between two language options for a specific page. Tomahawk currently supports English and French
Layout You can select the layout of your page here. Usually, you will have the Default Layout selected. 
Content Your content will be the text on the page you are currently editing. You can also use Shortcodes here to display a body of material or feature. For example, a user login form could be displayed on your homepage. 

Important: Make sure you select Page under the drop-down menu next to Page Type and not Message. Below we will go into detail on how to create a Page field by field. The images below give you a good visual example of what field is being explained, if there is a certain field you are unsure about you can easily find the picture and read from there.

  • Start by giving your page a Title and specify how you would like the URL at the top of your page to be displayed. 

     What is a URL?...

image.png

  • Adjust the visibility of your page by toggling the Visible button on/off. The Page will still be editable in the System Messaging section but it will not be visible to your users who are on your Page or System Message
Toggle On(Visible Page) Toggled Off(Invisible Page)

  • Toggling the Page as invisible will show it under the Messages tab like seen in the image below to signify it cannot be seen by your users. 

image.png

  • Select the default Language and Layout of your page. If you are not sure which template to use you can leave it as the Default Layout. 

image.png

  • Provide the content of your page in the editor found under the page settings. This content will be the main content of your Pages; you can use Templates & Design to edit the other sections of your pages such as the Header-Content and Footer-Content. 
  • OPS-COM uses Shortcodes to display a section of interactive or static content like a user login, permits, etc. 

image.png

Content Placement

Depending on where you place your content it can appear differently. OPS-COM's smart editor reads content top to bottom, left to right. Meaning that placing a user login Shortcode before your content will look dramatically different than if you placed the Shortcode last. You can see a few visual examples of how this works below. 

For Example: Shortcodes Before Content

We are going to use the Lot Information Shortcode to display our available lots before our text content. 

image.png

As you can see this displays our lot information before our content. 

image.png

For Example: Shortcodes After Content 

Once again we are going to use the Lot Information Shortcode to display our available lots after our Content.

image.png

As you can see this placed the Shortcode after the lot information

image.png

Editing Pages 

Keep in mind that the URL / System Location next to the page is the area in OPS-COM that you are updating. Therefore, if you wished to update the permit screen, you want to edit the page with a System Location of /permits.

You can edit your pages attributes such as the Title, Path, Visibility, Language, Layout, and Content after it has already been created.

  1. To Edit a page, simply click on the Edit button next to the page Title you want to edit. As seen in the image below we are going to select and edit the Appeals Message page. 

    image.png


  2. You can now make any changes to the Pages content or attributes that you like.
    See Creating Pages near the top of the page if you are not sure what a specific field does. From here we can edit the format of the text such as the colour, background color, etc.. 

    image.png


  3. If you have not made any changes to the page you are Editing, you may go back to the Page List by clicking Return to Page List at the top of the screen. Clicking this button will discard all changes recently made. 

    image.png

  4. Once you have finished editing the page, click Save Messaging for your changes to take effect. 

    image.png


Creating System Messages

Important: Users will be brought back to the Users page if users do not agree with a System Message. Meaning, we use System Messaging as a convenient way to offer agreements and disclaimers before users make purchases of permits or lockers. 

System Messages and How they work with Pages 

How do System Messages work?

System Messages and Pages work together using Disclaimer Shortcode's. When you create a System Message, you give that message a unique IdentifierSystem message identifiers may be used in junction with Disclaimer Shortcodes to display your System Messages onto Pages. The idea may be daunting at first, but once you get a better understanding of how these features work together, it will make more sense. 

Visual Example

image.png

  1. The System Message gets created. 
  2. The System Message is given an Identifier to be used with a specific System Message so we may access it on a Page.
  3. We add the Identifier to the Disclaimer Shortcode on the Page that we want to display the message on. 
    1. Shortcode Example- [disclaimer name=lockersDisclaimer dismiss=never]
    2. Shortcode Example- [disclaimer name=vehicleDisclaimer dismiss=session show=".add-vehicle"]
  4. Shortcodes may also be used on System Messages to display useful content such as a detailed description of the current vehicles registered to the user. See below for a list of supported Shortcodes.  

System Messages provide you with a convenient way to add alert messages to your pages that pop-up when a user clicks the page. You may create System Messages to be displayed on specific Pages using Disclaimer Shortcode's.

Message Attributes Description
Title The title that will be displayed across the top of the System Message when users navigate to that page. 
Identifier The identifier is used to know which page you want to display the message by using Shortcodes
Visibility This section toggles the visibility of your page which will make it so your users may not see the page, but you can still edit it.
Language Select between two language options for a specific page. Tomahawk current supports English and French
Content Content is what will display on the actual page. You may use Shortcodes here to view predefined static or interactive content. For example, a user login form could be displayed on your homepage. 
  1. To create a System Message merely click the Create Page / Message button on the top right of the Manage System Messaging screen.

    image.png


  2. Make sure to select the Page Type from the drop-down menu and change this to Message. It is essential that you do not select Page when creating a System Message.

    image.png


    image.png


  3. Create a Title for the message.
  4. Give the message a unique Identifier so it can be accessed on your Pages using Disclaimer Shortcodes. Shortcodes are codes used to link our Pages and System Messages together. 
  5. Once an Identifier is created, It is essential to note that you may not use it anymore or you will get an error message.
  6. You may modify the visibility of your System Message by toggling the Visible button on or off. 

    Toggle On(Visible) Toggled Off(Invisible)

    image.png

    image.png

  7. Toggling a System Message as invisible ensures your users won't see it. Although, you can still edit and view the System Message on the admin side, but it will be displayed as seen in the image below. 

    image.png


  8. Select which Language you would like your content to be in. OPS-COM currently supports two languages which are English and French.
  9. Edit the contents of your System Message in the editor found below the messages fields. This is the content that your users will see and will allow you to edit and format the way the text looks.
    Once finished, click Save Messaging. 

Warning: Clicking Return to Template List before Save Messaging will discard all the changes you just made, meaning that the System Message will not get created or your changes will not occur. 

image.png

Editing System Messages

You can manage your System Messages Title, Identifier, Visibility, Language, as well as modify the content to include text, images, or Shortcodes.

  1. To Edit your System Messages click the Messages tab under the Manage System Messaging page.
  2.  Select the Edit button next to the System Message you wish to edit. For this example, we will be editing the Admin Dashboard. 

    image.png


  3. You will now be able to adjust the message your users will see using the System Messaging editor. Below are the fields in which you can use to edit the System Message

    Message Attributes Description
    Title The title that will be displayed across the top of the System Message when users navigate to that page. 
    Identifier The identifier is used to know which page you want to display the message by using Shortcodes
    Visibility This section toggles the visibility of your page which will make it so your users may not see the page, but you can still edit it.
    Language Select between two language options for a specific page. OPS-COM currently supports English and French
    Content Content is what will display on the actual page. You may use Shortcodes here to view predefined static or interactive content. For example, a user login form could be displayed on your homepage. 

    image.png


  4. You may use the Title field to change the Title of the System Message
  5. You may use the Identifier field to change text used to display a System Message to a Page, but this will require you to modify all Disclaimer Shortcodes using the old unique Identifier for the message you are replacing.  
  6. You may click Save Messaging when you are finished making your changes. 

image.png

Add System Messages to Pages using Shortcodes

Now that you know how to create your Pages and System Messages you can bring them together using a Disclaimer Shortcode. A Shortcode is a small body of code surrounded by [ ] used to display complex templates or features. Shortcodes limit the technicality of our system by offering a convenient way to add interactive content without having to know how to script or code. 

Please review the Shortcodes for Use on the User Portal for a detailed description of how shortcodes work. You can also find a list of Shortcodes currently available to you by going to the OPS-COM Shortcode Documentation. 

Templates and Design

Overview

The User Portal system allows your clients to register, add vehicles, purchase permits and pay violations. It is an important extension of your business, and it should reflect your corporate branding.

Pages and Templates

The OPS-COM user Page will store the functionality and content of your main page, while the Templates will be used to change the functionality of your pages as well as the content around the Page. 

Where to Find Templates and Design

Click System Configuration, Templates & Design to access these features. 

image.png

All Default Templates 

If at any point you feel that you have adjusted the Default <scripts> and <styles> to the point of breaking your site, or you are simply unsure what your changes have done, you can refer to these templates to restore your pages functionality and style.

Default Script Template 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
    $(function(){
        $.fn.shuffle = function() {
 
            var allElems = this.get(),
                getRandom = function(max) {
                    return Math.floor(Math.random() * max);
                },
                shuffled = $.map(allElems, function(){
                    var random = getRandom(allElems.length),
                        randEl = $(allElems[random]).clone(true)[0];
                    allElems.splice(random, 1);
                    return randEl;
                });
 
            this.each(function(i){
                $(this).replaceWith($(shuffled[i]));
            });
 
            return $(shuffled);
 
        };
        $('#slideshow-header div').shuffle();
        $("#slideshow-header > div:gt(0)").hide();
 
        setInterval(function() {
            $('#slideshow-header > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slideshow-header');
        },  10000);
    });
</script>
Default Style Template 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<style>
  body {
    backgroundblack url(/uploads/FILES/OC_TOMA/parking-deck.jpg) center center;
    background-size: cover;
    background-attachmentfixed;
    color#FFF;
  }
  .card, .modal, .list-group-item {
    color#333;
  }
  .slideshow-header {
    position:relative;
  }
  .slideshow-header .slides {
    z-index0;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    display:flex;
    align-items: center;
    justify-contentcenter;
  }
  .slideshow-header .overlay {
    z-index1;
    position:relative;
  }
  #slideshow-header {
    overflowhidden;
    opacity:0.8;
    box-shadow: 0 0 20px rgba(0000.4);
  }
 
  #slideshow-header > div {
    width:100%;
    positionabsolute;
  }
 
  #slideshow-header div img {
    width100%;
  }
</style>
Default Header Template 
 
1
2
3
4
5
6
7
8
9
10
<div class="text-center slideshow-header">
  <div class="slides" id="slideshow-header">
  </div>
  <div class="overlay">
    <img alt="" class="img-fluid" src="/MEDIA/demo_extras/TomahawkUniversity_logo.png" style="display:inline; width: 450px; margin-top: 80px; margin-bottom:80px;"/>
  </div>
</div>
[user_menu]


Understanding Templates & Design 

Templates & Designs are the visual functionality of your web page structured around your Page content. OPS-COM provides you with default templates which allow you to get started easily without having to know any code. 

image.png

image.png

  1. Clicking on Toggle Templates will display all of the sections attached to that template. Templates can be created in English and French. 

  2. The contents of our pages are split into four separate sections. Header(1), Content Header(2), Content Footer(4), and Footer(5). See Template Layout right below this guide to get a better understanding of the OPS-COM layout. 

  3. To edit a template Section, simply click Edit next to the section name. 

Template Layout

Below is a visual example of how your Pages are split into Sections using Templates. All of the Content (3) of our Pages are added through the System Messages under Pages

image.png

  1. Header - The header of your page, where you can find your header image and user navigation. 

  2. Content_Header - Another header section for you to place content into, such as alerts or user information. Everything placed here will appear before the Content and Content Footer.

  3. Content - The content of your pages. Content may not be added from Templates & Design and will require you to navigate to System Messaging

  4. Content_Footer - The footer of your Content. Everything placed here will appear after the Content Header and Content. Again, you can use this to display alerts, messages, or additional content to your Template. 

  5. Footer - The footer of your page is where you can find useful information. You can use this area to advertise important information your users might need while using your system. 

Page Layouts and Templates 

Creating Layouts

To create a layout simply click the Create Layout button found at the top right of the Layouts page. 

image.png

You will be presented with the Add Layout system message. 

image.png

  1. Provide the name of your layout. In this example, we are going to create our own Summer Layout to be used, instead of the default layout.

  2. Click Save Changes when you are happy with the name of your layout. Once the Layout has been created, you can see it under the Layouts list. 

  3. If you wish to cancel the creation of your layout simply click Close

  4. You can see that our Summer Layout was added to the end of our Layouts List with no sections yet. 

  5. You can choose whether or not your template is the Default template at any time by clicking the Non-Default drop-down and selecting Default.
  6. Anytime you add sections to your Templates it will display how many are attached next to Toggle Templates. As you can see, we don't have any Sections created yet so there are no numbers to be displayed, otherwise, clicking on Toggle Templates would show you a list of all the templates currently attached to that Layout.


image.png

      7. You can edit the layout name by clicking on the Edit button next to archive.

      8. If you would like to archive a layout that you are no longer using, you can click the Archive button next to edit. 

Creating Templates

Now that you have a better understanding of how Templates work with Layouts we can start creating our own. 

image.png

  1. Click on Toggle Templates. 

  2. Clicking this will display the available Templates attached to the Summer Layout

  3. You can now Create a variety of templates for your page, including bilingual support. 

  4. If you are non-technical, it is advised not to change the code for Scripts, Styles, Header, and Footer Templates. You can use the default Style, Script, Header, and Footer Templates from All Default Templates. These can still be edited according to your company and their style guides. See Edit the Page Style and Edit the Page Behaviour below for more information. 
     

Edit the Page Style (CSS) 

Important

This guide is used if you intend to adjust the Templates provided to you by OPS-COM. If you choose to rewrite your own Templates you can choose to ignore this.

  

Content
/* Style properties of our page body, this affects the entire page. */
body {
    backgroundblack url(/uploads/FILES/OC_TOMA/parking-deck.jpg) center center;
    background-size: cover;
    background-attachmentfixed;
    color#FFF;
}
 
/* This changes the color property of --Find where these classes are used 
.card, .modal, .list-group-item {
    color#333;
}
Slide Show
/* Below are all of the styles for our header slideshow at the top of each page. */
/*--------------WORD BANK---------------
 * ELEMENTS: Elements are the tags with '<>' around them such as <div> and <img> found in the default header and footer template.
 * We access them here by giving them a Class name or ID.                                          
 * PROPERTIES: Properties are used to define certain styles to a class or ID.
 * CLASS: Generally used to assign a style to a group of HTML elements but can be used on single elements as well.
 * They are assigned within HTML elements like this: <div class="MyClass"></div> where MyClass would be your class name.
 * ID's: Generally used to assign styles to a single element but can be used on multiple elements as well.
 *
 *--------------CLASSES-----------------
 *
 * To learn more about the CSS Position Property see: https://www.w3schools.com/cssref/pr_class_position.asp
 * For more information on CSS Syntax and Selectors see: https://www.w3schools.com/css/css_syntax.asp
 * It is not recommended to adjust with the position of elements unless you are sure about the changes being made. This can dramatically change how content is positioned. 
 */
 
/* Class Names and Elements
 * [.slideshow-header]: Container that contains our slides and overlay.
 *
 * Properties
 * @position: Adjust the position of the slideshow-header. For more information see: https://www.w3schools.com/css/css_positioning.asp
 */ 
.slideshow-header {
    position:relative;
}
 
/* Class Names and Elements 
 * [.slideshow-header]: Container that contains our slides and overlay.
 * [.slides]: Controls the style properties of the individual slides.
 
 * Properties  
 * @z-index: Adjust the stack placement of the [.slideshow-header] and [.slides] along the Z axis.
 * @position: Define the position of the page. 
 * @top:Change in the position from the top of an element.
 * @left: Change in the position from the left of an element.
 * @right: Change in the position from the right of an element.
 * @bottom: Change in the position from the bottom of an element.
 * @display: Adjusts how the content is displayed on the page. See: https://developer.mozilla.org/en-US/docs/Web/CSS/display and https://www.w3schools.com/css/css_display_visibility.asp
 * @align-items: Aligns the child elements of this PARENT element to be centered. For a visual example see: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 * @justify-content: Defines how the space disturbed around the child elements. For a visual example see: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 *
 * These are the style properties and values of the slideshow header and its individual slides.
 */
.slideshow-header .slides {
    z-index0;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    display:flex;
    align-items: center;
    justify-contentcenter;
}
 
/* Class Names and Elements
 * [.slideshow-header]: A container that contains our slides and overlay.
 * [.overlay]:
 *
 * Properties
 * @z-index: Used to layer elements. Elements with a higher z-index number will appear before elements that are lower.
 * @position: Set the position property for the element. We recommend you do not adjust this property unless you have knowledge on how the changes will affect your page.
 *
 * These are the styles for the overlay, as well as additional properties for the slideshow-header.
 */ 
.slideshow-header .overlay {
    z-index1;
    position:relative;
}
 
/*--------------ID'S---------------*/
/* ID Names and Elements
 * [#slideshow-header] is the container used to contain the images you have chosen for your header
 *
 * Properties
 * @overflow:
 * @opacity:
 * @box-shadow: Create a box shadow for this element.
 * EX: box-shadow: a, b, c, d(e, f, g, h); 
 */
#slideshow-header {
}
  
/* ID Names and Elements
 * [#slideshow-header] is the container used to contain the images you have chosen for your header
 *
 * Properties
 * @width: 100% width will take of 100% of that element.
 * @position:
 */
#slideshow-header > div {
    width:100%;
    positionabsolute;
}
  
/* ID Names and Elements
 * [#slideshow-header]: is the container used to contain the images you have chosen for your header.
 * [div]: Refers to our HTML elements.  
 * [img]: Refers to our images in the slideshow. 
 
 * Properties
 * @width: Defines the width of the images, divs and slideshow-header. A value of 100% will display the image across the entire page. 
 */
#slideshow-header div img {
    width100%;
}


Edit the Page Behavior (Scripts) 

Disclaimer

Please review the list of supported scripting languages below. If a Javascript vendor is unverified it may break the functionality of your site.

 Verified Script Vendors
  1. Bootstrap 
  2. jQuery - To fully customize the slideshow script that displays the slideshow found at the top of each page, you will need to know jQuery. You could choose to rewrite the slideshow script in whichever Javascript vendor that is verified. 

API Integration

Additionally, you can use our API to integrate with pay stations and other devices that will allow you to grab useful information from your users. 

Form 11 Shortcodes

Information

When issuing a Form 11, there are a number of shortcodes that can be placed in the template to auto-fill values relating to the violation.

The base short code is formatted like:

The blank value must be filled with a value to pull from the violation info.

For each nested value in the data packet, the packet name must be added as part of the variable name, each part separated by a period, with the variable to be output by the shortcode as the final part of the variable.

The packet itself is called by 'violation', and the name must be placed at the start of any value call.

Violation Packet

The violation info packet is formatted like this example.

The values on the left are the variable names, the values on the right are the example values returned by this packet.

{
    "ViolationID": 237,
    "SemPermitID": null,
    "Ticket": "TT-19026",
    "VehicleID": 5,
    "Spoiled": 0,
    "TicketType": 1,
    "Issued": "2024-07-17 16:11:00",
    "convNotice": null,
    "Due": "2024-07-27 16:11:00",
    "ViolationTypeID": -1,
    "Fine": "50.0000",
    "AdjustedFine": "20.0000",
    "Towing": "0.0000",
    "taxAmount": "0.0000",
    "Writer": 7,
    "LocationID": 10,
    "Comment": null,
    "TicketAppeal": null,
    "appealType": 0,
    "appealFormat": null,
    "AccessAdminID": 50,
    "ActionedPer": null,
    "Created": "2024-07-17 20:12:08",
    "AppealUserID": 0,
    "AppealProcessDate": null,
    "AppealAdminID": 0,
    "AppealComment": null,
    "AppealAdminComment": null,
    "AutoNotice": 0,
    "ProcessedByCollection": null,
    "SentToCollections": null,
    "PrivateComments": "",
    "DriveAway": 0,
    "UUID": null,
    "VioNotice": null,
    "latitude": null,
    "longitude": null,
    "Warning": null,
    "userid": null,
    "incidentID": null,
    "failToIdentify": null,
    "pin": "YL",
    "duplicate": null,
    "AdjustmentReason": null,
    "notices_count": 1,
  
    "user_info": {
            "UserID": 5,
            "studentNo": null,
            "employNo": "00800147",
            "username": "mashbury",
            "firstName": "Michael",
            "preferredname": null,
            "lastName": "Ashbury",
            "street": "688 Zaproxy Ridge",
            "city": "East Romaineburgh",
            "prov": 9,
            "postal": "K2G5B1",
            "email": "mash-bury@tomahawk.ca",
            "display_name": "Michael Ashbury",
            "account_no": "00800147",
            "prov_name": "Ontario",
    },
  
    "writer": {
            "AdminAccessID": 7,
            "Username": "admin",
            "DisplayName": "Administrator"
    },
  
    "vehicle": {
            "VehicleID": 5,
            "Active": 1,
            "Plate": "MASH",
            "Year": 1998,
            "TotalVio": 12,
            "TotalUnpaid": 2,
            "TotalWarning": 0,
            "vehicleAlert": true,
            "vin": "JNAMA43H9XGE50339",
            "electric_vehicle": false,
          
            "province": {
                    "ProvName": "West Virginia",
                    "ProvCode": "WV",
            },

            "make": {
                  "MakeName": "Toyota"
            },
            
            "colour": {
                  "ColourName": "Black"
            },
            
            "plate_type": {
                  "TypeName": " Passenger"
            }
        
            "vehicle_type": {
                  "TypeName": " Van"
            },
      
    },
  
    "location": {
            "LocationID": 10,
            "LocationName": "Hospital & Administration Building",
    },
  
    "details": {
            "ViolationsDetailID": 359,
            "ViolationID": 237,
            "Ticket": "TT-19026",
            "ViolationTypeID": 16,
            "LocationID": 10,
            "offenceFine": 50,
            "discountFlag": 1,
            "discountAmount": 20,
            "discountHours": 240,
          
            "type": {
                    "ViolationTypeID": 16,
                    "ViolationDescr": "No Parking Snow Route - Mandatory Towing",
                    "DefaultCost": 50,
                    "discountFlag": true,
                    "discountAmount": 20,
                    "discountHours": 240,
            }
    }
}

Examples

An example shortcode is provided for each section. To return a specific value in the same section, replace the provided variable name with the sibling value wanted for output.

Example Shortcode
Description

[values show=violation.Ticket]

Returns the violation ticket number.
[values show=violation.user_info.username] Returns the username of the user the violation belongs to.
[values show=violation.writer.DisplayName] Returns the display name of the admin who assigned the violation to the user.
[values show=violation.vehicle.Plate] Returns the plate of the vehicle the violation was assigned to, if applicable.
[values show=violation.vehicle.province.ProvName] Returns the province or state of the vehicle plate.
[values show=violation.vehicle.colour.ColourName] Returns the colour of the vehicle.
[values show=violation.vehicle.plate_type.TypeName] Returns the plate type of the vehicle.
[values show=violation.vehicle.vehicle_type.TypeName] Returns the type of the vehicle.
[values show=violation.vehicle.make.MakeName] Returns the make of the vehicle.
[values show=violation.location.LocationName] Returns the name of the location the infraction happened.
[values show=violation.details.0.Ticket] Returns the violation ticket number. Alternate value location.
[values show=violation.details.0.type.ViolationDescr] Returns the violation type description.

User Information Shortcodes

Shortcodes

Shortcodes used to display user information.

Keep in mind that the shortcode descriptions are also on the email template page for lost passwords. 

Shortcode
Description
 [user show="firstname"] The first name of the user account receiving the email or messaging. 
 [user show="lastname"] The last name of the user account receiving the email or messaging. 
 [user show="email"] The email address of the user account receiving the email or messaging. 
 [user show="username"] The username of the user account receiving the email or messaging. 
 [user show="salutation"] The salutation of the user account receiving the email or messaging.