Monday, January 31, 2011

Publishing Portal Master Page with/without both navigation bars

Quando criei o primeiro Publishing site, notei que só aparecia ou a top navegation bar, ou a left navegation bar. Como estava a habituado com ambas no 2007, perdi bastante tempo há procura destas, mas sem sucesso.

Solução: Alterar uma masterpage com os dois content place holders, menu de navegação superior e menu de navegação esquerdo.

Neste exemplo utilizei a masterpage nightandday

1- Copiar a masterpage nightandday e modificar o seu nome para nightanddayModificado.css

2- A seguir procurar a linha: <td id="breadcrumbtd" class="breadcrumbtopnav" colspan="2" >

3- Acrescentar dentro da td o código:

<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">

<SharePoint:AspMenu
ID="TopNavigationMenuV4"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2"
MaximumDynamicDisplayLevels="1"
SkipLinkText=""
CssClass="s4-tn"/>


3- Remover no fim da masterpage, as duas linhas com os dois content place holders:

<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">



CSS: Adicionando o respectivo CSS da top navigation bar

1- Substituir o nome na masterpage do css

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/nightanddayModificado.css %>" After="corev4.css" runat="server"/>

..com copia do CSS nightandday.css, nesse caso nightanddayModificado.css

2- Adicionar o código ao novo CSS:

.breadcrumbtopnavtr
{
background: #FFF url('../../../images/nd_groupheaderBg.png') repeat-x bottom left ;
}
.breadcrumbtopnav
{
margin: 0;
padding: 0;
font-size: 8pt;
font-weight:bold;

}


Resultados:

Antes




Depois



Nota: A nova barra superior é editada normalmente, nas definições -> Navegação.