Referencing Sitefinity 4.1 Themes, CSS From External Pages

Global styling in Sitefinity 4+ is handled by creating and registering a theme, and then applying it using the admin tool to your Sitefinity page templates:

Pretty easy, but what about if you need to reference that style sheet from an external web page that wasn't created within Sitefinity? Or to reference it right from the markup of your page templates/master pages? Looking at the solution the path will be something like:

/App_Data/Sitefinity/WebsiteTemplates/HomePage/App_Themes/Teal/Global/main.css

But we know the ASP.Net App_Data folder has special permissions that will not allow us to directly reference files within it... if we try to use this path to reference the stylesheet, we'll get a 403 error.

Fortunately, after you register a theme, Sitefinity will automatically re-route directly from the /Sitefinity folder at the root of the application into the /Sitefinity folder that exists at /App_Data/Sitefinity... kind of a client-side backdoor into your themes and templates.

So the easy answer to referencing your Sitefinity themes client-side, is just remove the "/App_Data" from the path. You can see this pathing structure if you look at the source code of your Sitefinity pages as well - example:

<link href="/Sitefinity/WebsiteTemplates/HomePage/App_Themes/Teal/global/main.css" type="text/css" rel="stylesheet" />

Styling / Formatting Sitefinity 4 controls

One of the big differences between Sitefinity 3.x and 4 is in the way the style and layout of the controls is handled. In the older versions, you had direct access to the .ascx code in either the ControlTemplates folder or the UserControls folder. In 4.x, all Sitefinity widgets have been compiled into .dlls, with each widget exposing a LayoutTemplatePath property, which allows you to specify a path to your own .ascx file if you need to change the layout beyond what is possible via the other widget properties. It's a cleaner way to do it - in the past, upgrades could overwrite revised template code - now your revised layouts are preserved when upgrading.

You can get to the default LayoutTemplates at Design > WidgetTemplates in the Sitefinity admin area. But here's one problem - many controls, like in my case the Login control, don't have any sample layout code exposed. The first thing I tried was to use the LoginControl ascx from Sitefinity 3.7. The first error message you'll get is:

C001: LayoutTemplate does not contain an IEditableTextControl with ID UserName for the username.

You can rename your controls to get through these errors, but you'll eventually hit a brick wall, as you really need the layout code. Fortunately, Grigori at Sitefinity was good enough to send me the actual LayoutTemplate code, which is not exposed anywhere within Sitefinity. Here is the actual Sitefinity 4 LoginControl LayoutTemplate Code. Grigori tells me this will be included in the next release.

Adding this code to your project, and pointing your LoginControl's LayoutTemplatePath to this ascx will allow you to format your login control any way you want:

Default LayoutTemplate appearance:


Login control using custom theme, css: