Compartilhar via

Criar arquivos de CSS personalizados temáticos no SharePoint

  • Artigo

Saiba como adicionar marcação de estilo de comentário em um arquivo CSS para que ele possa ser usado no mecanismo de temas de SharePoint.

Introdução às anotações

Anotações são marcação de estilo de comentário especial que informam ao mecanismo de temas de SharePoint como propriedades em um arquivo CSS do tema. Quando um tema for aplicado a um site, o mecanismo de temas substitui os valores de propriedade CSS com os valores de tema apropriado. No SharePoint, você pode usar as anotações para mudar cor, fonte e imagem de fundo. Você também pode recolor uma imagem. Se você estiver usando arquivos CSS personalizados, você deve adicionar essas anotações nos arquivos CSS se você deseja usá-los com o mecanismo de temas de SharePoint. Se você aplica um tema a um site que usa arquivos CSS personalizados e você não adicionou anotações, as propriedades CSS permanecem inalteradas. Isso pode resultar em um site que tem um design incompatível.

Este artigo descreve as anotações disponíveis e como registrar arquivos CSS.

Para obter mais informações sobre temas personalizados, consulte Como implantar um tema personalizado no SharePoint e Como criar um arquivo de visualização de página master no SharePoint.

Adicionar anotações a arquivos CSS personalizados

Anotações informar o mecanismo de temas SharePoint como propriedades em um arquivo CSS do tema. Esta seção descreve as anotações disponíveis e como eles podem ser usados.

Anotação ReplaceColor

A anotação ReplaceColor substitui o valor de cor com a cor do tema especificado. Ele pode ser usado com propriedades CSS que definem um valor de cor, como color, background-color, border e assim por diante.

O exemplo a seguir mostra o formato da anotação ReplaceColor.

/* [ReplaceColor(themeColor:"ColorSlot"[, themeShade:"ShadeValue"][, themeTint:"TintValue"][, opacity:"OpacityValue"])] */

Substitua ColorSlot pelo nome da anotação do slot de cores a ser usado. Para ver uma lista de slots de cor disponíveis, confira a seção Mapeamento de slot de cores em Paletas de cores e fontes no SharePoint.

Use o parâmetro opcional themeShade se você quiser escurecer a cor do tema. Substitua ShadeValue um valor numérico de 0,0 (nenhuma alteração) a 1,0 (mais escuro).

Use o parâmetro opcional themeTint se você deseja clarear a cor do tema. Substitua TintValue um valor numérico de 0,0 (nenhuma alteração) a 1,0 (mais claro).

Use o parâmetro opcional opacity se você quiser especificar a opacidade da cor do tema. Substitua OpacityValue um valor numérico que especifica a configuração de opacidade. Os intervalos de configuração de opacidade de 0,0 (totalmente transparente) a 1,0 (totalmente opaco).

O exemplo a seguir mostra exemplos de anotação ReplaceColor sendo usado em um arquivo CSS.

  • /* [ReplaceColor(themeColor:"BodyText")] */ color:#444;
  • /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"0.5")] */ background-color:#fff;
  • /* [ReplaceColor(themeColor:"EmphasisBackground",themeTint:"0.05")] */ background-color:#f2faff;

Anotação ReplaceFont

A anotação ReplaceFont adiciona a fonte do tema especificado à lista de fontes disponíveis. Ele pode ser usado com as propriedades CSS font e font-family.

O exemplo a seguir mostra o formato da anotação ReplaceFont.

/* [ReplaceFont(themeFont:"FontSlot")] */

Substitua FontSlot pelo nome do slot de fonte a ser usado. Para ver uma lista de slots de fonte disponíveis, confira a seção Slots de fontes em Paletas de cores e fontes no SharePoint.

O exemplo a seguir mostra um exemplo da anotação ReplaceFont. Neste exemplo, se o intervalo de fonte body é definido como Courier no tema, Courier será adicionado como o primeiro item na lista de fontes disponíveis no Assistente de Choose the Look.

  • /* [ReplaceFont(themeFont:"body")] */ font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;

Anotação ReplaceBGImage

A anotação ReplaceBGImage substitui a imagem de plano de fundo no arquivo CSS com a imagem de plano de fundo do tema. Ele pode ser usado com as propriedades CSS background e background-image.

O exemplo a seguir mostra o formato da anotação ReplaceBGImage. A anotação ReplaceBGImage também pode ser usada com o filtro de AlphaImageLoader para oferecer suporte a versões anteriores do Internet Explorer.

/* [ReplaceBGImage] */

Anotação RecolorImage

A anotação RecolorImage recolors a imagem especificada.

O exemplo a seguir descreve o formato da anotação RecolorImage.

/* [RecolorImage(themeColor:"ColorSlot"[, method:["Tinting"|"Blending"|"Filling"]][, includeRectangle: {x:x-Setting,y:y-Setting,width:RegionWidth,height:RegionHeight})] */

Substitua ColorSlot pelo nome da anotação do slot de cores. Para ver uma lista de slots de cor disponíveis, confira a seção Mapeamento de slot de cores em Paletas de cores e fontes no SharePoint.

Use o parâmetro opcional method se você deseja especificar o método recoloring.

Use the optional includeRectangle parameter if you want to recolor only a specific region of an image. Substitua x-Setting, y-Setting, RegionWidth e RegionHeight pela coordenada x, coordenada y, largura e altura da região que você deseja recolorir.

O exemplo a seguir mostra exemplos de anotação RecolorImage sendo usado em um arquivo CSS.

  • /* [RecolorImage(themeColor:"SubtleBodyText",method:"Tinting")] */ background-image:url("/_layouts/15/images/tabtitlerowbottombg.png?rev=23");
  • /* [RecolorImage(themeColor:"BodyText",method:"Filling",includeRectangle:{x:161,y:178,width:16;height:16})] */ background:url("/_layouts/15/images/spcommon.png?rev=23") no-repeat -161px -178px;

Carregar o arquivo CSS para a pasta de tema na biblioteca de estilos

Coloque os arquivos CSS personalizados na pasta Themable da biblioteca de estilos (não a pasta Themable na Galeria de páginas mestras). Somente os arquivos CSS que são armazenados na pasta Themable na biblioteca do estilo são reconhecidos pelo mecanismo de temas. A pasta Themable é criada automaticamente para sites de publicação. Caso contrário, você pode criar a pasta Themable no local correto (http:// SiteCollectionName/Style Library/ language/Themable/).

Observação

O nome da pasta de idioma deve estar no formato de 4 dígitos ll-cc para identificar a linguagem e a cultura, respectivamente. Por exemplo, en-us ou ar-sa. Para obter mais informações, consulte identificadores de idioma e valores de Id de OptionState no Office 2013.

Arquivos CSS devem ser feito check-in e publicados. Se os arquivos CSS forem alterados, você deve reaplicar o tema para que as alterações sejam reconhecidas.

Registrar o arquivo CSS

Você deve registrar o arquivo CSS com uma página mestra para que o arquivo CSS possa ser usado pelo mecanismo de temas. Isso instrui a página mestra para o arquivo CSS quando você aplica um tema a um site. Para registrar um arquivo CSS, adicione um <elemento SharePoint:CssRegistration> ao <head> elemento da página master. O seguinte mostra o formato do <elemento SharePoint:CssRegistration> .

<SharePoint:CssRegistration Name="CSSFileLocation" runat="server" />

Substitua CSSFileLocation com o local do arquivo CSS.

Veja a seguir um exemplo de um <elemento SharePoint:CssRegistration> .

<head>
…
<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/~language/Themable/MyCustomFile.css%>" runat="server" />
</head>

Observação

[!OBSERVAçãO] O token de %$SPUrl não pode ser usado em SharePoint Foundation 2013. Você deve usar uma URL para especificar o local do arquivo CSS.

Confira também