Mostre seu Estilo com os Temas do SharePoint
Artigo original publicado na terça-feria, 30 de outubro de 2012
Lionel Robinson é Gerente de Programas da equipe de engenheiros que desenvolve a experiência do usuário do SharePoint.
Os temas do SharePoint 2013 tornam mais fácil modificar completamente a aparência do seu site e fazer com que ele fique do seu jeito. Então por que você mudaria algo tão maravilhoso como o novo visual dos sites do SharePoint? Vou oferecer aqui um exemplo pessoal:
Após o nascimento dos nossos gêmeos, eu literalmente não encaixava no assento do motorista do meu carro com as duas cadeiras de criança instaladas. E, mesmo no banco do passageiro, meus joelhos batiam no painel ao sentar em um determinado ângulo. Ou seja, era hora de conseguir um carro maior. Eu e minha esposa crescemos passeando em minivans. Encontramos aquela exatamente da marca, modelo e cor que queríamos, estávamos entusiasmados. Cabia toda a família e com toneladas de espaço para carga. Maravilha!
Talvez seja apenas uma questão psicológica, mas a partir daquele dia, parecia que cada terceira pessoa na estrada estava dirigindo o mesmo carro: o nosso Honda Odyssey azul metálico claro. Em mais de uma ocasião, eu me encontrava em um estacionamento, tocando o botão de desbloqueio da chave apenas para saber qual era meu carro, pois havia outro igual duas vagas à frente.
Quais opções temos para fazer um carro exclusivo? A possibilidade mais barata seria colocar um adesivo ou decalque na parte de trás. Também podemos contratar alguém para modificá-lo e colocá-lo ao nosso gosto. Ou simplesmente podemos fazer por conta própria.
Temos visto alguns clientes encontrar esse problema nos sites do SharePoint atuais. Quando todo mundo usa os mesmos modelos, o seu pode se perder em um mar de sites notavelmente semelhantes. Você pode viver com isso e começar a diferenciá-los com detalhes mínimos, como o adesivo do carro, ou você pode usar o CSS e o HTML para personalizar seu site, o que pode ser laborioso e demorado.
Esses são os problemas aos quais a nova experiência temática do SharePoint oferece resposta. Com essa experiência, você poderá personalizar seu site em poucos minutos usando apenas quatro comandos básicos: cor, layout do site, fontes e imagem de plano de fundo. Ao usá-los, você conseguirá um visual realmente único.
Passo a passo rápido
- Em "Guia de introdução ao site”, clique no bloco "Qual seu estilo?". (Se os blocos estiverem ocultos, você também pode clicar em "Alterar a aparência" no menu de configurações ou encontrar "Alterar a aparência" em Configurações do Site com o título de "Aparência.")
- A primeira página apresenta pontos de partida que devem ser associados, apenas para mostrar a gama de opções de aparência do seu site. Escolha alguma dessas opções e mãos à obra.
- Agora começa a diversão. Você pode alterar qualquer um dos quatro comandos que mencionamos anteriormente (layout, fundo, cores e fontes), e visualizar a alteração imediatamente. Arraste sua imagem de fundo para o retângulo no canto superior esquerdo, selecione uma paleta de cores correspondente, selecione o layout do site que você quer, e escolha o esquema de fontes que melhor se adapta à sua personalidade.
- Após selecionar sua combinação de opções, clique em "Experimentar" (no canto superior direito) para visualizá-la no seu próprio site.
- Este é o lugar onde a mágica acontece! Fazemos uma cópia do CSS do seu site (os arquivos que definem a aparência e a formatação) com as novas cores e imagens. Depois de experimentar, você pode ficar com ela ou tentar novamente.
Você tem uma cor ou fonte específica em mente?
Nós incluímos um conjunto de paletas de cores e fontes que recomendamos. Mas você sempre pode adicionar seus próprios conjuntos. Você só precisa do seu editor de texto favorito. A próxima parte é um pouco técnica (se você estiver familiarizado com os temas do SharePoint 2010, você já tem uma vantagem). Ou seja, a diferença principal é que não estamos usando o formato de arquivo thmx. Apenas criamos um conjunto de formatos XML novos e simples para descrever as opções de tema: os arquivos SPColor descrevem a paleta de cores e os arquivos SPFont descrevem o esquema de fontes. A maneira mais fácil de criar suas próprias paletas e esquemas de fontes é começar com os padrões no seu site de equipe. Vá até o site raiz do conjunto de sites, clique em "Configurações do Site" no menu de configurações, e depois "Galeria de Temas". Você vai encontrar as paletas de cores e esquemas de fontes na pasta denominada"15".
Paletas de Cores
Cada arquivo SPColor contém um XML simples que define o valor de cor, em hexadecimal, para cada um dos slots de cores disponíveis. Se você sabe qual o slot de cor que deseja modificar, basta escrever o novo valor e guardar uma cópia do arquivo na mesma pasta da galeria de temas (se o controle de versão estiver ligado, certifique-se de verificar e publicar o arquivo ). Sua nova paleta estará disponível no seletor de cores da experiência de tema (passo 3, mencionado anteriormente).
Esse é o fragmento de um arquivo SPColor. Outra novidade dessa versão é a capacidade para especificar valores de opacidade junto com a cor. Você pode fazer isso usando um valor hexadecimal de 8 dígitos, onde os dois primeiros dígitos representam a opacidade, seguido pelos tradicionais 6 dígitos representando os valores vermelho, verde e azul.
<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="444444" />
<s:color name="SubtleBodyText" value="777777" />
<s:color name="StrongBodyText" value="262626" />
<s:color name="DisabledText" value="B1B1B1" />
<s:color name="SiteTitle" value="262626" />
<s:color name="WebPartHeading" value="444444" />
<s:color name="ErrorText" value="BF0000" />
<s:color name="AccentText" value="0072C6" />
<s:color name="SearchURL" value="338200" />
<s:color name="Hyperlink" value="0072C6" />
<s:color name="BackgroundOverlay" value="D8FFFFFF" />
...
</s:colorPalette>
Esquemas de fontes
As fontes dão muita personalidade a um site. Uma das coisas mais emocionantes sobre os temas no SharePoint é o suporte para fontes web. Antes desse recurso, você tinha que escolher entre as mesmas 8 ou 10 fontes de web seguras (fontes conhecidas por estarem instaladas em quase todos os dispositivos por padrão, como Arial, Times New Roman, e Geórgia). Usando fontes da web, você pode selecionar uma variedade de fontes disponíveis na Internet. Os arquivos necessários são baixados por navegadores da web junto com o resto da página.
Assim como o arquivo SPColor oferece suporte às paletas de cores, um arquivo SPFont define a fonte usada em cada um dos slots de fontes disponíveis. A maneira mais fácil de fazer um esquema de fonte personalizada é começar com um que já está disponível e fazer ajustes quando necessário. O SharePoint suporta vários idiomas e scripts, bem como temas de fonte. Para cada slot de fonte, você deve definir o tipo de letra em cada script. Para obter fontes de web seguras, basta incluir o nome no atributo de tipo de letra para cada slot de fonte. Se você deseja especificar uma fonte web, você terá que fornecer a URL de seus arquivos web de fonte em quatro formatos de fonte (para ter suporte em todos os navegadores), e uma imagem miniatura e outra grande, usadas para processar os nomes de fontes no seletor de fonte (consulte passo 3, mencionado anteriormente).
<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="Impact" previewSlot1="title" previewSlot2="body" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:fontSlots>
<s:fontSlot name="title">
<s:latin typeface="Impact"
eotsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.eot"
woffsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.woff"
ttfsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.ttf"
svgsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.svg"
largeimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactLarge.png"
smallimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactSmall.png" />
...
<s:font script="Arab" typeface="Segoe UI Light" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI Light" />
...
</s:fontSlot>
<s:fontSlot name="navigation">
<s:latin typeface="Segoe UI" />
...
<s:font script="Arab" typeface="Segoe UI" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI" />
...
</s:fontSlot>
...
</s:fontSlots>
</s:fontScheme>
Aparências compostas
As "aparências compostas" são os pontos de partida mostrados na primeira etapa da experiência de temas. Você pode adicionar novas aparências compostas de forma a usar suas paletas personalizadas de cores e esquemas de fontes. É uma ótima maneira de salvar uma série de projetos para que você possa aplicá-la a qualquer momento. Você encontrará a lista de aparências compostas em "Configurações do Site" nas "Galerias de Web Designer." Você pode gerenciar o conjunto existente de aparências compostas e adicionar novos. Para adicionar um deles, basta adicionar um novo item da lista e preencher o nome, o título e as URLs da masterpage, do arquivo SPColor, da imagem de fundo (opcional) e da SPFont (opcional). Após adicionar o item da lista, a visualização da sua nova aparência composta será incluída como ponto de partida na página "Alterar a aparência".
Então vá em frente e experimente! Faça seus sites terem um ótimo visual, mostre a personalidade de sua equipe e seja verdadeiramente original. Só posso dizer que adoraria fazer o mesmo com minha minivan.
Este é um post traduzido do blog. O arquivo original pode ser encontrado em Show Off Your Style with SharePoint Theming