SP2010 Branding Tip #3 – Getting your CSS to be the last to load 8

In SharePoint 2007 getting your CSS to load last AFTER core.css was one of the major challenges we had to struggle with. This is critical because of the way CSS cascades, generally speaking if everything else is the same about two CSS rules, the last one loaded takes precedence. Well, I have some good news for everyone, in SharePoint 2010, we don’t have to struggle with this any more, now Microsoft has provided us with a property in called “After”. You simply tell the CssRegistration tag which CSS file you want to load you custom CSS AFTER, like this:

SP2010 Branding Tip #2 – Custom Master Pages and Dialog Boxes 15

So you have a nice custom master page and you are applying it all over your new SharePoint 2010 site, what happens when one of the new dialog boxes is loaded on the page (like when you click to edit a list item)? Guess what… your branded master page with logo and footer and everything will also apply to the much smaller modal dialog box that SharePoint pops up, see the screenshot for an example: How do we fix this? Microsoft had the good sense to give us an easy CSS class to add to our html elements that we don’t want showing in dialog boxes, simply add s4-notdlg to the class, like this: <div class="customFooter"> would become <div class="customFooter s4-notdlg"> For my design, I added this to the top, header, navigation, and footer div’s in my master page, and BAZINGA I get dialog boxes that have only a hint of my custom branding:

SP2010 Branding Tip #1 – Applying Custom Master Pages to _layouts Pages 1

I think rather than spend a lot of time posting lengthy blog posts about SharePoint 2010, I’m going to try instead to post several smaller SharePoint 2010 Branding Tips over the next few weeks. They will mostly be things that I have learned while trying to convert existing 2007 sites into SharePoint 2010. Here is Tip #1: One FANTASTIC feature in SharePoint 2010 is the ability to apply custom master pages to your _layouts or Application pages. Long gone are the days of having to create a custom SharePoint Theme (or god forbid, customize the Application.master) to achieve this. However, as I learned the hard way, as always in SharePoint, “with great power comes great responsibility”. As obvious as this sounds after I say it, I swear this did not dawn on me until I tried it myself… so here it is… If you are going to apply your heavily customized master page to the ...

SharePoint 2010 W3C xHTML Compliance? 5

Just wanted to make a quick post to clear up some things that I THINK are misconceptions about SharePoint 2010 and XHTML compliance. First a disclaimer: I don’t work for Microsoft so I can’t say for certain what the final product will be like, this is just my own assumption based on current knowledge / the current SharePoint Server 2010 that I have as of November 1st, 2009. I’ve heard a lot of people inside and outside of the SharePoint Conference talking about WCAG, Cross-Browser, and XHTML in SharePoint 2010. From what I can tell these things are all true for SharePoint 2010: WCAG 2 Compliant for accessibility needs More cross browser friendly than before Mostly table-less layout Out of the box master pages will be based on the XHTML Strict DocType Now for what I don’t think will be true in SharePoint 2010 HTML source of the page will be XHTML compliant I believe ...

Ready to upgrade your SharePoint 2007 branding to SharePoint 2010? 1

Maybe, not quite yet… you are probably still waiting for the public beta to release… but when it does, this will probably be one of the first things you want to look at. While the Visual Upgrade feature in 2010 is going to be a nice way to temporarily see your upgraded site with your old branding, this mode is only meant to be used briefly while you learn how to actually convert the master page and other branding assets to 2010. Thankfully, there is an early release article on the MSDN that covers this process, check out: Upgrading an Existing Master Page to the SharePoint Foundation Master Page   After reading through this list of steps, you may be wondering why you don’t have to change all of your Register tags at the top from 12 to 14 to point to the new assemblies… well lucky for all of us, Microsoft was kind enough ...

Editing SharePoint pages with IE8 driving you crazy with warning popups? 2

One thing I noticed right away when editing my SharePoint pages with IE8 was an annoying popup message that showed every time you navigate away from editing a page. “Are you sure you want to navigate away from this page?”: Want to know an easy fix for turning this message off? Check out this post: http://www.chakkaradeep.com/post/2009/07/11/IE8-to-SharePoint-e28098Are-you-sure-you-want-to-navigate-away-from-this-pagee28099.aspx

Random Branding Tip #1 1

Some of the out of the box SharePoint page layouts use a <div id="footer"> in the middle of the page. If your custom branded master pages, css, or theme has a style called out for #footer that sets a crazy width or height for your actual site footer it will ALSO apply to this div that is in the middle of the page inside of a table cell. This will end up stretching your entire page and is really difficult to track down. You have been warned.

SharePoint Designer wrongfully says a file is checked out when it is not 7

Ran into a new problem with SharePoint Designer today. Not sure how I caused this to happen but several files were marked as checked out in SPD despite the fact that the files were not checked out to anyone in SharePoint. SPD would not allow me to check out the files, errored if I tried to check in the files, restarting SPD didn’t help, even rebooting didn’t help. Turns out you have to clear a cache in the local app storage. The fix to this problem is to navigate to your local app settings WebSiteCache folder, which in Windows Vista is here: C:\Users\Randy\AppData\Local\Microsoft\WebsiteCache From there just delete all the files or just the ones that correspond to your SharePoint site. When you restart SPD you may have to check in/out the files one more time, but after the warning message the file status will return to normal. Thanks to Tom Puleo’s blog for the information

My MSDN Article is live – “Real World Branding with SharePoint Server 2007 Publishing Sites” 9

I’m excited to announce that the SharePoint branding paper that I wrote with Andrew Connell has finally been published to the MSDN. I put a lot of effort into creating a paper that was concise (well it is pretty lengthy, but believe me I edited plenty of stuff out) while still covering all of the important topics related to creating a branded website in SharePoint 2007. In essence the article encompasses what I do on a daily basis when designing SharePoint websites (barring a few things that were too complex to delve into). The first half of the article focuses on planning for SharePoint branding and the second half focuses on actually creating and deploying the branded SharePoint files. Real World Branding with SharePoint Server 2007 – Part 1 Real World Branding with SharePoint Server 2007 – Part 2 Also, for those of you that liked the previous Adventure Works site, this article features a ...

Fix for Photoshop Save for Web color shift problems 3

I’ve had a lot of problems lately with Save for Web producing colors that are slightly different than my source PSD. After finally losing my mind I set out to find a solution. The most direct discussion about the issue I could find was at www.viget.com. The gist of the article discusses doing these three things: Close anything that is open in Photoshop and click Edit > Color Settings. From there switch the color profile to Monitor Color and uncheck Ask When Opening. Click View > Proof Setup > Monitor RGB Now when clicking Save for Web, uncheck Convert to sRGB. This item may be a check box or underneath the little arrow on the top right depending on Photoshop version   For me, these changes did the trick, now my gifs and jpgs are as close to the original as my compression settings will allow. MUCH more discussion in the comments here: http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/