Presentation, Theming and Styling The Portal Connector

The Portal Connector 5.2 and Above

Configuring

Info: This section is also applicable for The Portal Connector v5.1 Sitefinity 12 and above builds.

Individual styling properties on widgets have been removed and replaced with global equivalent settings. This makes it much easier to manage your site styling without having to go through every widget.

To configure these new settings, navigate to the Sitefinity backend and under Administration > Settings select Advanced > PortalConnectorMvc > Presentation

Settings

• Resource Package Base – This determines what style and script package to use. The Bootstrap4 and Bootstrap3 base options include the relevant Bootstrap JavaScript and Style references, including a specific Portal Connector stylesheet that styles our controls according to those resource packages. Select None if you want to provide your own styling using a custom resource package, or if you don’t want to include the Portal Connector styles.
• Custom Bootstrap Theme – This option prevents the default Bootstrap css files from being injected to allow you to add your own Bootstrap theme file. Use this if you don’t want the default bootstrap themes.
• Exclude Bootstrap JS – This option prevents adding the bootstrap JS files if you need to source them from elsewhere or make modifications to them. By default the Bootstrap4 scripts are referenced from the ResourcePackage folder and the Bootstrap3 scripts are referenced from the Telerik.Sitefinity.Frontend dll embedded resource.
• Global Kendo Theme – This determines the theme of all Kendo controls on the site, including any custom controls.
• Custom Kendo Theme – Select this option if you want to include a custom theme package for Kendo. All theme references will no longer be included once checked.
• Automatic Kendo Culture – Determines the culture of the page and automatically injects the relevant Kendo culture files that format dates, currency and numbers.
• Automatic Kendo Localization – Determines the current culture of the page and automatically injects the relevant Kendo localization files for translating default labels on Kendo widgets. Must be used in conjunction with Automatic Kendo Culture

Breaking changes from previous versions

If you are upgrading to the new templating system used in The Portal Connector 5.2 or the Sitefinity 12 version of The Portal Connector 5.1, there are breaking changes that you must accommodate to have a successful upgrade.

Custom Template Style and Script Reference Updates

Description

The new template system greatly simplified the amount of style and script reference code required in every Portal Connector template, however this means that the older references to all the styling specific properties no longer work. They no longer work because the properties are no longer present, causing compile time errors. Follow these steps to upgrade your custom templates.

Fix

1. In most templates, you’re removing all style references and any script reference that is not the specific script for the file in question (ie TextField view and tpc-text-field.js), so for each custom template for Portal Connector widgets, remove all Script and Style references to the following files:
   • JavaScript
     • JQuery
     • KendoAll
     • JsZip
     • Bootstrap
     • KendoCulture
     • KendoMessages
     • kendo-culture.js
     • frontend-tpc-api.js
   • CSS
     • KendoCommon
     • KendoTheme
     • KendoThemeMobile
     • Bootstrap
     • FontAwesome
     • tpc-frontend-styles.css
2. Replace the removed code with the newly equivalent line:
   
   

   @Html.TpcScriptReferences(Model)

3. Ensure that the following using is also included at the top of the file
   
   

   @using pavliks.PortalConnector.Mvc.Extensions

This is the extent of the changes required to upgrade a template. If you get confused on what files or lines to remove, simply edit the default template, and then copy and apply the differences into your template.

For example, the changes required for the TPC Grid widget are outlined below:

Custom Themes on Existing Widgets

Description

Kendo themes selected on widgets prior to upgrade will no longer have any affect on widgets.

Fix

Navigate to the Presentation configuration section as documented above and select the global Kendo theme that you wish to use for all widgets.

Note: The theme is now global, per-page based themes are no longer supported unless you completely disable all Kendo theming done by The Portal Connector and add the different themes to your page templates.

The Portal Connector 4.0 to 5.1

For styling a site on TPC 5.1 running Sitefinity 12, please see the documentation above.

Configuring

Changing the Kendo Theme, Bootstrap styles or Culture of the page is all accomplished through page widget Advanced Properties. Every page widget has these properties, and if multiple page widgets are present on the same page, they will all need to be updated to match accordingly.

Settings

• EnableKendoThemes – Default True – Determines whether to inject any Kendo theming related stylesheets, including KendoCommon, KendoTheme and KendoThemeMobile
• KendoTheme – Default Bootstrap – Selects the present Kendo theme to inject into the page.
• EnableKendoCulture – Default True - Determines the culture of the page and automatically injects the relevant Kendo culture files that format dates, currency and numbers.
• EnableKendoCultureMessages – Default False - Determines the current culture of the page and automatically injects the relevant Kendo localization files for translating default labels on Kendo widgets. Must be used in conjunction with EnableKendoCulture
• EnableBootstrapStyles – Default True – Determines whether to inject the Bootstrap stylesheet, set to false to enable custom Bootstrap theming.