Trabalhando com o mecanismo de temas do SharePoint

Artigo original publicado em 10 de abril de 2010, sábado

Oi, aqui é o Kolby novamente. À medida que vai chegando o dia do lançamento do SharePoint 2010, fico mais empolgado com o produto e com algumas funcionalidades que adicionamos à versão 2010. Estou particularmente ansioso para ver os recursos de temas acrescentados a esta versão do SharePoint. Na semana passada, aprendi a configurar um arquivo CSS para servir como tema em uma página mestre do SharePoint Designer 2010 e logo pensei "Todo mundo tem que ver isso!”

Quais são as possibilidades de temas?  

O mecanismo de temas funciona em arquivos CSS e pode fazer o seguinte (nome do token em itálico):

• Substituir cores (como uma cor de fundo ou de fonte) - ReplaceColor
• Substituir fontes - ReplaceFont
• Recolorir imagens (usando um de três métodos: tonalidade, mistura e preenchimento)- RecolorImage

Por meio da interface do usuário do navegador, você pode selecionar um Tema do Site pronto ou, com o SPS (SharePoint Server), criar um novo escolhendo 12 cores e 2 fontes. Esses valores são armazenados em um arquivo THMX, um padrão também usado pelo Microsoft Office. Também é possível criar um tema no Microsoft PowerPoint e salvá-lo como arquivo THMX a ser usado no SharePoint. Os arquivos THMX são armazenados na Galeria de Temas de seu site raiz e você pode adicionar temas por meio do SPD ou da galeria Temas das Configurações do Site do navegador). As doze cores de tema são representadas pelos tokens:

• Dark1, Dark2
• Light1, Light2
• Accent1, Accent2, Accent3, Accent4, Accent5, Accent6
• Hyperlink
• Followed Hyperlink

O mecanismo de temas funciona com essas cores e produz cinco permutações adicionais de cada: Lightest, Lighter, Medium, Darker e Darkest. Para fazer referência a uma permutação no arquivo CSS, use o formato: Cor-Permutação(“Light2-Darkest”, por exemplo).

Sintaxe 

O mecanismo de temas funciona lendo comentários no arquivo CSS. Para obter um estilo com tema, defina uma opção padrão e coloque o token de tema diretamente antes do estilo. Veja um exemplo: tenho um elemento de cor de fundo e desejo que ele seja incluído no tema Light2-Darkest. Minha definição no CSS seria assim:

/* [ReplaceColor(themeColor:"Light2-Darkest")] */ background-color:#707070;

No tema padrão, o fundo aparecerá como #707070, mas quando um tema for aplicado, a cor de fundo será substituída por Light2-Darkest. Para obter exemplos de como usar os outros tokens, consulte o final deste artigo ou examine o arquivo CSS padrão para v4.master (corev4.css), que é uma ótima referência.

Configuração do arquivo 

Para configurar uma página mestra com recurso de tema, faça duas coisas:

1. Coloque o arquivo CSS em um local onde o mecanismo o verá.
2. Registre o arquivo CSS corretamente na página mestra.

Local 

O mecanismo de tema será executado em arquivos CSS somente se eles estiverem no local coreto. Para nossas personalizações, usaremos a pasta RootSite/Style Library/~language/Themable. Essa pasta existirá para sites do SPS com o recurso SharePoint Server Publishing ativado. Se você estiver trabalhando em um site raiz sem essa estrutura, tudo o que precisará é de uma pasta chamada “Style Library” no site raiz com uma pasta chamada “Themable” dentro dela. Qualquer conteúdo da pasta Themable será visto pelo mecanismo de temas (incluindo o conteúdo das subpastas). Recrie essa estrutura de pastas no SharePoint Designer ou por meio do navegador. A pasta de idioma é opcional, mas se você quiser arquivos CSS diferentes para idiomas diferentes, ela será necessária. Para inglês, chame a pasta de en-us.

As imagens não precisam ser colocadas em um local específico, mas o local sugerido é uma pasta RootSite/Style Library/Images.

Algumas dicas sobre como recolorir imagens. Se você recolorir uma imagem renderizada em vários locais, a última ação de recolorir executada na imagem será usada em todos os locais com tema. Por exemplo, eu quis mostrar métodos de recolorir diferentes na mesma imagem (tonalidade, mistura e preenchimento), mas todos eles foram mostrados como preenchimento. Tive de salvar cópias individuais da imagem e criar temas diferentes com elas (observação: uma última alternativa é usar um atributo detach para dizer ao mecanismo para criar uma nova imagem ao recolorir, mas esse método deve ser usado com parcimônia por motivos de desempenho de download de várias cópias da imagem durante a renderização. Por isso, não entrarei em mais detalhes aqui). Para clusters de imagem (um único arquivo com mais de uma imagem), você pode recolorir partes da imagem usando o parâmetro includeRectangle (consulte corev4.css para obter um exemplo de como fazer isso).

Registro 

Para que os arquivos CSS com tema sejam aplicados em nossa página mestra, precisamos registrar o arquivo CSS em vez de simplesmente vinculá-lo. Isso apontará a página mestra para o arquivo CSS com tema quando um tema for aplicado. Coloque o seguinte parâmetro na marca de cabeçalho da página mestra:

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/ Themable /myStyleSheet.css %>" After="corev4.css" runat="server"/>

O parâmetro After garante que o nosso arquivo CSS com tema seja aplicado à página após corev4.css. Observe, no entanto, que o token <% $SPUrl não resolverá no SPS (SharePoint Foundation). No SPF, será preciso especificar o local usando uma URL codificada. Infelizmente, isso será limitador caso você queira usar arquivos CSS diferentes para idiomas diferentes (uma vez que não haverá um token ~language).

Demonstração 

Tudo certo, agora devemos nos preparar para o nosso arquivo CSS com tema. Faça um rascunho de uma página mestra elegante e experimente-a. Para compreender melhor a paleta de cores resultante em meus temas, criei em v4.master uma grande tabela mostrando todas as permutações de cores. Também incluí uma imagem de exemplo e tentei recolori-la. A seguir, veja como a minha criação fica com o esquema de cores padrão (observe que usei o branco como a configuração padrão para os estilos de cor de fundo).

Em seguida, entro no navegador e escolho um novo Tema do Site, Convenção com Papyrus e Segoe Script como fontes. Agora tenho uma tabela muito mais colorida (veja a seguir). Coloquei o tema nos textos de hiperlink e nos rótulos de imagem. Para recolorir, usei Dark2-Lightest (você consegue ver a correspondência de cores perfeita entre a célula Dark2-Lightest e o logotipo recolorido pelo método preenchimento).

Código de exemplo 

Veja um trecho de exemplo do CSS para a segunda imagem de logotipo para a qual eu apliquei o tema para fonte, cor da fonte e cor da imagem:

/* [ReplaceFont(themeFont: "MinorFont")] */ font-family:Verdana;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:black;
/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Tinting")] */ background:url("/Style Library/images/spdicon1.png") no-repeat;

Na verdade, estou bastante surpreso com a qualidade da ação de recolorir imagem. Se for usado de forma correta e com estilo, o mecanismo de temas do SharePoint poderá realmente encantar aqueles que se importam com a aparência tanto quanto com a funcionalidade :)

Agradeço por ler este artigo e espero que você ache o novo mecanismo de temas do SharePoint tão empolgante e útil como eu achei.

Esta é uma postagem de blog traduzida. Leia o artigo original sobre como Working with the SharePoint Theming Engine