Got double breadcrumbs?

I’ve come across this from time to time and the fix is simple.  Whatever container (td, div or span) tag you are using to house your PlaceHolderTitleBreadcrumb contentplaceholder should have the “ms-titlearea” class associated with it.  Certain OOTB MS page layouts contain an extra style in the header to hide this breadcrumb when the page layout (typically a publishing layout) is rendering its own breadcrumb.   

Do this or have two different master pages, one for team sites and one for publishing sites.  I typically don’t recommend the dual master approach unless  you KNOW for certain you are going to set up the entire site for the client (possibly using site definitions) and that they won’t ever have the need to figure out for themselves which master to apply.

Hover for top nav flyout

This is another SharePoint CSS override that gets me EVERYtime because I never make time to update my base CSS to accomodate this design “flaw”. You bet you’re bippy that I’m updating my base CSS this time!

The issue occurs when a user rolls over a top navigation fly out menu item but their mouse is on the outskirts of the text and not the text itself (which is the actual link), you get the default light blue as shown below:

Yet, when a user rolls over the text itself, the entire row “highlights” as expected shown here:

GRRRR!

So how to fix this? My first thought was to put a rule in for td:hover with the background color being the desired hover color. Even though that’s not proper use of the hover pseudo-class, it does work (in non-SharePoint world). Well, the answer is to make the background color of the td the non-hover color. Pretty simple. Although for some reason I would always try overriding the hover first instead of trying this route first. But not anymore dear hearts! 

In end, this is what  you want:

/* hover state for top nav drop down menus */
.ms-topNavFlyOuts a:hover
{
    background-color:#2a4173;
    border:none;
    color:#FFFFFF;
    width:100%;
}
.ms-topNavFlyOuts td
{
   background-color:#a44c29;
}

Also, note the width of 100% in the first rule listed.  This is why the hover on the link was working correctly and not just highlighting the link!  Both are key to getting the top navigation fly out to behave properly.  Now off to update my base CSS before I forget!

TemplateName values

I’m forever forgetting the values for this property to the FeatureSiteTemplateAssociation element when doing a feature stapling.  I’ve booked marked it a thousand times too, always under a different category for whatever reason.  So today I’m going to be smart about this and put the darn values onto my own blog for easy future reference! 

0	GLOBAL (SetupPath=global)	”Global template”
1	STS	”Windows SharePoint Services Site” “Team Site”, “Blank Site”, “Document Workspace”
2	MPS	“Basic Meeting Workspace”, “Blank Meeting Workspace”, “Decision Meeting Workspace”, “Social Meeting Workspace”, “Multipage Meeting Workspace”
3	CENTRALADMIN	”Central Admin Site”
4	WIKI	”Wiki Site”
7	BDR	”Document Center”
9	BLOG	”Blog”
20	SPS (obsolete)	”SharePoint Portal Server Site”
21	SPSPERS	”SharePoint Portal Server Personal Space”
22	SPSMSITE	”Personalization Site”
30	SPSTOC (OBSOLETE)	”Contents area Template”
31	SPSTOPIC (OBSOLETE)	”Topic area template”
32	SPSNEWS (obsolete)	”News area template”
33	SPSNHOME(SubWebOnly)	”News Home template”
34	SPSSITES	”Site Directory area template”
36	SPSCOMMU (OBSOLETE)	”Community area template”
38	SPSREPORTCENTER	”Report Center Site”
39	CMSPUBLISHING(SetupPath=SiteTemplates\PUBLISHING)	”Publishing and Team Collaboration Site”
40	OSRV(SetupPath=SiteTemplates\OSRV)	”Shared Services Administration Site”
47	SPSPORTAL	”Corporate Intranet Site”
50	SRCHCEN	”Search Center”
51	PROFILES	”Profiles”
52	BLANKINTERNETCONTAINER	”Internet Presence Web Site”
53	BLANKINTERNET	”Publishing Site”, “Press Releases Site”
54	SPSMSITEHOST	”My Site Host”
90	SRCHCENTERLITE(SetupPath=SiteTemplates\SRCHCENTERLITE)	”Search Center Lite”
6221	PWA (SetupPath=SiteTemplates\PWA)	”Project Web Access Site”
6215	PWS (SetupPath=SiteTemplates\PWS)	”Project Workspace”
14483	OFFILE	”Records Repository”, “Records Repository”

SharePoint 2007 “Admin” pages

Microsoft highly recommends no modification of the application.master is is responsible for the look and feel of the what I call “admin” pages.  This includes Site Settings and just about every page linked from there.  And I stress this to our PMs and BD personnel when they talk to clients regarding branding their sites.

However, you can “brand” these pages using just CSS.  Beware though if you are like me and decimate the default.master and craft it to your needs.  Especially if you move all of those seemingly useless contentplaceholders (like PlaceHolderTitleLeftBorder, PlaceHolderTitleRightMargin, PlaceHolderBodyLeftBorder, etc.) to your hidden panel.  You’ll most likely be missing some of the classes used to style the application.master and will need to accommodate for these.

Case in point

See the area in the red box in the picture below?  This is an area I used to miss sometimes. 

This area is dictated by the style:

TD.ms-rightareacell div.ms-pagemargin

If you don’t make amends for this, you’ll have the lovely default blue sticking out from your design.  There are many others which I’m not going to name here but here are a few tricks I’ve learned about applying custom CSS to the application.master.

1. Once you nail one down, copy it and SAVE it in a safe place.  I have a “neutral” colored one that I like to use now which generally applies to most client’s needs.  Although on the heavily branded ones, I still miss the above mentioned one until I do my style check.
2. Always check the three pages listed below to make sure you’ve covered your bases regarding styling the “admin” pages.  They each have some slightly different classes you might not have covered in your CSS for your own master.
   1. Site Settings (be sure to style the .ms-linksectionheader — it’s just a nice touch for your clients)
   2. All Site Content
   3. Site Navigation Settings (i.e. the Navigation link off of the Site Settings page)

I realize none of this is groundbreaking by any means but it is something that I found frustrating at first until I nailed down the basics and most importantly, kept a copy!

Which sitemapprovider?

This is a simple tidbit but useful.

If you want to change providers for say a breadcrumb or a navigational item in Sharepoint, you can find a list of the providers in your web.config file. The description of each is very helpful for figuring out which one goes with what type of control.

404 — from missing image?

So in my previous post, I mentioned that with the help of a coworker, we figured out why my solution wasn’t working correctly.  I also ran into some other interesting errors prior to the conflicting stapler fiasco.  The weirdest one was a 404 message.  All of the files had been deployed to their appropriate places, so what up?

Turns out I missed ONE image tag in the master which referenced the wrong folder and THAT was causing the 404 upon deployment.  Seemed impossible but as soon as I fixed it, the deployment ran.

Conflicting staplers

Earlier this week I ran into an issue where my solution would deploy and all of the files that were supposed to deploy with it, did so as well, however, the master page was all messed up.  It wasn’t the default.master but it wasn’t the master it was supposed to be either.  It appeared as though it wasn’t reading any master — which obviously, is not possible.

Turns out, I had two stapling features installed on my development environment.  One was overriding the other and therefore, the master was being applied from the old stapler but not the stylesheet (not sure why only half was applied).  After deactivating and uninstalling the old feature stapling, things worked wonderfully.

So lesson here, clean yer environment prior to starting a new project!  Preferrably, have an image or backup you can start from again!

MSO_ContentDiv vs. MSO_ContentTable

Beware! If you decide to change the div with the id of MSO_ContentDiv to a table tag, you will get an unknown error message. Makes sense but was a pain figure out what I was doing wrong! So simple though once I realized what I had done.

My Site feature stapling

This time last year, I was doing the SharePoint intranet design for a well-known used car sales company.  It was one of my first ventures into the branding of SharePoint and probably the most frustrating.  But, insightful and a year later I’ve conquered the same things which had caused me such trouble then.  Not without a little help though … correction, a LOT of help.

Back then there were a few blog posts about using feature stapling to make sure newly created My Sites inherited the proper master page and stylesheet.  I tried and tried, and another colleague ended up finishing it up for me (for time and budget sake).

This time around, I had Steve Peschka from the MS SharePoint Rangers team to help!  His blog post, the corresponding comments and the download from CodePlex enabled me to complete my mission this time!  And I’m very grateful.

There are a few things I’d like to document here for the next time I have to do this task.

BAT FILES

The download comes with two batch files, one to install the feature and one to uninstall the feature.  I’ve never been friends with DOS or the command prompt and when the batch files didn’t run properly for me, I panicked just slightly.  But I found a neat little tidbit on how to solve my issue (sorry, I’d credit the person if I had the link still).

If I were running the stsadm commands manually, I’d just change directories to the BIN of the 12 hive and run my commands there.  But these batch files were also calling gacutil which is located elsewhere.  So after reading the previously mentioned tidbit, I changed the commands:

ORIGINALLY:

stsadm -o installfeature -name MySiteStaplee

MY VERSION:

"C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\bin\stsadm.exe"
 -0 installfeature -name MySiteStaplee

This will run in every environment as long as the path is correct.  No need to change directories.

“My Profile”

This site is a tab next to your “My Home” tab in the My Site.  You’d think it’s a part of the My Site template.  Nope.  I still haven’t figured out which template affects it (if any one reading this has, I’d appreciate the head’s up).  I tried adding the SPSMSITE#0 to my stapler feature and the SPSMSITEHOST#0 as well.  Neither seemed to affect the My Profile.

Image placement

I’m still debating on where to place the images associated with the master page.  For this most recent project, I put them into the Images folder in the 12 hive so I could reference them using “/_layouts/images/mycustomfolder”.  However, I’m not sure this is best practice and need to do more research regarding this.

This post might be updated in the future or another post as a sequel, should I answer anything left questionable for me.

Style encapsulation and the pitfalls of MOSS branding

It seems as though in order to get the most predictable results out of a SharePoint redesign, you are almost all but required to use tables.  I didn’t expect to rewrite all SharePoint pages or web parts where tables appear, however, it seems you need them in order to force certain items to behave properly. 

I haven’t completely confirmed this notion but had planned on starting from the “minimal” base page and seeing if I can just recreate the original SharePoint design with the least amount of tables (the MS minimal master page BTW is TOO minimal and you end up adding a lot of things … please read on).   Well, I’ve officially given up. 

For starters, do yourself a favor and opt for Heather Solomon’s base master page and not Microsoft’s.  Hers is more complete and will work for many site templates, the non-publishing pages, etc.  Plus, it’s better documented.  Second, don’t try to get all fancy and try to manipulate the design of the page with strictly div tags.  It is futile.  Why?  For one, you won’t eliminate all of the tables unless you plan on redesigning each aspx page, form, and other items in the default site template manifest.  Two, in certain cases it just won’t work.

Take for example the Design Mode Console.  If you use this:

<wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>

you must put table tags around it.

The brilliant minds who developed/designed this one decided that it would start and end with table rows.  “What, what, what?!”, you say.  Uh, yeah.  So this means you need table tags around this control in order for things to display correctly.  However, if you use this:

<asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
 <wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>
</asp:ContentPlaceHolder>

you are fine.  I guess the contentplaceholder has the table tags in it.  The MS base master page doesn’t have this control in it, however, you NEED it to edit a page!  WTF! It took me a really long time to figure out why this wasn’t appearing:

and then once I put the control into the master, another day to figure out why things weren’t displaying properly.

There are times, however, where I can see using a div tag or two.  Especially if you can only achieve your design effect by using z-index to layer items or have them overlap in some manner.  I recently did this with the “View all content” portion of the Quick Launch area and while it was a BITCH to get working, it did look nice when it finally did (I did this only on non-admin pages, mind you).

UGH.  Seriously MS guys, couldn’t you make branding just a little bit easier seeing how no client wants the OTB look and feel?  Encapsulation can apply to STYLE as well (definition:  “encapsulation is the inclusion within a program object of all the resources need for the object to function” or “hiding of design decisions in a computer program that are most likely to change, thus protecting other parts of the program from change if the design decision is changed“)!  Am I the only one who has thought of this?  I can’t be.  I just can’t be.