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:
