Try Now
More in this section
Blogs RSS feed

Styling a Sitefinity website

by Grigori Karanikolov
Flexibility and robustness when designing a website are key factors when working CMS. Having to learn a CMS-specific templating pattern is a no-go, especially if you are on a tight deadline.

That is why we made designing a Sitefinity website a task you already know how to do quickly, as it is based on familiar concepts. A few examples:

  • Page templates are based on ASP.NET master pages and CSS
  • controlling the appearance of page layout elements and widgets are a matter of CSS too

This blog post will give you a few tips for best practices when creating a Sitefinity template and quick and powerful ways to control the appearance of page elements.

  1. The page template.
  2. Sitefinity Designer’s guide gives a detailed walk-through on how to create a new template based on a Master page and CSS themes. What I want to emphasize on is the number of content placeholders you incude in there:

    Sitefinity Master page placeholders

    Sitefinity 3.x’s legacy was to create as many of the above <asp:contentplacegholder /> ‘s as you need to have editable regions in your page. This approach is obsolete as of Sitefinity 4.0 + because of the Layout Builder, which you can use to drag and drop layout widgets throughout your page.

    Sitefinity Layout Blocks

    Our recommendation when building a new page template using a Master page is – keep the number of hardcoded content placeholders to as few as possible; using layout blocks on top of these to create new regions where you can drag and drop widgets has a number of benefits:

    Sitefinity’s responsive mobile support serves to rearrange the content blocks, so that they fit on the screens of various devices;
    If you have the Responsive & Mobile design feature enabled, Sitefinity generates CSS3 media queries, which, according to your preferences in the Responsive Design settings screen, rearrange the layout blocks on your page:

    Sitefinity Responsive & Mobile Design settings

    The content blocks are actually being controlled by these rules via the class names that are automatically applied to them:

    Setting classes to Sitefinity Layout Blocks

  3. The layout blocks
  4. Controlling the appearance of layout blocks is easy and quick; that gives you the ability to apply advanced styling with no effort. As you have probably guessed by now, the Layout blocks mentioned above, according to best design practices, are nothing but <div> elements. The class names are applied to them through the interface above, furthermore you can add your own class names, create CSS rules in your theme CSS files or through the CSS widget:

    Applying CSS classes to Sitefinity Layout Blocks


    Adding CSS to Sitefinity - the alternatives

  5. The Widget Templates
  6. You can use that pattern to style not only plain text, but contents of various widgets. An important thing to remember is that all widgets in Sitefinity are .NET controls, which can be set to use customized templates:

    Editing Sitefinity Widget Templates

    As can be seen here, the templates of the widgets within Sitefinity can be completely customized and your preferred CSS classes can be added to the markup.

    Some widgets don’t have their templates exposed like this, but it’s possible to create custom ones as .ascx files and map them where needed. A complete set of .ascx templates that can be modified and mapped to the respective Sitefinity widgets can be found in the Sitefinity SDK.

    An alternative for that is to simply inspect the markup that the widgets generate and apply CSS rules to restyle them, as explained by the end of this blog post.

  7. Sitefinity Thunder
  8. And, at the end, a word of advice – if you aren’t using Sitefinity Thunder yet – hurry up and change that! Among all other great features, it allows you to edit page and widget templates on-the-fly, benefitting from Visual Studio’s IntelliSense and error highlighting:

    Editing Sitefinity Widget Templates through Sitefinity Thunder

Most of the above concepts are perfectly visualized in Gabe's video, called "Introduction to Sitefinity Design". I encourage you to take 10 minutes to check it out, as it will help you hit the ground running with styling your Sitefinity website.
Happy designing!


Leave a comment
  1. Charles May 12, 2015
    This article is not actually about the styling I'm looking for. Trying to find what style class names are present in Sitefinity to use in custom widgets. This way, when styles are changed globally, the customized parts look the same and react the same. Guess I'll keep looking for what I'm looking. 
  2. Grisha Karanikolov May 12, 2015

    Charles, I could recommend you to look into our designer guide and Sitefinity Thunder. The former would give you information about CSS classes used in Sitefinity widgets and the latter can help you generate a full blown CSS theme with predefined styling for all built-in SF widgets. What I like about Sitefinity is the ability to generate a new template with Thunder, create a page based on it and then, when I drop any widget on that page and it doesn't look exactly as I need it to be, I simply edit the generated CSS and change the styling that needs to be altered (or create one of my own there).

    Hope this helps!

    Leave a comment