This is the first of the more specific articles regarding SharePoint Branding. They will go from small issues to bigger ones.

One of the controls a SharePoint design usually sports is the My Site control. This is a control with a link to the current user’s MySite. But unfortunately this is not the only thing this controls adds. It also adds a pipe character (|) just to the right of the link. No problem, I thought. As it is a delegate control, it’ll use some custom control from the control templates. I’ll just have to remove the pipe from the control. I went to the control templates and bingo, there was MySiteLink.ascx. Wrong, as it seems, the control uses some code behind file where it programatically adds the pipe.

this.hlMySiteSpacerSuffix.Text =
  "<span style='padding-left:4px;padding-right:3px'>|</span>";

So how can I quickly remove the pipe, without having to rewrite another delegate control to take its place, or a whole new other control to render the special MySite link? The answer is CSS. As it turns out, the pipe is rendered within a span tag. So when adding the delegate control, make sure you encapsulate it within a specific css reference, for example: .removeSpan. In your css, you just have to define the following:

.removeSpan span
{
  display: none
}

Voila, one pipe free MySite link. Sure, it’s still on the page, but the design does not get screwed up by it. Problem solved.