Skinning Sitefinity: Part 1

In an earlier article I posted back in March, I discussed how I would be working within a CMS product by Telerick called Sitefinity for one of our major clients here at iStudio. Well the designs for the site have been approved by the client and I’m ready to go!

Note: If you are unfamiliar with this product I would highly recommend a Webcast on the topic by Gabe Sumner.

The site is basically made up of three templates – three column, two column and a unique layout for the home page – of which each will be a MasterPage.

Sitefinity comes with some nifty controls right out of the box and we’ll be able to use a few of them for this site with only minimal customization – the majority being to the XHTML and CSS.

Creating a new ASP.NET Theme

The idea of having themes within ASP.NET sounds like a good one, but as a front-end developer, I find them more annoying than anything else. Here’s a simple reason why. Every style sheet, no matter where you “hide” it within the App_Themes folder is automatically inserted into the MasterPage. Why this is frustrating is because not every style sheet should be opened as the default media type of “screen”. I have some in there that are for mobile and print devices; others that are language-specific (in this case I had two language-specific style sheets for all “text” background images).

I could not find a way to stop this from happening. Again, I’m not a .NET developer, so I can’t really be sure that there is way or not of disabling this.

However, I was able to find a workaround, although it is far from being ideal. I moved all my style sheets outside the App_Themes folder and placed them in the root of the project. Then, I moved my base style sheet (used for all devices – mobile, print, screen, etc.) back into the theme so that it is loaded automatically. For the rest of my style sheets, I placed references to them in the MasterPage the way I would do with any normal HTML template.

On the lighter side of things, I checked out the beauty HTML source that this application produces and couldn’t believe the size of the View State – a whopping 80KB! I kid you not! Why on earth is it so big, and what could the application be possibly storing for it to be such a crazy size?

Anyhow, that’s enough for today – I’ll continue on with my discussions about SiteFinity when I continue the project later on this week or early next.

This entry was posted in CMS, CSS, Sitefinity, Web Development, XHTML and tagged , , , , , . Bookmark the permalink.

2 Responses to Skinning Sitefinity: Part 1

  1. Gabe Sumner says:

    Great article! Here are a couple thoughts:

    1. Inside Sitefinity there is an “Enable Viewstate” checkbox for each page. This is available in the page options. Turn off ViewState to get rid of all that stuff.

    2. Your stylesheets shouldn’t need to sit in the root. You could also put them in a ~/css directory…or a directory of your choosing.

    Thanks for giving Sitefinity a look.

    • Mike says:

      Thanks for your comments! :)

      I should have made it a bit clearer, but I did place the style sheets in a root folder, like you mentioned. Is this an ok way of doing this? What would you recommend. Thanks for your tip on the ViewState – I’ll pass this on to our developers. We’re all pretty green when it come to SiteFinity but are really liking what we’ve seen so far. We already have plans to use this for our corporate intranet as well as on other projects coming down the pipeline.