SharePoint 2013: Como adicionar conteúdo a seguir à Suite Bar

Pode adicionar novas àreas de conteúdo a seguir à Suite Bar do SharePoint 2013. Pode usar a mesma estrutura da Suite Bar ou uma diferente.

A Suite Bar tem uma area à direita e à esqueda (com o estilo de table-cells) que pode reproduzir fácilmente com CSS. Assim o seu conteúdo vai se alinhar com o que já lá está.

Pode também usar o estilo de apenas uma “célula”, ou seja, usarndo 100% da largura, vou mostrar como fazê-lo em seguida.

Adicione a sua div imediatamente a seguir à div#suiteBar, na masterpage. Assim:

<div id="suiteBar" class="ms-dialogHidden noindex">
(...)
</div> 
<!-- Use the class .ms-dialogHidden to hide the rows in the dialog boxes -->
<div class="my-suite-row ms-dialogHidden">
    <div class="my-cell my-cellLeft">Left</div>
    <div class="my-cell my-cellRight">Right</div>
</div> 
<div class="my-suite-row my-suite-row-fullwidth">
    <div class="my-cell my-cellFullWidth">Full Width</div>
</div> 

O CSS necessário:

.my-suite-row {
    background: red;
    display: table-row;
    height: 40px;
}
.my-cell {
    display: table-cell;    
}
.my-suite-row-fullwidth {
    position: relative;
}
.my-cellFullWidth {
    background: green;
    position: absolute;
    width: 100%;
    height: 40px;
}

O resultado:

Artigos relacionados