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: Add CSS resources

You can add CSS resources to your widget, page, or master template only through markup. You have two options to add the CSS:

  • As a content item - your CSS styles remains a separate file
  • As an embedded resource - your CSS styles are combined together with the Sitefinity CMS styles in a single file on the client side. This also allows you to include CSS resources from external libraries.

No matter which option you choose, your CSS file is loaded in the browser, but in a different manner.

NOTE: To see how to include CSS styles using Sitefinity CMS CSS widget, see CSS widget. 

Add the CSS as a content item

To include CSS resources, you register the Telerik.Sitefinity.Web.UI assembly in the markup of your widget, page, or template. 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. Depending on whether you are adding the CSS resource to your widget, page, or template, open the markup of the .ascx, .aspx, or .Master file, respectively, and add the following code:

    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
  3. In the context menu of the .CSS file, click Properties.
  4. Set Build Action to Content.

Add the CSS as an embedded resource

You can also add the CSS file as an embedded resource by setting the build action of your CSS file to Embedded Resource. To do this:

  1. In Visual Studio, open your Sitefinity CMS project.
  2. Depending on whether you are adding the CSS resource to your widget, page, or template, open the markup of the .ascx, .aspx, or .Master file, respectively, and add the following code:

    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 ommit it entirely.
    • 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, add the full name of any type in the assembly where the resource is embedded. 
  3. In the context menu of the .css file, click Properties.
  4. Set Build Action to Embedded Resource.
  5. In the AssemblyInfo.cs class of the external library, add the following System.Web.UI.WebResource:
    [assembly: WebResource("ExternalResources.Styles.Layout.css", "text/css", PerformSubstitution = true)]

 

Back To Top

Next: For developers: Add jQuery resources and other libraries