This post is something I’ve wanted to talk about for a long time because I’ve had so many questions but no one to really talk to about the pro’s and con’s and since there wasn’t any break out groups from the NYCSPUG that focused on this subject I did what any good SharePoint person does when they need to find information about something and that is troll the blogs, forums, MSDN and websites hoping to find some answers by learning from other peoples adventures. When trying to process all this information on the web and understanding what was good and bad and still trying to meet my tight deadlines I became really overwhelmed at times but in the end I was able to come up with a good solution and still meet my deadlines.
I think one of the most difficult things I’ve done with MOSS is understanding the best way to brand and deploy everything but still keeping things simple enough that the customer can understand how it works, how to maintain it and make future changes. The concept of master pages, web pages and CSS combination is great for us that understand how it all works because it makes it easier to make design changes but harder for the customer to maintain if they really don’t have someone that understands how it all meshes together. Then if you’re doing any major branding then it even gets more complicated and confusing because you will most likely have to deal with a HTTP Module to switch out the “Application.master” page with a customized one and other pages where the branding doesn’t affect them because the lack of “SharePoint:CSSLink” control. Then if that doesn’t make it complicated enough you might have to deal with multiple Master pages in one Site Collection (FYI, watch out for inheritance). Just think this is really the tip of the ice berg because you still have to deal with SharePoint Solutions, SharePoint Features, “SharePoint:CSSRegistration” control, page layouts, 5 or more different CSS files and the list goes on or at least I thought so when I started this adventure. I personally think that I was one of the lucky people because I didn’t start this process until year after the product was officially released and that gave me the advantage of being able to find a lot of information on the web that I could consume and make better educated decisions when the time came. I personally think the CSS branding, master page and page layout development was the easiest to do because it seemed to be the most intuitive but when it came to deploying the changes, that’s where I had the hardest time finding best practices because I read so many conflicting things but after a lot of testing I finally figured out what I thought was the best solution.
When I first started this adventure I thought about using a “SharePoint Theme” for everything and quickly came to the conclusion that it wasn’t going to work for me because of several reasons but mainly there was a more flexible way of doing it. If I was just branding WSS sites then I would have gone the “SharePoint Theme” route because it applies branding to almost all the SharePoint pages. I ended up using the “Alternate CSS URL” option on the “Site Settings > Site Master Page Settings” page and I just had it link to a copy of the CORE.CSS file that was located in the “Style Library” List (aka document library). Below are some images to help the people that need to see it (this would include me).
Page Location:
Alternate CSS URL:
Style Library (View All Site Content – Site Collection Level):
Then I started making my changes and then all of the sudden I figured out that just overriding the CORE.CSS wasn’t going to be enough and there was going to be a lot more other CSS Classes in other CSS files that needed to be overridden. I started out making just copies of all the CSS files and uploading them into the “Style Library” that I needed to override. I did it this way because I wanted keep track which files were being updated that way and keep my own sanity but this approach required me to find a different way to import all these files using the “Alternate CSS URL” option. What I ended up doing was creating an empty CSS file that just had “@Import” statements in it that linked to all the other CSS files.
For the most part this worked really well for the branding phase except when I had to deal with “Styles” and these CSS classes had to be entered directly into the CSS file that had the “@import” statements because if they weren’t then they didn’t get applied (that only took me a couple of hours to figure out J). During the branding phase I discovered several new things but I think the most educational one was the capability to use multiple CSS classes to apply a style. This took me a couple hours to fully understand how it was working after I initially discovered it. To be honest I thought this was a pretty nifty trick but I don’t know if I’ll ever use it myself.
When trying to discover what CSS classes were being used I ended up starting out with online resources but I finally realized I need more and the best tool for me was IE 7 Developer toolbar. The IE 7 Developer toolbar was really handy in most cases because it put a blue box around the html that you selected in IE Developer Toolbar pop-up.
All the other times I would read the render html code in “Notepad” to see what classes were being used in the html. During this whole process I never used SharePoint Designer because my past experiences with it haven’t been that great when it came to branding.
After all the initial color branding was done then it was time for page structural changes and several new Master pages were created based off the “Default.master” and “Application.master” and one page layout. To be honest this was the easiest piece of the whole process because there changes were minimal and nothing radical. The only thing I spent any time on was creating a master page and page layout that replaced the left navigation with a new web part zone. When the new pages were implemented I started to notice little unexplained happens with the branding around the page breadcrumb and I really started thinking about the correct way to implement the extra CSS files. I knew the approach I was using was temporary but I hadn’t totally understood why until I started to run into these little CSS glitches. After doing a lot more searching, reading, testing and really understanding what the “Style Library” list was suppose to be used for I decided to go with a combination of using the “Alternate CSS URL” and “SharePoint:CSSRegistration” to accomplish everything. This combination would give me all the flexibility that I needed and still keep it logical for the customer to maintain. When I was searching and reading about the “SharePoint:CSSRegistration” control, it was been slammed left and right but I think it’s a great control as long as you really understand how it works. I discovered a lot of things by reviewing how MS implemented there branding changes for their other designs and by testing the heck out of stuff. The key to the “SharePoint:CSSRegistration” control is to make sure your CSS file names are always last and not to use it with the CSS file that has the override CORE.CSS classes in it. This file should be applied by using the “Alternate CSS URL” because then the “SharePoint:CSSLink” control will always put your file last and that’s what’s most important when dealing with CSS.
The above is my experience when dealing with CSS and MOSS and what worked for me and I was pleasantly surprised that other people were doing or did same thing. If you look at Links I want to remember you will find some links that I booked marked for some of our junior developers. I’m hoping to have some more time next week to talk about how I deployed everything.
Cheers,
Michael
Subscribe