Styling a Sitefinity website

Styling a Sitefinity website

November 20, 2012 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

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 include in there:

    Sitefinity Master page placeholders

    Sitefinity 3.x’s legacy was to create as many of the above <asp:contentplaceholder /> ‘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, benefiting 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!


The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments are disabled in preview mode.
Latest Stories in
Your Inbox
More From Progress
The New Mobile Development Landscape
Download Whitepaper
IDC Spotlight Sitefinity Thumbnail
Choosing the Right Digital Experience Platform to Improve Business Outcomes
Download Whitepaper
The Fastest Way to Build Mobile Apps With Cloud Data
Watch Webinar