Usar temas de documentos em seus suplementos do PowerPoint

Um tema do Office é composto, em parte, por um conjunto visualmente coordenado de fontes e cores que você pode aplicar em apresentações, documentos, planilhas e emails. Para aplicar ou personalizar o tema de uma apresentação no PowerPoint, use os grupos Temas e Variantes na guia Design da faixa de opções. O PowerPoint atribui uma nova apresentação em branco com o Tema do Office padrão, mas é possível escolher outros temas disponíveis na guia Design, baixar temas adicionais do Office.com ou criar e personalizar seu próprio tema.

Ao utilizar OfficeThemes.css, crie suplementos coordenados com o PowerPoint de duas formas.

• Em suplementos de conteúdo para PowerPoint. Utilize as classes de temas de documento do OfficeThemes.css para especificar tipos de letra e cores que correspondam ao tema da apresentação em que o seu suplemento de conteúdo é inserido e esses tipos de letra e cores serão atualizados dinamicamente se um utilizador alterar ou personalizar o tema da apresentação.

• Em suplementos de painel de tarefa para PowerPoint. Utilize as classes de temas da IU do Office de OfficeThemes.css para especificar os mesmos tipos de letra e cores de fundo utilizados na IU para que os suplementos do painel de tarefas correspondam às cores dos painéis de tarefas incorporados e essas cores serão atualizadas dinamicamente se um utilizador alterar o tema da IU do Office.

Cores de tema do documento

Todo tema de documento do Office define 12 cores. Dez dessas cores ficam disponíveis ao definir configurações de fonte, plano de fundo e outras configurações de cores em uma apresentação usando o seletor de cores.

Para ver ou personalizar o conjunto completo de 12 cores de tema no PowerPoint, no grupo Variantes no separador Estrutura , clique no menu pendente Mais e, em seguida, selecione Cores>Personalizar Cores para apresentar a caixa de diálogo Criar Novas Cores do Tema .

As quatro primeiras cores são para texto e planos de fundo. O texto criado com as cores claras sempre será legível sobre as cores escuras, e o texto criado com cores escuras sempre será legível sobre as cores claras. As seis cores seguintes são cores de ênfase que ficam sempre visíveis sobre as quatro cores de fundo possíveis. As duas últimas cores são para hiperlinks e hiperlinks visitados.

Fontes de tema do documento

Cada tema de documento do Office também define duas fontes: uma para títulos e outra para o corpo do texto. O PowerPoint usa essas fontes para construir os estilos de texto automáticos. Além disso, as galerias de Estilos Rápidos para texto e WordArt utilizam estes mesmos tipos de letra de tema. Essas duas fontes ficam disponíveis como as duas primeiras seleções quando você usa o seletor de fonte.

Para ver ou personalizar tipos de letra do tema no PowerPoint, no grupo Variantes no separador Estrutura, clique no menu pendente Mais e, em seguida, selecione> Tipos de LetraPersonalizar Tipos de Letra para apresentar a caixa de diálogo Criar Novos Tipos de Letra do Tema.

Cores e fontes de tema da interface de usuário do Office

O Office também permite escolher entre vários temas predefinidos que especificam algumas das cores e fontes usadas na interface de usuário de todos os aplicativos do Office. Para tal, utilize o menu pendente Tema daConta> de Ficheiro>do Office (a partir de qualquer aplicação do Office).

OfficeThemes.css inclui classes que pode utilizar nos suplementos do painel de tarefas do PowerPoint para que utilizem estes mesmos tipos de letra e cores. Isso permite que você projete seus suplementos de painel de tarefa para corresponder à aparência dos painéis de tarefas internos.

Utilizar OfficeThemes.css

Utilizar o ficheiro de OfficeThemes.css com os seus suplementos de conteúdo para o PowerPoint permite-lhe coordenar o aspeto do seu suplemento com o tema aplicado à apresentação com a qual está a ser executado. Utilizar o ficheiro OfficeThemes.css com os suplementos do painel de tarefas do PowerPoint permite-lhe coordenar o aspeto do seu suplemento com os tipos de letra e as cores da IU do Office.

Adicionar o ficheiro OfficeThemes.css ao projeto

Utilize os seguintes passos para adicionar e referenciar o ficheiro OfficeThemes.css ao projeto de suplemento.

1. No Explorador de Soluções, clique com o botão direito do rato (ou selecione sem soltar) a pasta Conteúdo no projeto Web project_name, selecione Adicionar e, em seguida, selecione Folha de Estilos.

2. Dê o nome OfficeThemes para a nova folha de estilos.

   Importante

   A folha de estilo deve ser nomeada como OfficeThemes ou o recurso que atualiza dinamicamente as fontes e cores do suplemento quando um usuário muda o tema não funcionará.

3. Exclua a classe body padrão (body {}) no arquivo e copie e cole o código CSS a seguir no arquivo.

   /* The following classes describe the common theme information for office documents */ 
   
   /* Basic Font and Background Colors for text */ 
   .office-docTheme-primary-fontColor { color:#000000; } 
   .office-docTheme-primary-bgColor { background-color:#ffffff; } 
   .office-docTheme-secondary-fontColor { color: #000000; } 
   .office-docTheme-secondary-bgColor { background-color: #ffffff; } 
   
   /* Accent color definitions for fonts */ 
   .office-contentAccent1-color { color:#5b9bd5; } 
   .office-contentAccent2-color { color:#ed7d31; } 
   .office-contentAccent3-color { color:#a5a5a5; } 
   .office-contentAccent4-color { color:#ffc000; } 
   .office-contentAccent5-color { color:#4472c4; } 
   .office-contentAccent6-color { color:#70ad47; } 
   
   /* Accent color for backgrounds */ 
   .office-contentAccent1-bgColor { background-color:#5b9bd5; } 
   .office-contentAccent2-bgColor { background-color:#ed7d31; } 
   .office-contentAccent3-bgColor { background-color:#a5a5a5; } 
   .office-contentAccent4-bgColor { background-color:#ffc000; } 
   .office-contentAccent5-bgColor { background-color:#4472c4; } 
   .office-contentAccent6-bgColor { background-color:#70ad47; } 
   
   /* Accent color for borders */ 
   .office-contentAccent1-borderColor { border-color:#5b9bd5; } 
   .office-contentAccent2-borderColor { border-color:#ed7d31; } 
   .office-contentAccent3-borderColor { border-color:#a5a5a5; } 
   .office-contentAccent4-borderColor { border-color:#ffc000; } 
   .office-contentAccent5-borderColor { border-color:#4472c4; } 
   .office-contentAccent6-borderColor { border-color:#70ad47; } 
   
   /* links */ 
   .office-a { color: #0563c1; } 
   .office-a:visited { color: #954f72; } 
   
   /* Body Fonts */ 
   .office-bodyFont-eastAsian { } /* East Asian name of the Font */ 
   .office-bodyFont-latin { font-family:"Calibri"; } /* Latin name of the Font */ 
   .office-bodyFont-script { } /* Script name of the Font */ 
   .office-bodyFont-localized { font-family:"Calibri"; } /* Localized name of the Font. Corresponds to the default font of the culture currently used in Office.*/ 
   
   /* Headers Font */ 
   .office-headerFont-eastAsian { } 
   .office-headerFont-latin { font-family:"Calibri Light"; } 
   .office-headerFont-script { } 
   .office-headerFont-localized { font-family:"Calibri Light"; } 
   
   /* The following classes define font and background colors for Office UI themes. These classes should only be used in task pane add-ins */ 
   
   /* Basic Font and Background Colors for PPT */ 
   .office-officeTheme-primary-fontColor { color:#b83b1d; } 
   .office-officeTheme-primary-bgColor { background-color:#dedede; } 
   .office-officeTheme-secondary-fontColor { color:#262626; } 
   .office-officeTheme-secondary-bgColor { background-color:#ffffff; }
   

4. Se estiver a utilizar uma ferramenta que não o Visual Studio para criar o seu suplemento, copie o código CSS do passo anterior para um ficheiro de texto. Em seguida, guarde o ficheiro como OfficeThemes.css.

Referência OfficeThemes.css nas páginas HTML do suplemento

Para utilizar o ficheiro de OfficeThemes.css no seu projeto de suplemento, adicione uma <link> etiqueta que faça referência ao ficheiro de OfficeThemes.css dentro <head> da etiqueta das páginas Web (como um ficheiro .html, .aspx ou .php) que implemente a IU do seu suplemento neste formato.

<link href="<local_path_to_OfficeThemes.css>" rel="stylesheet" type="text/css" />

Para fazer isso no Visual Studio, execute estas etapas.

1. Escolha Criar um novo projeto.

2. Usando a caixa de pesquisa, insira suplemento. Escolha Suplemento do PowerPoint Web , em seguida, selecione Próximo.

3. Nomeie seu projeto e selecione Criar.

4. Na caixa de diálogo Criar suplementos do Office, escolha Adicionar novas funcionalidades ao PowerPointe depois Concluir para criar o projeto.

5. O Visual Studio cria uma solução, e os dois projetos dele são exibidos no Gerenciador de Soluções. O arquivo Home.html é aberto no Visual Studio.

6. Nas páginas HTML que implementam a IU do seu suplemento, como Home.html no modelo predefinido, adicione a seguinte <link> etiqueta dentro da <head> etiqueta que referencia o ficheiro OfficeThemes.css .

   <link href="../../Content/OfficeThemes.css" rel="stylesheet" type="text/css" />
   

Se estiver a criar o seu suplemento com uma ferramenta diferente do Visual Studio, adicione uma <link> etiqueta com o mesmo formato, especificando um caminho relativo para a cópia de OfficeThemes.css que será implementada com o seu suplemento.

Utilizar OfficeThemes.css classes de tema de documento na página HTML do suplemento de conteúdos

Veja a seguir um exemplo simples de HTML em um suplemento de conteúdo que usa as classes de tema de documento do OfficeTheme.css. Para obter detalhes sobre as classes OfficeThemes.css que correspondem às 12 cores e 2 tipos de letra utilizados num tema de documento, consulte Classes de temas para suplementos de conteúdo.

<body>
    <div id="themeSample" class="office-docTheme-primary-fontColor ">
        <h1 class="office-headerFont-latin">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent1-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent2-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent3-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent4-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent5-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent6-bgColor">Hello world!</h1> 
        <p class="office-bodyFont-latin office-docTheme-secondary-fontColor">Hello world!</p> 
    </div>
</body>

No runtime, quando inserido numa apresentação que utiliza o Tema do Office predefinido, o suplemento de conteúdo é composto desta forma.

Se alterar a apresentação para utilizar outro tema ou personalizar o tema da apresentação, os tipos de letra e as cores especificados com OfficeThemes.css classes serão atualizados dinamicamente para corresponder aos tipos de letra e cores do tema da apresentação. Com o mesmo exemplo de HTML usado acima, se a apresentação na qual o suplemento está inserido usar o tema Faceta, o processamento do suplemento ficará assim.

Utilizar OfficeThemes.css aulas de tema da IU do Office na página HTML do suplemento do painel de tarefas

Além do tema do documento, os usuários podem personalizar o esquema de cores da interface de usuário do Office para todos os aplicativos do Office usando a caixa suspensa Arquivo>Conta>Tema do Office.

Veja a seguir um exemplo simples de HTML em um suplemento de painel de tarefa que usa classes do OfficeTheme.css para especificar a cor da fonte e cor de fundo. Para obter detalhes sobre as classes de OfficeThemes.css que correspondem a tipos de letra e cores do tema IU do Office, consulte Classes de temas para suplementos do painel de tarefas.

<body> 
    <div id="content-header" class="office-officeTheme-primary-fontColor office-officeTheme-primary-bgColor"> 
        <div class="padding">
            <h1>Welcome</h1>
        </div> 
    </div> 
    <div id="content-main" class="office-officeTheme-secondary-fontColor office-officeTheme-secondary-bgColor"> 
        <div class="padding"> 
            <p>Add home screen content here.</p> 
            <p>For example:</p> 
            <button id="get-data-from-selection">Get data from selection</button> 
            <p><a target="_blank" class="office-a" href="https://go.microsoft.com/fwlink/?LinkId=276812">Find more samples online...</a></p>
        </div>
    </div>
</body> 

Durante a execução no PowerPoint com Arquivo>Conta>Tema do Office definido como Branco, o suplemento de painel tarefa será renderizado da maneira a seguir.

Se alterar o OfficeTheme para Cinzento Escuro, os tipos de letra e as cores especificados com OfficeThemes.css classes serão atualizados dinamicamente para compor desta forma.

Classes do OfficeTheme.css

O ficheiro OfficeThemes.css contém dois conjuntos de classes que pode utilizar com os seus suplementos de conteúdo e painel de tarefas para o PowerPoint.

Classes de tema para suplementos de conteúdo

O ficheiro OfficeThemes.css fornece classes que correspondem aos 2 tipos de letra e 12 cores utilizados num tema de documento. Essas classes são apropriadas para uso com suplementos de conteúdo do PowerPoint, para que as fontes e cores de seu suplemento correspondam com a apresentação na qual ele está inserido.

Fontes de tema para suplementos de conteúdo

Cores de tema para suplementos de conteúdo

A captura de tela a seguir mostra exemplos de todas as classes de cores do tema (exceto as cores dos dois hiperlinks) atribuídas ao texto do suplemento ao usar o tema padrão do Office.

Classes de tema para suplementos de painel de tarefas

O ficheiro OfficeThemes.css fornece classes que correspondem às quatro cores atribuídas a tipos de letra e fundos utilizados pelo tema da IU da aplicação do Office. Estas classes são adequadas para utilizar com suplementos de tarefas para o PowerPoint, para que as cores do seu suplemento sejam coordenadas com os outros painéis de tarefas incorporados no Office.

Fonte e cores de plano de fundo do tema para suplementos de painel de tarefas

Confira também

• Criar suplementos de painel de tarefas e de conteúdo para o PowerPoint