Overview

Templates, which are sometimes referred to as "Themes," play a crucial role in defining the look and behavior of a website. They are the files into which JavaScript (js) and Cascading Style Sheets (CSS) are incorporated. Below is a streamlined explanation of the process and structure involved in working with templates or themes within a content management system (CMS).

Understanding Templates and Master Pages

• Templates/Themes: These are the design elements that dictate the visual appearance of a website. They include the necessary JavaScript and CSS to style and provide functionality to the web pages.
• Master Page: Typically, a theme will have a master page, which serves as a template for the common elements that are shared across different pages of the website. The master page includes essential elements such as the HTML structure, specified language, metadata, and favicon. It also facilitates the passing of CSS and JS to the individual pages.

Working with the Base Theme

• Base Theme: The Base Theme (BaseTheme.ascx), provided as part of the standard package, draws its CSS and JS from the CMS settings as defined in the "Site Configuration."
• Master Page File Integration: The BaseTheme.ascx file is designed to implement the master page file, ensuring a consistent layout across the site.
• Resource Control: It features a top style resource control for outputting CSS files and a bottom resource control for JS files, both of which should link to a detailed explanation on how these controls work. The page will have placeholders for these resources.
• Advantage Page Name Property: This property sets the display name for the theme within the CMS dropdown menus for easier identification.
• Base Theme Code-Behind (BaseTheme.ascx.cs): The accompanying code-behind file for the base theme inherits from AdvantagePageTemplate. It performs several key functions:
• Zone Container Definition: It specifies where dynamic content can be placed within the template.
• CSS and JS Resource Population: It fills the top and bottom resource controls with CSS and JS, respectively, based on the configurations set within the "Site Configuration." This includes settings for both the "Base Theme" section and respective "Style Sheets" and "JavaScript Files" sections.

Creating or Modifying a Template

• Customization: Developers can either modify the existing base template or set up a new one by following the established procedures and considering the details outlined above.
• Uniqueness: It is important to assign a unique AdvantagePageName to each template to avoid confusion and ensure proper identification within the CMS.

When creating a new theme or modifying an existing one, developers may need to statically include additional stylesheets within the theme folder, especially if they wish to deviate from the default styles provided by the base theme.

The directory ~/Templates/websitetemplate is commonly used to house these theme-related files. Care should be taken to maintain a clean and organized folder structure to streamline the management and updates of the website's themes.

Adding CSS and JS for a Module

Managing CSS and JS resources efficiently is essential for maintaining high performance on your website. Including unnecessary resources across the entire site can lead to slower page loads and a suboptimal user experience. Here's a refined approach to handling these resources selectively:

CSS and JS Resources on Specific Pages

Instead of loading CSS for features like an accordion across the entire website, which is only necessary on, say, the FAQ page, it is more efficient to load it only where it's used. This targeted approach conserves bandwidth and improves page load times, enhancing overall performance.

Loading Resources on a Module Basis

1. Register Resources on a Per-Module Basis: Load and register resources, such as JS plugins, directly within the module that requires them. This should be done in such a way that the resources are loaded after essential libraries like jQuery have already been initialized. Detailed instructions on how to accomplish this can typically be found in documentation articles about registering JavaScript at the bottom of a page.

Running JavaScript Code Conditionally

Here are multiple strategies to run JS code only when a specific module is present on a page:

1. Inline Module Scripting:
• Directly write the JS code within the module and inject it at the bottom of the page.
• This method encapsulates the JS within the module, making it easier to manage and understand.
• Ideal for simple plugin initializations where the scope of the JS is limited.


2. Using a Div Callback Attribute:
• Place a div with a specific callback attribute in module.ascx (the module file).
• In the main JavaScript file, check for the existence of this div and execute the code if found.
• This approach allows you to trigger JS functionality based on the presence of the module.



Module

$(window).bind("load", function () {});
​<div data-js-callback="initTabbedContent"></div>

 


3. Function Calls from a Central JS File:
• Define a function within the module's JS code.
• Call this function from a central JS file, like base-functions.js, when necessary.
  

• Data Callback

  var called = false;
  var callback = $('div[data-js-callback]').attr('data-js-callback');
  
  if (typeof callback != 'undefined') {{10533693}
  // type 1 of calling function that is setup on a module;
  if (callback == 'initTabbedContent') initTabbedContent();
  }

• This is especially useful when the function needs to be executed in response to events like window resizing, where the event handling is already set up in base-functions.js.

• base.js

  // type 2 of calling function that is setup on a module;
  if (typeof callModuleFunction == 'function') {
  callModuleFunction();
  
  

Each of these methods provides a way to conditionally run JavaScript based on the presence and needs of specific modules, ensuring that the code is only executed when necessary. By choosing the appropriate strategy for your situation, you can keep your site's performance optimized while maintaining clear and maintainable code structures.

Theme Creation - Get Started Guide

The AdvantageCSP platform is flexible enough to allow developers to adapt any Bootstrap theme to fit within its framework. Here’s how the process typically unfolds:

Adapting a Bootstrap Theme for AdvantageCSP

1. Template Folder: When you create a domain in AdvantageCSP, it includes a Template folder. This is where you will find essential files for theming.
2. Base Theme: It's recommended to start with the Base Theme that is provided as part of the template. This acts as a starting point and follows the conventions of the AdvantageCSP.
3. Master Page and Base Theme:
• Extract the general layout from your chosen Bootstrap or HTML5 theme and incorporate it into the master page, usually named something like Primary.master.
• This master page file (Primary.master) is the main template that every other page on the site will inherit from. It is located in the directory path ~/DomainNameFolder/Templates/.
4. Creating the Template:
• You will then create a page, such as BaseTheme.aspx, that will serve as the template for your pages.
• At the top of the BaseTheme.aspx, ensure that you inherit the master page created earlier by setting the Inherits attribute to something like Inherits="AdvantageCSP.Templates_AdvantageCMS_BaseTheme".
5. Customizing the Template:
• You can customize the template by changing the properties, such as the AdvantagePageName. This name appears in the dropdown menu in the Site Manager when users are creating a page, allowing for easy identification.
• For a Bootstrap theme, specific scripts or CSS that need to be present on every page can be included within this base template.
• While you can directly include js and CSS links in the head section of the master page, managing these resources through the Admin section is often more maintainable and is the preferred method.
6. Responsive Meta Tag: To ensure that the theme is responsive and mobile-friendly, include the viewport meta tag in the head section of your master page:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

This meta tag ensures that the page works well on all devices by setting the viewport to device width and controlling the scaling behavior.

By following these steps, you convert a Bootstrap theme to work seamlessly with the AdvantageCSP platform. The flexibility of the system means that it can adapt to various frontend frameworks and design approaches while maintaining the backend functionality and content management capabilities that AdvantageCSP offers.

Register Javascript At The Bottom Of The Page

Register JavaScript At The Bottom Of The Page

Registering JavaScript at the bottom of the page is a common best practice for web development because it allows the HTML content to load first, potentially improving page load times and user experience. In the context of using Advantage CSP, here's how and why to implement JavaScript at the bottom of the page, especially within modules:

Benefits of Registering JavaScript at the Bottom:

1. Organization: Placing JavaScript in the module where it is used keeps the script closely associated with its relevant content, promoting better organization within your codebase.
2. Performance: Having JavaScript code run only on pages where its corresponding module exists reduces unnecessary script execution, enhancing performance.
3. Compatibility: Ensuring JavaScript is at the bottom of the page aids in compatibility with themes that can be toggled within the CMS, as it helps prevent issues that might arise from scripts executing before the DOM is fully ready.

How to Register JavaScript at the Bottom of the Page in Advantage CSP:

1. Module Instantiation: When you create or edit a module, include the JavaScript code within that module's code. This could be through inline scripts or by referencing external JavaScript files.
2. Use CMS Features: Take advantage of the CMS’s built-in features to include scripts at the bottom of the page. The system may offer options to specify where the scripts should be placed.
3. Ensure Dependencies: Make sure that any dependencies, like jQuery or other libraries, are loaded before your module's JavaScript. If the CMS allows, arrange script tags or script blocks to ensure the correct load order.
4. Dynamic Insertion: If necessary, dynamically inject the script at the end of the body using JavaScript. This can be done by appending script elements to the DOM in the module's code.
5. Documentation and Links: If the CMS documentation provides guidelines or tutorials on how to manage theme toggling and script registration, it is essential to follow these instructions closely to maintain theme compatibility.

By implementing these practices, you can ensure that JavaScript associated with specific modules only loads when needed, keeping the website lightweight and functional regardless of the theme selected in the CMS.

RegisterBottomScript()

Found in : AdvantageCommonBasePage, AdvantageModule<br>
<br>
The easiest method is to wrap your script in an asp literal, and register it from code behind.<br>
<br>
RegisterBottomScript will place your code at the very end of the page. <br>
<br>
&lt;asp:Literal runat="server" id="litJavascript"&gt;<br>
&lt;script&gt;...&lt;/script&gt;<br>
&lt;/asp:Literal&gt;<br>
<br>
protected void Page_Load(object sender, EventArgs e)<br>
{<br>
this.RegisterBottomScript(litJavascript);<br>

InjectJavascriptIntoContentPlaceHolder()

<p>If you need to use server tags, you won't be able to add them into a literal. Use this method instead.<br>
<br>
From code behind, we grab the div and inject it into the content placeholder at the bottom of the page.<br>
<br>
&lt;div runat="server" id="divBottomJavascript"&gt;<br>
&lt;script&gt;...&lt;/script&gt;<br>
&lt;/div&gt;<br>
<br>
private void InjectJavascriptIntoContentPlaceHolder()<br>
{<br>
var master = Page.Master.Master ?? Page.Master;<br>
ContentPlaceHolder bottomJavascriptContent = master.FindControl("BottomJavascriptContent") as ContentPlaceHolder;<br>
HtmlGenericControl divBottomJavascript = this.FindControl("divBottomJavascript") as HtmlGenericControl;<br>
if (bottomJavascriptContent != null &amp;&amp; divBottomJavascript != null)<br>
{<br>
bottomJavascriptContent.Controls.Add(divBottomJavascript);<br>
}<br>
}<br>
<br>
protected void Page_Load(object sender, EventArgs e)<br>
{<br>
InjectJavascriptIntoContentPlaceHolder();<br>
....</p>
<br>

​ Adding Custom CSS to Layouts within the Page Manager

Advantage CSP empowers you to tailor the frontend design by offering various ways to integrate custom CSS, allowing for precise control over the appearance of different elements. Here's how you can apply CSS at different levels within the platform:

Global Level

• Global CSS: For universal styles that apply across the entire website, use the global.css file. This is the primary stylesheet for global styling.
• Component-Specific CSS: For styles that pertain to specific modules or components, place your CSS in components.css. This keeps module- or component-specific styles organized separately from the global stylesheet.

See guide: configuring-advantage-csp-stylesheets

Adding Custom CSS to Layouts within the Page Manager

Adding Custom CSS to a Module

Module-Specific CSS: To apply custom styles to a module:
Click on the module that you want to style.
Enter the desired CSS class within the module settings to override the default styles


Editor-Specific CSS: To add custom styles within the content editor:
Go to 'Domain Settings', then 'Configuration'.
Navigate to 'System' and then to 'Editor Settings'.
Scroll down to 'Apply Classes' to define the styles available within the editor.

See guide: Adding CSS to your Editor

Adding Custom CSS to a Module