Implementar branding em SharePoint não passa apenas pela estrutura do site, também temos que considerar o conteúdo. Segue-se um template simples que pode ser usado para verificar se os estilos de texto do SharePoint encaixam no seu design.
HTML
Este HTML usa todos os estilos de texto disponíveis na Ribbon. Basta copiar este códido para o source editor o campo de texto que estiver a usar.
<h1>
H1 Lorem ipsum dolor sit amet
</h1>
<p>
[paragraph]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae justo non quam sagittis rhoncus vitae nec tellus. Vivamus suscipit enim tellus, vel eleifend sapien tincidunt non. Morbi aliquet pretium nisl, in accumsan libero bibendum quis. Ut porta velit nec purus varius, eu faucibus arcu elementum.
</p>
<p>
<span class="ms-rteStyle-Quote">
[quote]Duis imperdiet, elit in suscipit venenatis, enim urna venenatis tortor, vitae vestibulum lacus magna eget nisi.
</span>
</p>
<p>
<span class="ms-rteStyle-IntenseQuote">
[Intense quote]
Nulla vehicula, metus id sagittis facilisis, leo purus imperdiet nulla, in vehicula enim eros sed tellus. Phasellus aliquet sodales adipiscing. Cras congue tellus a enim congue, a vehicula libero interdum.
</span>
</p>
<p>
<span class="ms-rteStyle-Emphasis">
[Emphasis]Sed vitae lacus ac nibh dictum semper sit amet ut nisi. Fusce convallis lorem sollicitudin, venenatis arcu vitae, iaculis velit.
</span>
</p>
<p>
<span class="ms-rteStyle-IntenseEmphasis">
[Intense Emphasis] Suspendisse sit amet risus turpis. Suspendisse a purus non felis tincidunt semper.
</span>
</p>
<p>
<span class="ms-rteStyle-References">
[Reference]Vivamus aliquam ante ornare felis dapibus, id porta diam pharetra. Morbi a odio laoreet, vehicula nisi et, commodo quam.
</span>
</p>
<p>
<span class="ms-rteStyle-IntenseReferences">
[Intense Reference] Integer aliquam sed nulla vitae luctus. Maecenas a purus sed lectus fermentum posuere ut id diam.
</span>
</p>
<p>
<span class="ms-rteStyle-Accent1">
[Accent 1]Integer aliquam sed nulla vitae luctus. Maecenas a purus sed lectus fermentum posuere ut id diam.
</span>
</p>
<p>
<span class="ms-rteStyle-Accent2">
[Accent 2]Integer aliquam sed nulla vitae luctus. Maecenas a purus sed lectus fermentum posuere ut id diam.
</span>
</p>
<h2>
H2 Lorem ipsum dolor
</h2>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse viverra tincidunt malesuada. In non augue in mi ornare rutrum. Quisque lobortis, risus id pulvinar placerat, ipsum libero vehicula erat, id varius massa ligula sed augue.
</p>
<h3>
H3 Lorem ipsum dolor
</h3>
<p>
Nulla pretium purus metus. Sed sed pharetra nibh, volutpat placerat nunc. Nunc accumsan sem a leo pharetra, ac pulvinar nunc venenatis. Maecenas non eros sit amet odio luctus imperdiet. Maecenas luctus neque ante, sit amet iaculis elit interdum non. Nunc turpis metus, mattis in tellus commodo, auctor porttitor quam. Duis in tincidunt justo, quis ornare velit. Aliquam euismod libero nulla, in malesuada sem sagittis nec. Quisque bibendum nibh dapibus, laoreet mauris vel, malesuada sem.
</p>
<h4>
H3 Lorem ipsum dolor
</h4>
<p>
Mauris eget nisi elementum, consectetur metus vel, ullamcorper nisi. Sed semper pellentesque diam fermentum varius.
</p>
<h1 class="ms-rteElement-H1B">
H1 Alternate
</h1>
<p>
Sed tincidunt nibh turpis, non posuere urna condimentum at. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<h2 class="ms-rteElement-H2B">
H2 Alternate
</h2>
<p>
Morbi non tristique turpis. Proin at consequat mauris, pellentesque ornare mauris. Sed enim dui, congue sit amet dolor ac, condimentum viverra neque.
</p>
<h3 class="ms-rteElement-H3B">
H3 Alternate
</h3>
<p>
Donec a fringilla nulla. Aliquam id velit in mi eleifend euismod. Nullam velit dui, malesuada eu tincidunt non, feugiat in risus.
</p>
<h4 class="ms-rteElement-H4B">
H4 Alternate
</h4>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</li>
<li>
Aliquam tincidunt mauris eu risus.
</li>
<li>
Vestibulum auctor dapibus neque.
</li>
</ul>
<p>
Donec a fringilla nulla. Aliquam id velit in mi eleifend euismod. Nullam velit dui, malesuada eu tincidunt non, feugiat in risus.
</p>
<ol>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</li>
<li>
Aliquam tincidunt mauris eu risus.
</li>
<li>
Vestibulum auctor dapibus neque.
</li>
</ol>
CSS
Para configurar o CSS de todos os diferentes estilos disponíveis podem ser usadas as regras que se seguem. Use-as todas ou apenas as que necessita.
/* paragraph */
.ms-rtestate-field p,
p.ms-rteElement-P {
}
/* h1 */
.ms-rtestate-field h1, h1.ms-rteElement-H1 {
}
/* h2 */
.ms-rtestate-field h2, h2.ms-rteElement-H2 {
}
/* h3 */
.ms-rtestate-field h3, h3.ms-rteElement-H3 {
}
/* h4 */
.ms-rtestate-field h4, h4.ms-rteElement-H4 {
}
/* h1 alternate */
H1.ms-rteElement-H1B {
}
/* h2 alternate */
H2.ms-rteElement-H2B {
}
/* h3 alternate */
H3.ms-rteElement-H3B {
}
/* h4 alternate */
H4.ms-rteElement-H4B {
}
/* quote */
.ms-rteStyle-Quote {
}
/* intense quote */
.ms-rteStyle-IntenseQuote {
}
/* emphasis */
.ms-rteStyle-Emphasis {
}
/* intense emphasis */
.ms-rteStyle-IntenseEmphasis {
}
/* reference */
.ms-rteStyle-References {
}
/* intense reference */
.ms-rteStyle-IntenseReferences {
}
/* accent 1 */
.ms-rteStyle-Accent1 {
}
/* accent 2 */
.ms-rteStyle-Accent2 {
}