Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

For developers: Include CSS, JavaScript, and jQuery resources in new user widgets

Using CSS styling and JavaScript logic and jQuery support is a part of the process of developing your custom Sitefinity CMS features. Thus, your custom functionality is styled and presented according to your requirements.

You can include CSS and JavaScript resources in the following ways:

  • You can add them to the implementation of your custom and user widgets
  • You can include them inside master and content pages
  • You can use the built-in Sitefinity CMS Scripts and Styles widget.

Include CSS resources

To include CSS resources, you register the Telerik.Sitefinity.Web.UI assembly in the markup of your widget or page. Thus, you have access to Sitefinity's ResourceLinks widget via the sf tag prefix. To do this:

  1. In Visual Studio, open your Sitefinity CMS project.
  2. In the markup of the .ASCX/.ASPX/.Master file add the following code:
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
      
    <sf:ResourceLinks ID="resourceLinks" runat="server" UseEmbeddedThemes="false">
        <sf:ResourceFile Name="~/CSS/Layout.css" Static="true" />
    </sf:ResourceLinks>
  3. In the code above, you register the Telerik.Sitefinity.Web.UI assembly with the following tags:
    • In ResourceLinks tag, set the value of UseEmbeddedThemes to false
    • In ResourceFile tag, set value of Static to true
    • In ResourceFile tag, set the value of Name to be the relative path to your resource
  4. In the context menu of the .CSS file, click Properties.
  5. Set Build Action to Content.

You can also set the Build Action of your CSS file to Embedded Resource. In this case, the resulting CSS styles will be combined together with the Sitefinity CMS styles in a single file on the client side. This will also allow you to include CSS resources from external libraries.

To do this, perform the following:

  1. In Visual Studio, open your Sitefinity CMS project.
  2. In the markup of the .ASCX/.ASPX/.Master file, add the following code:
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
     
    <sf:ResourceLinks ID="ResourceLinks" runat="server">
        <sf:ResourceFile Name="ExternalResources.Styles.Layout.css" AssemblyInfo="ExternalResources.Program, ExternalResources" Static="true"></sf:ResourceFile>
    </sf:ResourceLinks>
  3. In the code above, you register the Telerik.Sitefinity.Web.UI assembly with the following tags:
    • In ResourceLinks tag, set the value of UseEmbeddedThemes to true or leave it empty.
    • In ResourceFile tag, set value of Static to true.
    • In ResourceFile tag, set the value of Name to be the assembly path to your embedded resource.
    • In the AssemblyInfo tag, enter the full name of any of the classes that are in the assembly where the resource is embedded. 
  4. In the context menu of the .CSS file, click Properties.
  5. Set Build Action to Embedded Resource.
  6. In AssemblyInfo.cs class of the external library, add the following System.Web.UI.WebResource:
    [assembly: WebResource("ExternalResources.Styles.Layout.css", "text/css", PerformSubstitution = true)]

For more information about including CSS styles using the Sitefinity's built-in widget, see CSS widget.

Include JavaScript resources

To include JavaScript resources, you register the Telerik.Sitefinity.Web.UI assembly in the markup of your widget or page. This way, you have access to Sitefinity's ResourceLinks widget via the sf tag prefix.

To do this, perform the following: 

  1. In Visual Studio, open your Sitefinity CMS project.
  2. In the markup of the .ASCX/.ASPX/.Master file, add the following code: 
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
     
    <sf:ResourceLinks ID="ResourceLinks1" runat="server">
        <sf:ResourceFile Name="ExternalResources.Scripts.Library.js" AssemblyInfo="ExternalResources.Program, ExternalResources" Static="true"></sf:ResourceFile>
    </sf:ResourceLinks>
  3. In the code above, you register the Telerik.Sitefinity.Web.UI assembly with the following tags:
    • In ResourceLinks tag, set the value of UseEmbeddedThemes to true or leave it empty.
    • In ResourceFile tag, set value of Static to true.
    • In ResourceFile tag, set the value of Name to be the assembly path to your embedded resource.
    • In the AssemblyInfo tag, enter the full name of any of the classes that are in the assembly where the resource is embedded.  
  4. In the context menu of the .js file, click Properties.
  5. Set Build Action to Embedded Resource.
  6. In the AssemblyInfo.cs class of the external library, add the following System.Web.UI.WebResource:
  7. [assembly: WebResource("ExternalResources.Scripts.Library.js", "application/x-javascript")]

By using an embedded resource and passing the assembly path, your JavaScript file will be combined together with other Sitefinity CMS resources into a single file on the client side.

You can also add JavaScript resources programatically. To include JavaScript resources, in Visual Studio, in the code-behind of the .ASCX.CS/.ASPX.CS/.Master.CS file, enter the following code:

protected void Page_PreRender(object sender, EventArgs e)
{
    var scriptManager = ScriptManager.GetCurrent(Page);
 
    if (scriptManager == null) return;
 
    scriptManager.Scripts.Add(new ScriptReference { Path = "~/JS/Script.js" });
}

The Page_PreRender method of your widget uses the ScriptManager class for the current page.

Using the Scripts property of the ScriptManager, you add a reference to your JavaScript resource by passing a new ScriptReference object with the resource's relative path.

For more information about including JavaSript code using the Sitefinity's built-in idget, see Java Script widget.

Include Sitefinity's built-in jQuery resource

To include Sitefinity's built-in jQuery resources, you register the Telerik.Sitefinity.Web.UI assembly in the markup of your widget or page and add the following code:

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
 
<sf:ResourceLinks ID="ResourceLinks" runat="server">
    <sf:ResourceFile JavaScriptLibrary="JQuery"></sf:ResourceFile>
</sf:ResourceLinks>

You can also include Sitefinity's built-in jQuery programatically by using the PageManager class. To use the PageManager, add the following namespace in the beginning of the code-behind of the .ASCX.CS/.ASPX.CS/.Master.CS file:

using Telerik.Sitefinity.Modules.Pages;

Next, include a reference to Sitefinity's built-in version of jQuery library. To do this, use the PageManager class in the Page_PreRender method of your ASCX.CS file code-behind implementation:

protected void Page_PreRender(object sender, EventArgs e)
{
    PageManager.ConfigureScriptManager(Page, ScriptRef.JQuery);
}

This code registers the built-in version of jQuery, so that your widget can access the library. 

Back To Top

Next: Administration: Enable ASP.NET bundling and minification