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)]

 

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?