The Portal is built using the Bootstrap front-end framework and as a result you can quickly and easily brand the Portal for your organization. Bootstrap includes CSS and JavaScript components for common web application interface elements and includes styles for navigation elements, forms, buttons, and a responsive grid layout system. The update of the bootstrap file will complete the majority of the branding changes and so updating bootstrap is the place to start.

In addition to the bootstrap css there are other web files and templates that will not be identified within the bootstrap framework but can be copied and modified:

• ‘Velocity365.css’ Web File (+ reference in ‘Header’ or ‘Footer’)
• ‘Header’ Web Template - must be referenced by the website record
• ‘Footer’ Web Template - must be referenced by website record
• ‘Velocity365/General/StylesAndJavaScriptForNoHeaderFooter’ Web Template - affects some content inserted asynchronously via IFRAMEs or Ajax
• Additional (add your own) CSS/JavaScript/font Web Files (+ reference in ‘Header’ or ‘Footer’)

If you decide to use a custom bootstrap.min.css, you can apply it to your portal by applying the custom Bootstrap theme without modifying the site code by uploading it as a web file

For additional information on customizing your portal search for “Create a theme for your portal” on the Microsoft documentation site or click here.

Updating Web Files

To apply a custom CSS file:

1. Sign into the portal as an Administrator.
2. Navigate to the portal’s Home page. The editing dialogue displays.
3. Select Children. The Edit Children dialogue displays.
4. Navigate to the current CSS file and select the Edit this File (pencil and paper) button to the right of the CSS file that is being edited. The Edit this File form displays.
5. Select Choose File and navigate to the new CSS file and select Open. The name of the selected file displays to the right of the Choose File button.
6. Enter bootstrap.min.css in the Partial URL field. This value indicates to the Dynamics 365 portal's framework that it should use your custom version of Bootstrap instead of the default version included.
7. NOTE: Do not replace the velocity365.css file. Rather, copy and deactivate the original file and modify the new file.
8. Select the Hidden from Sitemap check box (selected by default), so that this file doesn't appear to users on the site.
9. Select Save.
10. Refresh the page, and your customized styles will appear immediately.

Updating Web Templates

The web templates within VeloCITY 365 define the reusable content structures. Web templates are used to determine full page layouts, the major boundaries and sections of a page or simple web services/endpoints to small embeddable widgets and contain much of the visual elements and logic that make up Velocity 365. Web Templates can be embedded within one another, for example widgets are small Web Templates containing one or more elements that can be embedded on a page.

VeloCITY 365 integrates an open-source template language called Liquid for templating syntax and HTML, CSS and JavaScript. The use of Liquid allows for server-side logic to determine what is returned to the web browser. Liquid uses a combination of objects, tags, and filters to render dynamic content.

NOTE:

It is very important that you never customize original VeloCITY 365 web templates as this makes upgrades difficult. It is recommended that the templates be copied and then updated so the query functions are available but the page display is updated. Also note that some templates are referenced by name and so the copied templates need to have the same name.

The custom templates and elements can be reused, and so don’t store text directly within them.

To customize web templates:

1. Log into VeloCITY 365 as an Administrator
2. Use the Application Selector to Navigate to Dynamics 365 Portals -> Content -> Web Templates. The Web Templates form displays.
3. Open the web template to be modified and copy the source code.
4. Click New. The New Web Template form displays.
5. Enter the required information and paste the code into the Source field.
   1. Name the new web template with a similar and easily recognizable name. Note: some web templates are referenced by name.
6. Click Save and Close.
7. Deactivate the original web template.

For more information on portal pages, refer to the Microsoft website and search for “Configure site settings for portals”, or click here.

For more information on widgets within this document, refer to the Widgets section 19, or by clicking here

Site Settings

The site settings are configurable records that the portal references to either modify behavior or visual information. There are Global Portal, Portal site and Velocity365 settings. For more information on the Global Portal and Portal site settings, refer to the Microsoft website and search for “Configure site settings for portals”, or click here.

The typical Velocity365 settings are: