Content & Design

Email Headers and Footers

Getting to Email Headers & Footers

In order to get to Email Headers & Footers, click System Config, Email Headers & Footers


image.png



This should take you to the Email Template Layout List where you can select Edit to edit the existing Footer, Header or Style email template. 


image.png



Editing Email Layout Templates 

Click edit on the Edit button for the corresponding Section you wish to edit.


image.png

 This will bring you to the template, in our case it is the Header Template. From here you can edit what appears on the header of each sent email as well as include inline styles.


image.png

System Messaging Checklist

What Needs Your Attention

Here is the list of all the major pages and messaging you will want to review. There are some that are standard messages and probably don't need customization. These items are listed but marked as optional.

Functional page elements are displayed on the page automatically by the system based on which page you are currently on. For example, the Sign In page boxes that appear for username and password are automatically generated on the page. Therefore, you need not worry about editing these items. However, if you want to add additional content on these pages you may do so.

Templates and Designs

Click on Toggle template to get a list.

You will want to edit the following:

Header 
<header style="height:320px; background: white url(/uploads/FILES/PA-DEMO/Tomahawku-arial.jpg) center center; background-size: cover;">
  <div class="container" style="height:95%;position:relative">
    <div class="row" style="bottom:0;right:0;position:absolute">
      <div class="col my-3 text-center"
           style="background-color:white;padding:10px;max-width:200px;border-radius:15px;border:1px solid darkgray">
        <a href="/" target="_blank">
          <img alt="Tomahawk University" align="right" border="5" src="/uploads/FILES/PA-DEMO/TomahawkUniversity_logo.png" class="img-fluid"></a>
         
      </div>
    </div>
  </div>
</header>
 
[user_menu]


Footer 
<div class="bg-light text-dark">
    <div class="container py-3">
        <div class="row">
            <div class="col-sm">
                <a href="https://ops-com.com"><img
                     class="img-fluid mb-3 mb-md-0" style="max-width:250px;padding-top:10px"
                     src="https://kp.ops-com.com/uploads/FILES/PA-DEMO/Banner_W_Tagline.png"
                     alt="OperationsCommander" /></a>
                <address style="padding-left:25px;padding-top:5px;">
                92 Bridge St., Carleton Place, Ont., K7C 2V3<br />
                </address>
            </div>
            <div class="col-sm text-right" style="padding-top:15px">
              <strong>Learn about Parking & Security Management</strong><br/>
              <a href="mailto:info@ops-com.com">info@ops-com.com</a> <br/>
              855.410.4141
            </div>
        </div>
    </div>
</div>


Go into System Messaging and update the following System Messaging:

(These are the actual pages that occupy the content area between the header and footer that you configured above)

The Pages Tab


Login Screen 
<h3 style="text-align: center;">Welcome to Tomahawk University <br /><span style="color: #ffffff;">Parking and Security Services</span></h3>
<div class="row my-3">
<div class="col-s-12 col-md-6">[system_code]</div>
<div class="col-s-12 col-md-6">
<h4 style="padding-top: 25px;"><span style="color: #f1c40f;"><span style="font-family: arial,helvetica,sans-serif;"><br /><strong>Do you have an account?</strong> </span></span></h4>
<h5><span style="font-family: arial,helvetica,sans-serif;">Sign in using the email address you were provided with when you set up your OPS-COM DEMO user account. <br />For most visitors, a DEMO account will have been supplied previously by Tomahawk.</span></h5>
<p> </p>
<h4><span style="font-family: arial, helvetica, sans-serif; color: #f1c40f;"><strong>Are you a New user?</strong></span></h4>
<h5><span style="font-family: arial,helvetica,sans-serif;"> Click ‘Create Account’ and fill out the form. If you do not wish to use your email address or other personal details, please contact the <span style="color: #f1c40f;"><a style="color: #f1c40f; text-decoration: underline; font-style: italic;" title="Email OPS-COM" href="mailto:sales@ops-com.com" target="_blank" rel="noopener">OPS-COM demo team by email</a> </span></span></h5>
<span style="color: #f1c40f;"><em>Learn more about <a style="color: #f1c40f;" href="https://ops-com.com">OperationsCommander</a></em></span></div>
</div>


Permits 
<p>[disclaimer name=permitDisclaimer dismiss=never]</p>
<div class="row">
<div class="col-md-4"><a title="Tomahawk U Parking Map" href="/uploads/FILES/PA-DEMO/TomahawkU_Map.jpg" target="_blank" rel="noopener"><img class="img-thumbnail modal-image" src="/uploads/FILES/PA-DEMO/TomahawkU_Map.jpg" width="385" height="400" /></a></div>
<div class="col-md-8">
<p>Parking availability changes considerably during the year and permits are offered for sale in select lots. Like any parking lot, there are fewer spaces in parking lots that needed over the course of an average day because not all parkers are there at the same time. Permit allocations are processed and maintained by the Parking Services Office. (Y)early, (S)emester, and (M)onthly parking permits are available for sale below. Please select from one of the parking permit options on the side of the map. If no permit options are available, permits may be temporarily sold out. If this is the case, please select the option to add yourself to the Waiting List - you will be contacted by e-mail to advise when further permit selection/options become available. Permit prices and parking rates are based on our fiscal-year schedule and are pro-rated for users throughout the year. Persons requiring parking during the summer months (May to August) must purchase a Summer parking permit.</p>
<p>FOR STAFF/ FULL-TIME PARKING PERMITS, PLEASE SELECT OPTION TO PLACE YOUR NAME ON THE WAITING LIST (select waiting list link below). </p>
<p style="font-style: italic; font-weight: bold;">Attention Residents -  All those living in Residence at must purchase RESIDENCE  ONLY parking permits. </p>
</div>
</div>
<p>[system_code]</p>
<p> </p>


User Registration 
<div class="row my-3">
<div class="col-s-12 col-md-6">
<p>[system_code]</p>
</div>
<div class="col-s-12 col-md-6">
<p><img style="width: 400px; height: 209px; float: left; margin: 5px;" src="/uploads/FILES/PA-DEMO\TomahawkUniversity_logo_white_bg.png" alt="" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><span style="font-size: 10pt;">Already Registered? <span style="color: #f1c40f;"><a style="color: #f1c40f;" href="/login"><strong>Click here</strong></a> </span>to login.</span></p>
<p><span style="font-size: 10pt;">To register, please follow the registration process below.</span></p>
<ol>
<li><span style="color: #236fa1; font-size: 10pt;"><strong><span class="title"><span style="color: #f1c40f;">Complete the Registration Form</span> </span></strong></span><br /><span style="font-size: 10pt;">Simply fill out the registration form below, review your information for accuracy, and click the Submit button.<br /><br /></span></li>
<li><span class="title" style="color: #fbeeb8; font-size: 10pt;"><strong><span style="color: #f1c40f;">Receive Confirmation Instructions</span> </strong></span><br /><span style="font-size: 10pt;">We will send you an email message with a link to activate your account and setup your password. </span><br /><span style="font-size: 10pt;">If you have already completed Step 1 and would like us to resend the activation link, please<span style="color: #f1c40f;"> <a style="color: #f1c40f;" href="#" data-toggle="modal" data-target="#modalForgotPassword"><strong> click here</strong> </a></span>.<br /><br /></span></li>
<li><span style="font-size: 10pt;"><strong><span class="title" style="color: #f1c40f;">Confirm Your Registration </span></strong></span><br /><span style="font-size: 10pt;">Once you have received your password, you can visit the<span style="color: #f1c40f;"><strong> <a style="color: #f1c40f;" href="/account/profile">edit profile</a> </strong></span>page to change your password or profile information.</span></li>
</ol>
</div>
</div>


Appeals Message 
<p>[disclaimer name=appealsDisclaimer dismiss=never]</p>
<p><strong>All persons receiving a parking violation have a right to appeal within 10 days of the date the violation was issued.</strong><br /><strong>Before searching for your ticket or license plate please ensure that you have registered the vehicle the violation applies to. <br />Click <span style="color: #ba372a;"><a style="color: #ba372a;" href="/vehicles">here</a> </span> to register your vehicle.</strong><br /><strong>If you experience any problems using these forms or have any questions concerning the registration, please contact the <span style="color: #ba372a;"><a style="color: #ba372a;" href="mailto:support@parkadmin.com?Subject=Online%20Appeal%20Question/Comment">Appeals Officer</a></span></strong></p>
<p><span style="color: #000000;">[system_code]</span></p>


The Messages Tab

Admin Dashboard 
<h2 id="mcetoc_1d6qrcts00">Welcome to OperationsCommander Admin Landing Page</h2>
<h3 id="mcetoc_1d6qrcts11"><span style="color: #bf0404;">"Important Notices"</span></h3>
<p>This version of <strong>Operations<span style="color: #bf0404;">Commander</span> </strong>is our demo environment.  The details of this page are fully customizable in the "System Config Menu" (gears icon ) under the "Manage System Messaging" option.</p>
<p> </p>
<h3 id="mcetoc_1d6qrcts12">Staff Schedules</h3>
<p>You can use these sections for any number of uses such as Staff schedules</p>
<table style="width: 100%;" border="1" cellspacing="0" cellpadding="5"><caption>Spring Schedule?</caption>
<tbody>
<tr>
<td style="height: 35px; text-align: center; width: 150px;"><strong><span style="color: #ba372a;">Officer</span></strong></td>
<td style="height: 35px; text-align: center;"><strong><span style="color: #ba372a;">Mon</span></strong></td>
<td style="height: 35px; text-align: center;"><strong><span style="color: #ba372a;">Tue</span></strong></td>
<td style="height: 35px; text-align: center;"><strong><span style="color: #ba372a;">Wed</span></strong></td>
<td style="height: 35px; text-align: center;"><strong><span style="color: #ba372a;">Thu</span></strong></td>
<td style="height: 35px; text-align: center;"><strong><span style="color: #ba372a;">Fri</span></strong></td>
<td style="height: 35px; text-align: center;"><strong><span style="color: #ba372a;">Sat</span></strong></td>
<td style="height: 35px; text-align: center;"><strong><span style="color: #ba372a;">Sun</span></strong></td>
</tr>
<tr>
<td style="height: 35px; text-align: center;">Kevin</td>
<td style="height: 35px; text-align: center;">7-6</td>
<td style="height: 35px; text-align: center;">7-6</td>
<td style="height: 35px; text-align: center;">7-6</td>
<td style="height: 35px; text-align: center;">7-6</td>
<td style="height: 35px; text-align: center;">7-6</td>
<td style="height: 35px; text-align: center;">Off</td>
<td style="height: 35px; text-align: center;">Off</td>
</tr>
<tr>
<td style="height: 35px; text-align: center;">Mary Beth</td>
<td style="height: 35px; text-align: center;">12-8</td>
<td style="height: 35px; text-align: center;">Off</td>
<td style="height: 35px; text-align: center;">Off</td>
<td style="height: 35px; text-align: center;">12-8</td>
<td style="height: 35px; text-align: center;">12-8</td>
<td style="height: 35px; text-align: center;">9-5</td>
<td style="height: 35px; text-align: center;">9-5</td>
</tr>
<tr>
<td style="height: 35px; text-align: center;">Don </td>
<td style="height: 35px; text-align: center;"> Off</td>
<td style="height: 35px; text-align: center;"> 12-8</td>
<td style="height: 35px; text-align: center;">12-8</td>
<td style="height: 35px; text-align: center;">9-6</td>
<td style="height: 35px; text-align: center;">10-7</td>
<td style="height: 35px; text-align: center;">Off</td>
<td style="height: 35px; text-align: center;"> Off</td>
</tr>
<tr>
<td style="height: 35px; text-align: center;">Jerome</td>
<td style="height: 35px; text-align: center;">Off</td>
<td style="height: 35px; text-align: center;">Off</td>
<td style="height: 35px; text-align: center;">Off</td>
<td style="height: 35px; text-align: center;">Off</td>
<td style="height: 35px; text-align: center;">Off</td>
<td style="height: 35px; text-align: center;">8-4</td>
<td style="height: 35px; text-align: center;">8-4</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<h3 id="mcetoc_1d6qrcts13">Current Parking Session</h3>
<p>Our current parking session is April.  May permits will be made available soon.</p>
<h3 id="mcetoc_1d6qrcts14">Notes on Database of the demo</h3>
<h5>Date of Last DB restore :  </h5>
<p>Set T2P number in Preview to:  6135196060  613-800-3392 </p>
<p> </p>


No Payment Options 
<p class="alert alert-danger">There are no payment options available. Please contact an administrator for more information.</p>


Permit PDF Layout 
<div id="header-img">
<table style="width: 850px;">
<tbody>
<tr>
<td style="width: 600px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="/uploads/FILES/OC_TOMA/TomahawkUniversity_logo.png" width="314" height="81" /></td>
</tr>
</tbody>
</table>
<br />
<table style="height: 500px; width: 852px;">
<tbody>
<tr>
<td style="width: 560px; text-align: center;">
<h2 id="mcetoc_1dholgses1"> </h2>
<table class="table table-striped">
<tbody>
<tr>
<td>Permit Holder</td>
<td>[permitpdf user=fullname]</td>
</tr>
<tr>
<td>Lot</td>
<td>
<p>[permitpdf permit=lotshortname]: [permitpdf permit=lotname]</p>
<p>[permitpdf permit=location]</p>
</td>
</tr>
<tr>
<td>Permit No.</td>
<td>[permitpdf permit=permitno]</td>
</tr>
<tr>
<td>Vehicle(s)</td>
<td>
<p>[permitpdf vehicle=all]</p>
<p>[permitpdf vehicle=1]</p>
</td>
</tr>
<tr>
<td>Expiry</td>
<td>
<p>[permitpdf permit=expiry]</p>
</td>
</tr>
<tr>
<td> </td>
<td>
<h1 class="barcode">*[permitpdf permit=permitno]TT*</h1>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 560px; text-align: center;"
<h4><span style="color: #ff0000;">Automated License Plate Recognition</span></h4>
<p>We offer full integration with <span style="color: #ff0000;"><a style="color: #ff0000;" href="https://ops-com.com/parking-security-platform/license-plate-recognition/"><em>three types</em></a><a style="color: #ff0000;" href="https://ops-com.com/parking-security-platform/license-plate-recognition/"> of fixe</a><a style="color: #ff0000;" href="https://ops-com.com/parking-security-platform/license-plate-recognition/">d and mobile LPR</a>.  <a style="color: #ff0000;" href="https://ops-com.com/parking-security-platform/parking-enforcement/">Android integration</a></span> makes it as simple as taking a picture.  Mobile ANPR hardware is so lightweight it can be easily transferred from one vehicle to another.  Our static mounted cameras allow tracking 24 hours a day 7 days a week.</p>
<p>Leave behind the need for multiple integrations, numerous troubleshooting environments and licensing fees.  Our <span style="color: #ff0000;"><a style="color: #ff0000;" href="https://ops-com.com/parking-security-platform/license-plate-recognition/pl8rdr-lpr/"><strong>PL8RDR</strong></a></span> license plate reader hardware sets a new standard in simplified LPR and ANPR camera technology.</p>
<p>Automated parking software and electronic parking ticket system.</p>
<h4 id="mcetoc_1dholej2b0"><span style="color: #ff0000;">Temporary Parking with Text2Park.Me</span></h4>
<p><strong><span style="color: #ff0000;"><a style="color: #ff0000;" href="https://ops-com.com/parking-security-platform/parking-management/temp-parking/">Text2Park.Me</a></span> </strong>is an integrated feature of our<strong> </strong>parking and security management solution!  Offers parking services to any client through the use of standard cellular phone <span style="color: #ff0000;"><a style="color: #ff0000;" href="https://en.wikipedia.org/wiki/SMS">SMS/text messaging</a>.</span></p>
</td>
</tr>
</tbody>
</table>
</div>


Temp Permit Layout 
<p style="text-align: center;"><img src="/uploads/FILES/OC_TOMA/TomahawkUniversity_logo.png" alt="Round Purple" width="250" height="100" /></p>
<p>This permit is valid only for the date(s) as purchased and printed on the face of this permit via <em><strong>ParkAdmin</strong></em> - UNA Transportation Services. This permit is valid in specified parking areas only and is not transferable to any other vehicle or user. Vehicles found displaying fraudulent permits will be ticketed and/or towed. Permit must be displayed and visible from the front windshield of the parked vehicle while parked on campus. It is the responsibility of the permit holder to display in accordance with this permit any supporting documentation required to substantiate the validity of said permit.  </p>
<div style="border: solid 1px black; padding: 10px; text-align: center; font-size: 24pt; text-transform: uppercase;">[permittemppdf vehicle=plate]</div>
<p> </p>
<table style="width: 851px; height: 117px;" cellpadding="5" align="center">
<tbody>
<tr style="height: 49px;">
<td style="width: 118.667px; height: 49px;" align="right"><strong>Vehicle:</strong></td>
<td style="width: 730.667px; height: 49px;">[conditional var=permittemp.VehicleID test=equal value=-1][permittemppdf vehicle=guest][/conditional][conditional var=permittemp.VehicleID test=notequal value=-1][permittemppdf vehicle=year] [permittemppdf vehicle=colour] [permittemppdf vehicle=make] [permittemppdf vehicle=type][/conditional]</td>
</tr>
<tr style="height: 17px;">
<td style="width: 118.667px; height: 17px;" align="right"><strong>Permit No:</strong></td>
<td style="width: 730.667px; height: 17px;">[permittemppdf permit=permitno]</td>
</tr>
<tr style="height: 17px;">
<td style="width: 118.667px; height: 17px;" align="right"><strong>Lot Name:</strong></td>
<td style="width: 730.667px; height: 17px;">[permittemppdf permit=lotname]</td>
</tr>
<tr style="height: 17px;">
<td style="width: 118.667px; height: 17px;" align="right"><strong>Location:</strong></td>
<td style="width: 730.667px; height: 17px;">[permittemppdf permit=location]</td>
</tr>
</tbody>
</table>
<p> </p>
<p style="text-align: center;">Valid For</p>
<p style="text-align: center;">[permittemppdf permit=expiry]</p>
<div style="text-align: center;">[conditional var=permittemp.DoNotTow test=true]
<p style="color: red; font-size: 18pt;">Do Not Tow</p>
[/conditional]</div>
<div class="barcode stretch1-2" style="padding: 10px; text-align: center; font-size: 30pt;">[permittemppdf permit=barcode]</div>


Temp Permit Text 
<p>This permit is valid only for dates as purchased and printed on the face of this permit only. This permit is valid in specified parking areas only and is not transferable to any other vehicle or user. Vehicles found displaying fraudulent permits will be ticketed and/or towed.<br /><br />Permit must be displayed and visible from the front windshield of the parked vehicle while parked on campus.<br /><br />It is the responsibility of the permit holder to display in accordance with this permit any supporting documentation required to substantiate the validity of said permit.<br /><br />Parking Services</p>

Popup Disclaimers

You may opt to place popup disclaimers throughout the system. These popup windows can be triggered to appear based on navigation to a page or associated with a button on a page. 

Appeals Disclaimer 
<p>Please NOTE: By Appealing this citation, <br />You will be waiving the early Payment Discount</p>


Locker Disclaimer 
<p><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;"><strong>Summer rentals and extensions, must be made in person  *an additional rental fee may apply</strong><br />        <br /><strong>Fees and Registration Cost : </strong><br /><strong>    $23</strong> for ½ locker valid for use between August 15 to April 30      <br />    <strong>$35</strong> for Full Lockers valid for use between August 15 to April 30           </span></span><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;">    </span></span></p>
<p><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;">Please note due to supply and demand lockers located in X are subject to rental restrictions of <strong>ONE LOCKER PER STUDENT</strong>. Students are able to purchase multiple lockers in all other areas of the school. </span></span></p>
<p><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;"><strong>Terms and Conditions</strong></span></span></p>
<p><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;"><strong>Reminders about the End of Rental Terms</strong><br />Two weeks before the end of your Rental Term, an email will be sent to you to remind you that you need to vacate your locker; student should verify that email address and update it. If your locker has not been emptied after your Rental Term expires, your lock will be cut and the contents of your locker will be removed and put into storage. If you do not come to reclaim your belongings from the Locker Administrator within <strong>ten</strong> business days, they will be donated or thrown out. The Locker Program is not responsible for any items subject to removal from a locker.</span></span></p>
<p><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;"><strong>Locker Access</strong><br />The Locker Program reserves the right to access lockers at its sole discretion if there is a suspected security risk or there is an environmental concern such as pest control or odors. Security has the right to enter a locker at any time should they suspect it contains items that put the college or university environment in danger. Any criminal activity will be reported to police. The college or university is required to provide police with access in the event of a criminal investigation.       </span></span></p>


The Permit Disclaimer 
<p><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;"><strong>The Permit Disclaimer Information</strong> </span></span></p>
<p><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;"><img style="float: right; height: 120px; width: 256px; margin: 5px;" src="/MEDIA/demo_extras/TomahawkUniversity_logo.png" alt="" /></span></span></p>
<p style="text-align: justify;"><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;">Set your terms and conditions here and insist that users agree prior to the purchase.  </span></span></p>
<p style="text-align: justify;"><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;">By Purchasing your parking permit you agree to the terms and conditions set forth herein and further agree to purchase parking here on this day and that other day, from this day forward.</span></span></p>
<p style="text-align: justify;"><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;">You agree to park between the lines and only take up one spot. It is also understood that parking here is at your own risk and that you will not sell , lend, copy or distribute your pass to any other individual with out written consent which has been noterized and seal by the govenment of this university countersigned by the Dean. President, Vice President CEO, grounds keeper and the crossing guard. All Permits are the property of the school and willl be returned at the end of use. Failure to return the  physical permit is subject to a fee of $38,496.98 applied to your pre approved credit card.</span></span></p>
<p style="text-align: justify;"><span style="font-size: 14px;"><span style="font-family: verdana,geneva,sans-serif;">Thank you  for using the Parking Service</span></span></p>


The Vehicle Disclaimer 
<p><span style="font-family: verdana, geneva, sans-serif; font-size: 14px;">By adding this vehicle/license plate to my OperationsCommander profile, I agree to assume all responsibilities for the vehicles registered herein, to adhere to the Traffic and Parking Regulations, as amended from time to time and authorized by the Board of Governors, and to accept all the conditions contained therein. I acknowledge having read these regulations, and further certify that I am in possession of a valid driver's license and that the vehicle registered for parking is properly licensed and insured.</span></p>


Email Headers and Footers Configuration


These are the common elements that will be used for all outgoing emails.
You will probably want to customize the messages as well as add your logo to the header, although there are no rules here you can decide, for example, to put the logo in the footer.
Click on toggle templates and have a look at:

Header Template for Default Email Template 


Email Templates

These are the ones I believe you will be using at this point.

Appeal Decision 
<p>Dear [user show=firstname] [user show=lastname],<br /> <br /> Your violation [violation show=Ticket] has been: [violation show=appeal_type].<br /> [conditional var=violation.appealType test=eq value=2]</p>
<table>
<tbody>
<tr>
<th style="text-align: right;">Original Value:</th>
<td>[violation show=fine]</td>
</tr>
<tr>
<th style="text-align: right;">Current Value:</th>
<td>[violation show=final_fine]</td>
</tr>
</tbody>
</table>
<p>[conditional] <br /> <strong>Administrator Comments:</strong> [violation show=AppealAdminComment]</p>


Appeal Submitted 
<p>Your appeal has been submitted for ticket number <strong>[violation show=Ticket]</strong> on [violation show=TicketAppeal format="Y-m-d h:i a"].</p>
<p>Thank you.</p>


Lost Password 
<p>Hello [user firstname],</p>
<p>Please click <a href="[passwordreset]">here</a> to reset your password.</p>
<p>You may change your profile at the following location:</p>
<p> </p>


Permit Invoice 
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 50%;" colspan="2"> </td>
<td style="text-align: right;" colspan="2">
<p> Address of Invoicing Company<br />Address line 2<br />Address line 3</p>
</td>
</tr>
<tr>
<td colspan="2">
<h1 style="text-align: center;">Sample Invoice<img style="display: block; margin-left: auto; margin-right: auto;" src="/uploads/FILES/PA-DEMO/Banner_W_Tagline.png" alt="" width="242" height="58" /> </h1>
<p> </p>
</td>
<td style="text-align: right;" colspan="2">
<h3> </h3>
<h3>Invoice</h3>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Bill To:</td>
<td style="text-align: right; vertical-align: top;">
<p>[invoice account="name"]</p>
<p>[invoice account="fulladdress"]</p>
</td>
<td style="text-align: right; vertical-align: top;">
<p>Invoice No.:</p>
<p>Date:</p>
<p>Due Date:</p>
</td>
<td style="text-align: right; vertical-align: top;">
<p>[invoice show="invoiceno"]</p>
<p>[invoice show="billdate"]</p>
<p>[invoice show="duedate"]</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>[invoice show="details"]</p>
<p> </p>
<table style="float: right;" border="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: right;">Subtotal</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">$[invoice show="subtotal"]</td>
</tr>
<tr>
<td style="text-align: right;">Taxes</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">$[invoice show="taxtotal"]</td>
</tr>
<tr>
<td style="text-align: right;">Total</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">$[invoice show="amounttotal"]</td>
</tr>
<tr>
<td style="border-top: solid 3px #000000; border-color: #000000;">
<h2>Balance Due</h2>
</td>
<td style="border-top: 3px solid #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; width: 20px; text-align: right;"> </td>
<td style="border-top: 3px solid #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; text-align: right;">
<h2 style="text-align: right;">$[invoice show="amounttotal"]</h2>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>


Create password registration email 
<p> </p>
<p><strong>Hello!</strong></p>
<p> </p>
<p>You are recieving this email because you have created a new account.</p>
<p> </p>
<p><a href="[activateinfo]">Create password</a></p>
<p> </p>
<p>Please complete your registration.</p>
<p> </p>
<p> </p>
<p>Regards,</p>
<p><br />Tomahawk University Parking Services</p>
<p> </p>
<p> </p>
<p> </p>
<p>If you’re having trouble clicking the "Create Password" button, copy and paste the URL below into your web browser:</p>
<p> </p>
<p>[activateinfo]</p>
User Receipt 
<p><img style="margin-right: 90px; margin-left: 90px;" src="/uploads/FILES/PA-DEMO/TomahawkUniversity_logo.png" width="197" height="100" /><br /><br />[user_card]</p>
<p> </p>
<table>
<tbody>
<tr>
<td><strong>Name:  </strong></td>
<td>[payinfo user=fullname]</td>
</tr>
<tr>
<td><strong>Company:  </strong></td>
<td>N/A</td>
</tr>
<tr>
<td><strong>Submitted:  </strong></td>
<td>[payinfo payment=submitdate]</td>
</tr>
<tr>
<td><strong>Amount:  </strong></td>
<td>[payinfo payment=amount]</td>
</tr>
<tr>
<td><strong>Method:  </strong></td>
<td>[payinfo payment=method]</td>
</tr>
<tr>
<td><strong>Processed:  </strong></td>
<td>[payinfo payment=processdate]</td>
</tr>
<tr>
<td><strong>Confirm Code:  </strong></td>
<td>[payinfo payment=confirmcode]</td>
</tr>
</tbody>
</table>
<p> </p>
<p><a class="btn btn-info" href="[payinfo payment=receipt_url]">View the receipt online</a></p>
<p> </p>


Waitlist Selected 
<p>You have been selected to receive a permit in lot [waitlist show="lot"].</p>
<p>You have until [waitlist show="date_to_pay"] to pay for the permit before losing the permit and being returned to the waiting list.</p>


Disclaimers & Messaging

There are only 2 that would be of concern.


Payment Footer 
<p><span style="font-family:verdana,geneva,sans-serif;">Thank you for the payment of your Parking Permit or Violation. By purchasing this permit you have agreed to the terms and conditions prior to moving on to the permit purchase section.</span></p>
 
<p><span style="font-family:verdana,geneva,sans-serif;"><strong>Permit distribution:</strong> Permits are mailed out on the 15th of the month to your selected mailing address. If you wish to pick it up please contact parking@yourschool.com and quote your name and permit #. Any permits purchased after the 15th can only be picked up at the office.</span></p>
 
<p><span style="font-family:verdana,geneva,sans-serif;">You may pick up your permit at the Parking Office between</span></p>
 
<p><span style="font-family:verdana,geneva,sans-serif;">9:00 am and 3:00 PM Monday to Friday.</span></p>
 
<p><span style="font-family:verdana,geneva,sans-serif;">If you have any questions please contact The Parking Office</span></p>
 
<p><span style="font-family:verdana,geneva,sans-serif;">855-410-4141</span></p>


Receipt Header 
<table align="center" width="700">
    <tbody>
        <tr>
            <td align="left"><span style="font-family:verdana,geneva,sans-serif;">Reciept header beside  HST in a table</span></td>
            <td align="right"><span style="font-family:verdana,geneva,sans-serif;">HST #1234556789</span></td>
        </tr>
        <tr>
            <td align="left"> </td>
            <td align="right"> </td>
        </tr>
        <tr>
            <td align="left" colspan="2">
            <p style="text-align: center;"><span style="font-size: 18px;">Thank you for parking at Tomahawk University...your payment details appear below.</span></p>
 
            <p style="text-align: center;"><span style="font-size: 18px;"><em><strong><span style="font-size: 14px;">If you have purchased a temporary parking permit (print at home parking permit),<br />
            please proceed to the (H)istory page of your ParkAdmin profile and select the printer icon<br />
            located beside the respective parking permit number.</span></strong></em></span></p>
            </td>
        </tr>
    </tbody>
</table>

Notice Literature

These are notices that get sent out to end users as an email. They would use the Headers and Footers you configured above.

Overdue Notice Literature 
<p>This letter will serve as notice and advise you that your account with Parking Services is now past due. Please refer to the table below for a report of your outstanding items remaining unpaid with Parking Services at the time of this mailing. Further details regarding this overdue amount are available to you by logging-in to the OperationsCommander system. Your username required to access ParkAdmin is provided above. If you have forgotten your password, please use the "Lost or Forgotten Password" link on the main log-in page or contact Parking Services. For your convenience, your outstanding balance can be paid securely on-line using your credit card (Visa or MasterCard). You can also settle your account with Parking Services by mailing your cheque or money order to our office after selecting your payment option and obtaining a reference number on-line from ParkAdmin - please make your cheque payable to and mail same to Parking Services at the following address: Parking Services If you have already settled your account with Parking Services, we apologize for the inconvenience and thank you for your payment. By this notice, Parking Services advises that overdue accounts listed under a public profile remaining unpaid within 30 days of this notice will be forwarded for collection/recovery. If you are registered as a student at the outstanding balance will be forwarded to the Business Office 14 days post violation date by Parking Services. With this application against your student account, student transcripts will not be released until all accounts are settled. Thank you for your prompt attention to this matter.</p>
New Notice Literature 
<p>This communication will serve as notice and advise you that you have received a parking violation notice from Parking Services. Your violation may be eligible for an early payment discount. To view additional details about this violation or to appeal/make payment, please log-in to your ParkAdmin account.</p>

Email Templates

Navigate to Email Templates

In order to find your current default email templates, you will have to login as an admin and navigate to the system config cog. From this drop-down menu, you should see Email Content

image.png

Editing Default Email Templates 

To edit the default email templates, you can click the Edit button next to the template you wish to adjust. After you click this, you will be taken to another area where you can make your changes to the current email template. 

image.png

Using Shortcodes

Each email template will have available shortcodes that you can use to craft your message to your liking. The shortcode tokens are displayed on the left of the template editor. As you can see in the image below, the email template for Appeal Submitted by User offers the ability to craft messages without knowing when the ticket was appealed, as well as the ticket being appealed. This offers you a very quick and seamless way to make your email templates more engaging and informative. 

image.png

You should be able to use these codes in the smart editor to the right and it will display the appropriate information to the desired user. The smart editor also gives you the ability to add images and format your messages. 

Email Template Fields - What do they do? 

Label
The label field is how you will identify your email templates. 
Type
The type is an nonadjustable value that lets you know the type of the email template.
Language
This field contains two options that allow you to select between French or English. 
Layout
Select the layout that surrounds your messaging, this allows you to have multiple different layouts for different email templates. These layouts include your email header, footer, and its styling. You can create or adjust email template layouts under System Config → Email Headers & Footers.
Subject
This is the subject of the message you wish to send under the current email template. 
HTML Content
Here you will write the message your users will receive. You can insert images, shortcodes, and use the smart editor, to format your messages just like other word processors. 
Text Content 
This section is a simple text editor that does not offer the use of shortcodes or any formatting. This is simply for the message itself and not necessarily the

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

Default Header and Footer for Mobile Readiness and SwiftDeploy

Accessing System Settings

First we must go into System Settings from the System Configuration menu.


image.png

We are looking for the Global component in the list of system setting components.

image.png


In Global Setting we will see two areas where we can configure images to be used. 

image.png

By clicking on Select Image we will be taken to the Manage Files section where images and files are stored.

Setting the Default Logo

Here we will select an image to be used as the default site logo.

image.png

Setting the Default Header Image

We can now set the Default Site Header image.

image.png

Once the images are selected they will appear in the configuration settings.

image.png

Where The Changes Appear

These images will appear in various places in the system. If no header or logo is set in the Templates and Designs section of the system, these default images will be used.

In our example we are using the default header and logo on the user portal...

image.png

As well as the phone interface utilized in Real-Time Parking.

image.png

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 Config, 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.