Aplicar estilos a campos de página no SharePoint

Em um layout de página, você pode aplicar estilos a um campo de página e os estilos são aplicados a qualquer conteúdo adicionado por autores de conteúdo quando eles criam uma página de layout da página. Além disso, você tem mais opções para controlar como o conteúdo de um campo de página RichHtmlField é estilizado.

Introdução à aplicação de estilos aos campos de página

Como um designer, você tem controle total sobre o posicionamento e o estilo de campos de página em um layout de página e em todas as páginas criadas a partir de layout da página. Quando os autores de conteúdo criam páginas de um navegador, eles não é possível mover os campos de página na página ou substituir os estilos que você especificar. Isso ajuda a garantir que sua identidade visual permaneça consistente por meio de todas as páginas no site.

Quando você aplica estilos a campos de página, há duas categorias básicas dos tipos de campo a serem considerados:

• Tipos de campo que não seja RichHtmlField Os campos de página que compõem um layout de página em conformidade com o tipo de conteúdo para o layout da página. Um campo de página pode ser de vários tipos, como uma única linha de texto (campo de texto) ou várias linhas de texto (NoteField). Como designer, você pode aplicar estilos a todos esses campos de página da mesma maneira, aplicando estilos no campo de página diretamente no layout de página.
• RichHtmlField O controle de campo HTML avançado (também conhecido como um campo de HTML de publicação) é um dos controles mais poderosos e frequentemente usados nos layouts de página. Por padrão, em um campo HTML com formatação, autores de conteúdo usam a faixa de opções para formatar e aplicar estilos no conteúdo e para inserir tabelas, mídia, como imagens e vídeo e web parts. Esse tipo de campo é útil quando você quer dar a liberdade de adicionar e estilo de conteúdo dentro de parâmetros que você pode controlar a autores de conteúdo. Você pode controlar um RichHtmlField de duas maneiras:
  • Criar uma folha de estilo personalizadas Por padrão, os estilos disponíveis na faixa de opções de uma RichHtmlField provenientes de uma folha de estilo chamada HtmlEditorStyles.css. Você pode configurar a propriedade PrefixStyleSheet para esse trecho para que seus próprios estilos personalizados apareçam na faixa de opções para os autores de conteúdo usar.
  • Configurar as propriedades permitir Um trecho de código para um RichHtmlField tem 28 propriedades disponíveis que começam com Allowe você pode utilizar essas propriedades para tornar os comandos específicos ou grupos de comandos na faixa de opções não estão disponível para os autores de conteúdo. Por exemplo, se você definir a propriedade AllowFontsMenu como False, autores não é possível usar o menu de fonte na faixa de opções para alterar qual fonte é aplicado ao texto; em vez disso, eles podem usar apenas os estilos CSS que você especificar.

Para todos os tipos de campos de página, incluindo o RichHtmlField, o designer determina como o conteúdo é estilizado. Você pode usar o RichHtmlField para fornecer os autores de conteúdo a liberdade de inserir conteúdo rich e aplicar estilos; Você ainda ter controle total sobre qual conteúdo pode ser adicionado e o que styles pode ser aplicada.

Aplicar estilos aos campos de página diferentes do RichHtmlField

Com um controle de campo de página, você pode definir os estilos usados pelo conteúdo. Os autores podem adicionar conteúdo a uma página, mas os controles de designer como o conteúdo é processado por meio de CSS aplicada a esses controles.

No layout da página HTML, cada campo da página é envolvido em uma marca <div\>. Para aplicar um estilo a um campo de página, você pode simplesmente adicionar um estilo ao <div\>. Por exemplo, <div style="font-weight:bold". Mas o cenário mais comum e útil é adicionar um atributo ID ao <div\> para cada campo de página no layout de página e, em seguida, usar o ID como um seletor para estilos que residem em uma folha de estilo externa. Dessa forma, se você tiver vários canais de dispositivo, e cada canal tem sua própria folha de estilos, você pode aplicar estilos diferentes a cada campo de página para cada canal. Por exemplo, o seguinte campo de página do tipo TextField (também denominado Múltiplas Linhas de Texto) pode ter apenas um ID atributo na <div\> marca.

<div id="ShortSummaryPageField">
<!--CS: Start Page Field: ShortSummary Snippet-->
<!--SPM:<%@Register Tagprefix="PageFieldNoteField" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<PageFieldNoteField:NoteField FieldName="a5249942-2dc5-4917-85e2-661d019ad548" runat="server">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">ShortSummary</span></div><div class="ms-formfieldvaluecontainer"><div class="ms-rtestate-field">ShortSummary field value.</div></div></div><!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</PageFieldNoteField:NoteField>-->
<!--CE: End Page Field: ShortSummary Snippet-->
</div>

Para obter mais informações sobre onde estilos e referências de estilo para um layout de página devem ir, consulte Como criar um layout de página no SharePoint.

Desabilitar opções na faixa de opções de um RichHtmlField

Quando os autores de conteúdo criar ou editar uma página e, em seguida, adicionar conteúdo a um RichHtmlField usando um navegador, eles podem usar os comandos na faixa de opções para esse campo para formatar, estilo, ou inserir mídia e conteúdo otimizado.

Na Galeria de trecho de código, você pode configurar as propriedades de um campo de página do tipo RichHtmlField, para que os comandos específicos ou grupos de comandos na faixa de opções ficam indisponíveis para os autores. Por exemplo, definindo a propriedade AllowFontSizesMenu como False, você pode desativar o menu Font Size na faixa de opções. Definindo a propriedade AllowFonts como False, você pode desabilitar todo o grupo fonte na faixa de opções.

Depois de configurar essas propriedades na Galeria snippet e atualizar o snippet, as propriedades aparecem na marcação de snippet dentro do <!--MS:> comentário.

<div data-name="Page Field: ArticleBody">
<!--CS: Start Page Field: ArticleBody Snippet-->
<!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<PageFieldRichHtmlField:RichHtmlField runat="server" AllowFonts="False" FieldName="db3168db-8778-4fb6-a48f-57f598497388">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div id="ctl02_label" style="display:none">ArticleBody</div><div id="ctl02__ControlWrapper_RichHtmlField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl02_label"><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">ArticleBody</span></div><div class="ms-formfieldvaluecontainer"><div class="ms-rtestate-field">ArticleBody field value. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div></div>
<!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
<!--CE: End Page Field: ArticleBody Snippet-->
</div>

Um campo de página RichHtmlField contém 28 propriedades Allow diferentes. Para saber mais sobre o controle de propriedades específicas, confira as Propriedades de RichHtmlField Para saber mais sobre como adicionar e configurar trechos, confira Trechos de Design Manager do SharePoint.

Controlar os estilos disponíveis em um RichHtmlField

Em um RichHtmlField, autores de conteúdo podem usar opções na faixa de opções para formatar o conteúdo. Essas opções de formatação são implementadas usando CSS e esses estilos definidos em uma folha de estilos do SharePoint denominada HtmlEditorStyles.css que reside no servidor em um dos seguintes locais:

• C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES
• C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\FEATURES\PublishingLayouts\en-us

Como o RichHtmlField no navegador usa CSS para implementar seus estilos, você pode criar seus próprios estilos que são consistentes com a identidade visual do seu site e, em seguida, você pode disponibilizar os estilos na faixa de opções para os autores de conteúdo usar. Para fazer alterações secundárias os estilos padrão, você pode copiar um estilo existente de HtmlEditorStyles.css para sua folha de estilos que é referenciada pelo layout de página e, em seguida, modificar esse estilo, alterando as propriedades CSS e valores (mas não no seletor). Você também pode ocultar os estilos padrão da faixa de opções, copiando-os para a folha de estilos e definindo display:none

Para implementar os estilos personalizados, você também pode construir uma folha de estilo a partir do zero, alterando a propriedade PrefixStyleSheet para o trecho de RichHtmlField. Por padrão, essa propriedade é definida como ms-rtee os estilos na folha de estilos padrão HtmlEditorStyles.css cada começarem com esse prefixo — por exemplo:

H1. ms-rteElement-H1
{
  -ms-name:"Heading 1";
  -ms-element:"true";
}

Quando você altera o valor da propriedade PrefixStyleSheet, nenhum dos estilos de ms-rte existentes estão disponíveis no editor de HTML avançado e apenas os estilos que você criar que usam o novo prefixo estão disponíveis para os autores de conteúdo. Isso significa que se você quiser usar alguns dos estilos padrão, eles devem ser copiados para a sua folha de estilos e modificados de modo que eles usam o novo prefixo.

Para definir uma nova lista de estilos para um RichHtmlField

1. Navegue até o seu site de publicação.

2. No canto superior direito da página, escolha Configurações e escolha Gerenciador de Design.

3. No Gerenciador de Design, no painel de navegação à esquerda, escolha Editar Layouts de Página.

4. Escolha o layout de página no qual residirá o campo de página RichHtmlField.

5. No canto superior direito da visualização do servidor, escolha Trecho Galeria.

6. Na faixa de opções, escolha Campos de página e, em seguida, escolha um campo de página do tipo RichHtmlField.

7. Na grade de propriedade, expanda a seção Misc e, em seguida, alterar a propriedade PrefixStyleSheet como um valor diferente de ms-rte por exemplo, altere o valor para ser customstyle.

   Importante

   Este valor da propriedade deve ser letras minúsculas.

8. Escolha Atualizar.

9. No lado esquerdo da Galeria trecho, escolha Copiar para área de transferência.

10. Na unidade de rede mapeada no seu computador, abra o layout de página HTML em seu editor de HTML.

    Observação

    Para obter mais informações, consulte Como mapear uma unidade de rede para a Galeria de Páginas Mestras do SharePoint.

11. No layout de página HTML, cole o trecho de código HTML dentro PlaceHolderMain.

12. Salve o layout da página HTML. As alterações no arquivo HTML são sincronizadas com o layout de página .aspx associado.

    Neste ponto, se um autor de conteúdo cria ou edita uma página com base no layout desta página, sem estilos estão disponíveis na faixa de opções do editor HTML porque este campo de página específica usa apenas os estilos que começam com o novo prefixo customstyle, mas esses estilos ainda não tem sido definidos.

13. No servidor, vá para o seguinte local e abra HtmlEditorStyles.css:

    C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES

    É útil exibir os estilos padrão, entender como gravados e possivelmente reutilizar alguns deles, copiá-los para sua folha de estilos e, em seguida, modificá-las. Se você fizer isso, substitua o prefixo de ms-rte padrão com seu próprio prefixo.

    Importante

    [!IMPORTANTE] Não modifique a folha de estilos padrão, HtmlEditorStyles.css. Esta folha de estilo fornece estilos para cada RichHtmlField no farm. Além disso, as atualizações de serviço ou uma atualização pode substituir esse arquivo, causando a perda de qualquer alteração.

14. Na folha de estilos, crie uma lista dos novos estilos que começam com o novo prefixo.

    Por exemplo, se o novo prefixo customstyle, sua folha de estilos pode conter o seguinte estilo.

    H2.customstyleElement-H2
    {
      -ms-name:"Heading 2";
      -ms-element:"true";
    }
    customstyleElement-H2
    {
      font-weight: bold;
      font-family: Cambria;
      font-size: 16pt;
    }
    

    Para manter a clareza, o nome de classe e o nome do estilo como ele aparece na faixa de opções são definidos separadamente das propriedades de estilo. Neste exemplo, H2 é o seletor de elemento do estilo e customstyleElement-H2 é o nome de classe do estilo. O nome da classe tem duas partes: customstyle é o prefixo que você especificou para este campo de página e Element Especifica que esse estilo será exibida na seção de Elementos de página da Galeria de estilos na faixa de opções do editor de HTML. A propriedade -ms-name define o nome de exibição que aparece ao conteúdo autores na Galeria de estilos.

    SharePoint mapeia um estilo a um menu ou um comando na faixa de opções, o nome da classe de análise imediatamente após o prefixo e procurando um dessas cadeias de caracteres:

    • Element: a seção de elementos de página da Galeria de estilos
    • Style: seção os estilos de texto da Galeria de estilos
    • FontSize: menu o tamanho da fonte
    • ThemeFontFace: menu a fonte
    • ForeColor: menu a cor da fonte
    • BackColor: menu a cor de realce
    • Image: menu a imagem
    • Table: menu a tabela
    • Position: alinhar os botões do grupo de parágrafo

    Para obter mais informações sobre onde os estilos de um layout de página devem residir, consulte Como criar um layout de página no SharePoint.

Confira também

• Visão geral do Gerenciador de Design no SharePoint
• Tutorial: criar um layout de página no SharePoint
• Trechos de código do Gerenciador de Design do SharePoint