# Templates and Design

The Templates and Design module allows administrators to heavily customize the visual functionality and branding of the User Portal. Its primary purpose is to structure the visual layout around your core page content, ensuring the portal accurately reflects your corporate branding and provides a seamless user experience. This article is intended for OPS-COM administrators.

## Setup and Configuration Configuring your portal's design involves creating a foundational layout and then building specific templates within that layout. **Admin Side:** ### Creating a Layout 1. Hover over **[System Configuration](https://opscom.wiki/books/setup-configuration-for-admins/chapter/system-configuration)** and click **[Templates and Design](https://opscom.wiki/books/setup-configuration-for-admins/page/templates-and-design)**. 2. Click the **Create Layout** button located at the top right of the page. 3. Enter a descriptive name for your new layout in the provided field. 4. Click the **Save Changes** button. The layout will now appear in your Layouts list. 5. Click the **Non-Default** drop-down menu and select **Default** if you wish to make this the active layout for your system. ### Creating Templates 1. Hover over **[System Configuration](https://opscom.wiki/books/setup-configuration-for-admins/chapter/system-configuration)** and click **[Templates and Design](https://opscom.wiki/books/setup-configuration-for-admins/page/templates-and-design)**. 2. Click **Toggle Templates** next to your newly created layout to display its available templates. 3. Click the **Create** button to begin adding specific section templates to the layout, including bilingual support for English and French. **User Side:** End-users do not interact with the setup of templates. They will simply view the customized layout when navigating the User Portal to register, add vehicles, purchase permits, or pay violations. ## Using this Feature The OPS-COM User Portal is split into specific visual sections using templates. All core text content is added through **[Pages and Content Blocks](https://opscom.wiki/books/setup-configuration-for-admins/page/pages-and-content-blocks)**, while templates wrap around that content to provide styling and structure. ### Template Sections - **Header:** The top of your page containing the header image, logos, and primary user navigation. - **Content\_Header:** An upper section to place content, such as alerts or user information, before the main body. - **Content:** The core content of your pages. This cannot be added from the templates module and requires you to navigate to the system messaging tools. - **Content\_Footer:** A lower section appearing after the core content. You can use this to display subsequent alerts, messages, or additional context. - **Footer:** The bottom of your page used to advertise important information, provide contact details, or display software versioning. ### Available Actions & Buttons - **Toggle Templates:** Click this button to instantly display all of the section templates currently attached to a specific layout. - **Edit:** Click this button next to a layout or section name to modify its details and source code. - **Archive:** Click this button to safely retire a layout that you are no longer using without permanently deleting its history. ### Default System Templates If you adjust the scripts and styles to the point of breaking your site, or you are unsure what your changes have done, you can refer to the default templates below to quickly restore your page's 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
``
**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
``
**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``><``img` `src``=``"https://tomahawku.parkadmin.com/uploads/FILES/OC_TOMA/cp-downtown.jpg"` `/>`
`    ``<``div``><``img` `src``=``"https://tomahawku.parkadmin.com/uploads/FILES/OC_TOMA/cp-hospital.jpg"` `/>`
`    ``<``div``><``img` `src``=``"https://tomahawku.parkadmin.com/uploads/FILES/OC_TOMA/cp-postoffice.jpg"` `/>`
`  ```
`  ``<``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;"``/>`
`  ```
``
`[user_menu]`
--- ## Best Practices and Considerations - **Avoid complex code changes if non-technical:** **If you are non-technical, it is highly advised not to change the raw code for Scripts, Styles, Header, and Footer Templates.** Instead, rely on the provided default templates to ensure site stability. - **Use verified script vendors:** **Only use verified script vendors like Bootstrap and jQuery to avoid breaking site functionality.** Unverified JavaScript vendors can actively disrupt the user portal and cause elements to load incorrectly. - **Leverage API integrations:** **Use the OPS-COM API to integrate with pay stations and other devices.** This allows you to securely grab and display useful information from your users directly within your portal templates.