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: