Compartilhar via

Use aparências compostas para criar a identidade visual dos sites do SharePoint

  • Artigo

Aparências compostas são temas prontos para uso que estão incluídos no SharePoint e SharePoint Online. Aplique aparências compostas, incluindo cores, fontes e uma imagem de plano de fundo, a seus sites do SharePoint e do SharePoint Online usando o mecanismo de temas do SharePoint.

Importante

Essa opção de extensibilidade está disponível apenas para experiências clássicas do SharePoint. Você não pode usar essa opção com experiências modernas no SharePoint Online, como nos sites de comunicação.

Para aplicar uma aparência composta a um site do SharePoint, selecione Configurações do Site>Aparência>Alterar a aparência. Em seguida, você pode usar o Assistente de Aparência para personalizar as cores, fontes, páginas mestras e imagem de plano de fundo de uma aparência composta. O Assistente de Aparência copia, transforma e armazena CSS no banco de dados de conteúdo do SharePoint. Ele também recolore imagens e as armazena no banco de dados de conteúdo.

Mecanismo de temas do SharePoint

Você pode usar o mecanismo de temas do SharePoint para aplicar cores, fontes e uma imagem de plano de fundo a um site, associando esses elementos a uma página mestra.

No SharePoint e no SharePoint Online, um tema é um conjunto conectado de arquivos de definição XML, um arquivo de imagem e uma página mestra associada que você pode usar para aplicar CSS personalizado a um site.

Os seguintes arquivos XML definem intervalos de cores e fontes que definem os detalhes de cores e fontes específicas à medida que são aplicados a estilos:

  • .spcolor
  • .spfont

Você pode criar seus próprios arquivos de cores e fontes no editor de texto de sua preferência.

A tabela a seguir lista os elementos de uma aparência composta.

Tabela 1. Elementos de um visual composto

Elemento Arquivo ou arquivos Onde está armazenado Obrigatório?
Paleta de cores .spcolor Pasta Galeria de temas\15 Sim
Esquema de fonte .spfont Pasta Galeria de temas\15 Não
Layout do site

.master

.preview

 Galeria de Páginas Mestras Sim
Imagem de plano de fundo

.jpg

.bmp

.png

.gif

 Ativos do site Não

Os usuários podem selecionar aparências compostas usando o Assistente de Aparência (Configurações do Site>Aparência>Alterar a Aparência), a interface do usuário de Introdução, ou diretamente pelo menu de ações do site. Quando um usuário seleciona uma aparência composta, o mecanismo de temas aplica cores, fontes, imagens de plano de fundo, a página .master associada e o arquivo .preview associado à página .master ao site.

Paletas de cores

O mecanismo de temas armazena cores nas paletas de cores definidas pelo arquivo .spcolor, conforme mostrado na figura a seguir.

Captura de tela de um arquivo .spcolor mostrando o nome da cor e os atributos de valor

As paletas de cores são armazenadas na Galeria de Temas do site raiz. Uma paleta de cores é um arquivo XML editável composto de definições de paleta de cores e intervalos de cores.

Os metadados da paleta de cores (<s:colorPalette>) definem o seguinte:

  • Três intervalos de visualização que definem quais intervalos de cores devem ser usados em visualizações de aparência compostas.
  • Uma propriedade isInverted que permite ao designer da paleta especificar se o tema está invertido (fundo escuro com texto claro).
  • O namespace XML associado ao tema.

Os slots de cor são definidos por dois atributos: nome de cor e valor&mdaash; que definem um nome para a cor e seu valor RGB. Os intervalos de cores têm nomes semânticos, como BodyText ou SiteTitle, que ajudam a identificar quais intervalos correspondem a uma região de uma página do SharePoint.

<s:color name="BodyText" value="444444" />

A linha 2 do arquivo .spcolor define o namespace XML, os intervalos de visualização e se as cores estão invertidas (elas têm um primeiro plano claro em um plano de fundo escuro em vez de um primeiro plano escuro em um plano de fundo claro).

O arquivo .spcolor contém 89 intervalos de cores. Você pode usar intervalos de cores para definir aspectos mais avançados da cor, incluindo a opacidade, usando valores hexadecimais de oito dígitos. Por exemplo, se verde for RRGGBB 00FF00, um verde opaco em 70% será AARRGGBB 7F00FF00. Se o SharePoint usar um intervalo que você não define, qualquer CSS que faça referência a ele não mudará de cor. Se um intervalo for definido que nunca será referenciado em CSS, a cor nunca será mostrada na interface do usuário.

Você pode editar o arquivo .spcolor no Bloco de Notas. Você não pode editá-lo no PowerPoint.

Ferramenta de paleta de cores

Você pode usar a ferramenta de paleta de cores para visualizar as cores do tema e como elas funcionam juntas na página. Use-a para identificar informações de cores que você pode usar nos intervalos de cores do arquivo .spcolor, e aplicar cores a um site do SharePoint sem alterar nenhum CSS como parte do processo.

A ferramenta exibe as cores em formato hexadecimal para que você possa copiar e colar facilmente o valor da cor no elemento apropriado em seu arquivo .spcolor. Você também pode usar a ferramenta de paleta de cores para ajustar uma imagem de plano de fundo a um modelo e alternar entre as páginas mestras seattle.master e oslo.master.

Ferramenta de paleta de cores

Captura de tela da ferramenta de paleta de cores

O arquivo .spcolor é o único arquivo necessário para um novo tema, mas você pode precisar adicionar algumas declarações de fontes personalizadas, dependendo do nível de detalhamento do seu design. Para fazer isso, você deve acessar o arquivo .spfont.

Esquemas de fontes

Da mesma forma que as paletas de cores definem como as cores são usadas nas aparências compostas, os esquemas de fontes definem as fontes em aparências compostas.

Os esquemas de fontes são definidos no arquivo .spfont armazenado na Galeria de Temas. O arquivo .spfont inclui os seguintes intervalos de fonte que definem os valores de nome, face de tipos e script de uma aparência composta:

  • Título
  • Navegação
  • Cabeçalho pequeno
  • Cabeçalho
  • Cabeçalho grande
  • Corpo
  • Corpo grande

As fontes também podem ser encontradas por tipo de script (por exemplo, Latim, Árabe, Cirílico). O suporte a fontes da web está incluído em quatro tipos de arquivos:

  • Tipo aberto incorporado (EOT)
  • Arquivo de formato de fonte aberta da web (WOFF)
  • Fonte TrueType (TTF)
  • Gráficos vetoriais escaláveis (SVG)

O esquema de fontes define uma imagem grande de visualização e uma imagem pequena de visualização. Elas são necessárias apenas para fontes da web.

Observação

Você pode editar o arquivo .spfont no Bloco de Notas. Você não pode editá-lo no PowerPoint.

A seguir, um exemplo de um arquivo .spfont.

<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="Georgia" previewSlot1="title" previewSlot2="body"
  xmlns:s=http://schemas.microsoft.com/sharepoint/>
    <s:fontSlots>
        <s:fontSlot name="title">
            <s:latin typeface="Georgia"/>
            <s:font script="Arab" typeface="Calibri" />
            <s:font script="Deva" typeface="Mangal" />
            . . . 
        </s:fontSlot>
    <s:fontSlot name="navigation">
        <s:latin typeface="Georgia"/>
        <s:font script="Arab" typeface="Calibri" />
        <s:font script="Deva" typeface="Mangal" />
        . . . 
        </s:fontSlot>
    </s:fontSlots>
</s:fontScheme>

Layout do site: páginas mestras e arquivos de visualização correspondentes

O mecanismo de temas define o layout do site de uma aparência composta com base na página mestra .master e seu arquivo .preview correspondente. Por exemplo, se a página mestra definida para a aparência composta for seattle.master, essa página mestra definirá o layout do site.

O layout do site é extraído da Galeria de páginas mestras de qualquer página mestra que tenha arquivos .preview. Um arquivo de pré-visualização é necessário para que uma página mestra apareça como uma opção na interface do usuário Assistente de Aparência (Configurações do Site>Aparência>Assistente de Aparência).

Para disponibilizar uma página mestra no menu Layout do Site, crie um arquivo .preview que corresponda à página .master. O arquivo .preview exibe imagens em miniatura para a aparência composta e a seção de visualização à direita das opções de Assistente de Aparência na página designbuilder.aspx.

Imagem de plano de fundo

Você pode alterar a imagem de plano de fundo de uma aparência composta, escolhendo Alterar. Isso abre uma caixa de diálogo de upload que você pode usar para fazer upload de um arquivo de imagem. Você também pode arrastar sua própria imagem para a visualização de plano de fundo.

Crie temas personalizados

Para criar um tema personalizado:

  1. Vá para Configurações do Site e, sob o cabeçalho Galerias de Web Designer, selecione Temas>15. Uma lista de arquivos .spcolor e .spfont é exibida, conforme mostrado aqui.

    Captura de tela da Galeria de Temas mostrando o esquema de fontes e os arquivos de paleta

  2. Faça o download de uma cópia de um dos arquivos .spcolor (por exemplo, Palette001.spcolor) e abra-a em um editor de texto.

  3. Edite o arquivo .spcolor copiado para refletir suas diretrizes de design. Por exemplo, se você tiver uma fonte preta para o texto do corpo principal, edite o arquivo para alterar a linha <s:color name="BodyText" value="444444" /> para <s:color name="BodyText" value="000000" />.

  4. Para cada elemento HTML, adicione sua cor.

  5. Quando terminar, carregue o arquivo .spcolor à pasta Configurações do Site>Tema>15.

    Observação

    Salve o arquivo com um novo nome (por exemplo, custom_palette1.spcolor).

    A tabela a seguir mapeia cores e elementos de página para seu código no arquivo .spcolor. É um subconjunto dos mapeamentos disponíveis no arquivo .spcolor.

    Tabela 2. Mapeamento de cores e elementos de página para o arquivo .spcolor

    Elemento Cor Código
    Corpo de texto Preto <s:color name="BodyText" value="000000" />
    Plano de fundo de navegação global Azul <s:color name="HeaderBackground" value="018dff" />
    Texto de navegação global Branco <s:color name="HeaderNavigationText" value="ffffff" />
    Plano de fundo de navegação atual Vermelho <s:color name="NavigationHoverBackground" value="e51400" />
    Texto de navegação atual Branco <s:color name="Navigation" value="ffffff" />
    Título Branco <s:color name="SiteTitle" value="FFFFFF" />
    Plano de fundo de rodapé Preto <s:color name="FooterBackground" value="000000" />

  6. Para personalizar o .spfont, baixe uma cópia de um arquivo .spfont e abra-o em um editor de texto. Observe que o arquivo .spfont é um pouco diferente do .spcolor, mas os dois arquivos compartilham uma estrutura semelhante.

    Captura de tela que mostra os conteúdos do arquivo .spfont

  7. Edite cada seção <s:fontSlot /> para personalizar a fonte que o SharePoint aplica ao intervalo de fonte especificado na página. Por exemplo, observe a primeira entrada, <s:fontSlot name="title">. Esta entrada descreve qual fonte o SharePoint usa para estilizar o título da página. Esta seção também especifica qual fonte é usada para diferentes idiomas.

    Observação

    Você pode carregar fontes personalizadas no SharePoint e apontar cada entrada para um arquivo personalizado .eot, .woff, .ttf e .svg.

  8. Carregue o arquivo à pasta Configurações do Site>Tema>15.

    Observação

    Salve o arquivo com um novo nome (por exemplo, custom_font.spfont).

    A tabela a seguir mapeia elementos de página para fontes conforme estão definidas no arquivo .spfont.

    Tabela 3. Mapeamento de elementos de página para fontes

    Elemento Fonte Código
    Título Open Sans <s:cs typeface="Open Sans" />
    Navegação Roboto <s:cs typeface="Roboto" />
    Títulos Trajan Pro <s:cs typeface="Trajan Pro" />
    Corpo Open Sans <s:cs typeface="Open Sans" />

    Você pode ter que garantir que algumas fontes personalizadas estejam disponíveis para os navegadores dos usuários. Por exemplo, se os títulos se referirem a uma fonte do Trajan Pro, que é incomum nos computadores da maioria dos usuários, adicione as seguintes declarações de fonte na parte superior da <declaração s:fontSlot> . Isso garantirá que a fonte correta seja exibida.

    <s:latin typeface="Trajan Pro" 
    eotsrc="/SiteAssets/Trajan Pro.eot" 
    woffsrc="/SiteAssets/Trajan Pro.woff" 
    ttfsrc="/SiteAssets/Trajan Pro.ttf" 
    svgsrc="/SiteAssets/Trajan Pro.svg"  />

Adicionar um tema personalizado ao SharePoint

Depois de fazer suas personalizações na página mestra e arquivos .spcolor e .spfont, adicione-os ao diretório de Aparências Compostas para que o SharePoint possa acessá-los.

  1. Vá para Configurações do Site e, em Galerias de Web Designer, selecione Aparências Compostas.

  2. Escolha o link do novo item no canto superior esquerdo. A janela a seguir é aberta.

    Captura de tela mostrando a nova página de aparência composta

  3. Adicione um título e um nome para sua aparência composta.

  4. Preencha os campos restantes:

    • No campo URL da Página Mestra, adicione a URL da página mestra que você gostaria que o tema usasse.

    • Em URL do Tema, adicione a URL do arquivo .spcolor.

    • Em URL da Imagem, inclua a URL de uma imagem que você deseja usar como plano de fundo. Isso não é necessário se o design não exigir uma imagem de plano de fundo.

    • Em URL do Esquema de Fontes, inclua a URL do arquivo .spfont.

    • Em Ordem de Exibição, indique a ordem em que a aparência composta deve ser exibida.

  5. Escolha Salvar. Sua entrada de tema aparece na lista de Aparências Compostas.

Depois de adicionar seu tema personalizado como uma aparência composta, os usuários podem acessar o tema e aplicá-lo a um site, acessando Configurações do Site>Aparência>Assistente de Aparência.

A figura a seguir mostra um exemplo de uma seção do Assistente de Aparência nas Configurações do Site.

Captura de tela que mostra os looks compostos que estão disponíveis em Configurações > do Site Alterar a aparência

O que o mecanismo de temas faz quando um usuário aplica uma aparência composta

Quando um usuário aplica uma aparência composta, o SharePoint copia, transforma e armazena CSS no banco de dados de conteúdo. Também recolore e armazena imagens no banco de dados de conteúdo. Como parte do processo de aplicação de um tema a um site, o mecanismo de temas obtém os valores de cor e fonte da paleta de cores especificada e do esquema de fontes encontrado na Galeria de Temas do site raiz. Para aplicar a página .master e o arquivo .preview da página mestra (o layout do site), o mecanismo de temas obtém páginas mestras, na Galeria de Páginas Mestras, que tenham um arquivo .preview correspondente.

Quando se aplica uma aparência composta, o mecanismo mapeia as configurações especificadas por comentários CSS específicos definidos pelo mecanismo de temas. Nos bastidores, o mecanismo de temas salva a imagem de plano de fundo a Ativos do Site, dimensiona e compacta imagens JPG e BMP e limita o tamanho das imagens GIF e PNG.

Quando uma aparência composta é aplicada a um site do SharePoint, o SharePoint localiza e substitui tokens de comentário CSS incorporando um valor derivado da aparência composta na próxima linha do arquivo CSS após o token. Esse novo valor é aplicado ao site do SharePoint.

A tabela a seguir lista os tokens de comentário CSS.

Tabela 4. Tokens de comentário do CSS

Token Descrição Parâmetro ApplyTheme correspondente
/* ReplaceBGImage */ Alterna a imagem de plano de fundo atual com a imagem na URL da imagem de aparência composta atribuída. backgroundImageUrl
/* ReplaceFont */ Alterna a fonte atual com uma das fontes encontradas na URL do esquema de fonte da aparência composta atribuída. fontSchemeUrl
/* ReplaceColor */ Troca a cor atual por uma das cores especificadas em um intervalo de cores na URL de paleta de cores da aparência composta atribuída. colorPaletteUrl
/* RecolorImage */ Recolore imagens usando tingimento ou preenchimento.

Confira também