Uso de temas de documentos en los complementos de PowerPoint

Un tema de Office consiste, en parte, en un conjunto coordinado visualmente de fuentes y colores que se puede aplicar a presentaciones, documentos, hojas de cálculo y correos electrónicos. Para aplicar o personalizar el tema de una presentación en PowerPoint, use los grupos Temas y Variantes en la pestaña Diseño de la cinta. PowerPoint asigna una presentación en blanco con el Tema de Office predeterminado, pero puede elegir otros temas disponibles en la pestaña Diseño, descargar temas adicionales de Office.com, o crear y personalizar su propio tema.

Con OfficeThemes.css, diseñe complementos que se coordinen con PowerPoint de dos maneras.

• En los complementos de contenido para PowerPoint. Use las clases de tema de documento de OfficeThemes.css para especificar fuentes y colores que coincidan con el tema de la presentación en la que se inserta el complemento de contenido, y esas fuentes y colores se actualizarán dinámicamente si un usuario cambia o personaliza el tema de la presentación.

• En los complementos de panel de tareas para PowerPoint. Use las clases de tema de la interfaz de usuario de Office de OfficeThemes.css para especificar las mismas fuentes y colores de fondo que se usan en la interfaz de usuario para que los complementos del panel de tareas coincidan con los colores de los paneles de tareas integrados, y esos colores se actualizarán dinámicamente si un usuario cambia el tema de la interfaz de usuario de Office.

Colores de temas del documento

Cada tema del documento de Office define 12 colores. Diez de esos colores se encuentran disponibles cuando establece la fuente, el fondo y otras opciones de colores en una presentación con el selector de colores.

Para ver o personalizar el conjunto completo de 12 colores de tema en PowerPoint, en el grupo Variantes de la pestaña Diseño , haga clic en la lista desplegable Más y, a continuación, seleccione Colores>Personalizar colores para mostrar el cuadro de diálogo Crear nuevos colores de tema .

Los primeros cuatro colores son para texto y fondos. El texto que se crea con colores claro siempre será legible sobre colores oscuros y el texto que se crea con colores oscuros siempre será legible sobre colores claros. Los seis colores siguientes son colores de énfasis que siempre están visibles en los cuatro colores de fondo posibles. Los dos últimos colores son para hipervínculos e hipervínculos visitados.

Fuentes de temas del documento

Cada tema del documento de Office también define dos fuentes: una para los encabezados y otra para el texto de cuerpo. PowerPoint usa estas fuentes para crear estilos de texto automáticos. Además, las galerías de Estilos rápidos para texto y WordArt usan estas mismas fuentes de temas. Estas dos fuentes están disponibles como las primeras dos selecciones cuando selecciona fuentes con el selector de fuentes.

Para ver o personalizar fuentes de tema en PowerPoint, en el grupo Variantes de la pestaña Diseño , haga clic en la lista desplegable Más y, a continuación, seleccione Fuentes>Personalizar fuentes para mostrar el cuadro de diálogo Crear nuevas fuentes de tema .

Fuentes y colores del tema de la interfaz de usuario de Office

Office también permite elegir entre varios temas predefinidos que especifican algunos de los colores y las fuentes que se usan en la interfaz de usuario de todas las aplicaciones de Office. Para ello, use la lista desplegableTema de Officede la cuenta> de archivo> (desde cualquier aplicación de Office).

OfficeThemes.css incluye clases que puede usar en los complementos del panel de tareas para PowerPoint, por lo que usarán estas mismas fuentes y colores. Esto le permite diseñar complementos de panel de tareas que coincidan con la apariencia de los paneles de tareas integrados.

Uso de OfficeThemes.css

El uso del archivo OfficeThemes.css con los complementos de contenido para PowerPoint le permite coordinar la apariencia del complemento con el tema aplicado a la presentación con la que se ejecuta. El uso del archivo OfficeThemes.css con los complementos del panel de tareas para PowerPoint le permite coordinar la apariencia del complemento con las fuentes y los colores de la interfaz de usuario de Office.

Agregar el archivo OfficeThemes.css al proyecto

Siga estos pasos para agregar y hacer referencia al archivo de OfficeThemes.css al proyecto del complemento.

Nota:

Los pasos de este procedimiento solo se aplican a Visual Studio 2015. Si usa Visual Studio 2019, el archivo OfficeThemes.css se crea automáticamente para los nuevos proyectos de complementos de PowerPoint que cree.

1. En el Explorador de soluciones, haga clic con el botón derecho (o mantenga presionada) la carpeta Contenido del proyecto web de project_name, elija Agregar y, a continuación, seleccione Hoja de estilos.

2. Asígnele a la hoja de estilo nueva el nombre OfficeThemes.

   Importante

   La hoja de estilo debe llamarse OfficeThemes, de lo contrario, la función que actualiza dinámicamente las fuentes y los colores de los complementos cuando un usuario cambia el tema no funcionará.

3. Elimine la clase body predeterminada (body {}) en el archivo, y copie y pegue el siguiente código CSS en el archivo.

   /* 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. Si usa una herramienta distinta de Visual Studio para crear el complemento, copie el código CSS del paso anterior en un archivo de texto. A continuación, guarde el archivo como OfficeThemes.css.

Referencia OfficeThemes.css en las páginas HTML del complemento

Para usar el archivo OfficeThemes.css en el proyecto de complemento, agregue una <link> etiqueta que haga referencia al archivo OfficeThemes.css dentro de la <head> etiqueta de las páginas web (como un archivo .html, .aspx o .php) que implemente la interfaz de usuario del complemento en este formato.

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

Para realizar esta acción en Visual Studio, siga estos pasos

1. Seleccione Crear un nuevo proyecto.

2. Utilizando el cuadro de búsqueda, escribaagregar. Seleccioneun complemento de Web de PowerPoint ,y luego seleccioneSiguiente.

3. Asigne un nombre al proyecto y seleccioneCrear.

4. En la ventana de diálogo Crear un complemento de Office, elija Agregar nuevas funcionalidades a PowerPoint y, a continuación, elija Finalizar para crear el proyecto.

5. Visual Studio crea una solución y sus proyectos aparecen en el Explorador de soluciones. El archivo Home.html se abre en Visual Studio.

6. En las páginas HTML que implementan la interfaz de usuario del complemento, como Home.html en la plantilla predeterminada, agregue la siguiente <link> etiqueta dentro de la <head> etiqueta que hace referencia al archivo OfficeThemes.css .

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

Si va a crear el complemento con una herramienta distinta de Visual Studio, agregue una <link> etiqueta con el mismo formato que especifique una ruta de acceso relativa a la copia de OfficeThemes.css que se implementará con el complemento.

Usar OfficeThemes.css clases de tema de documento en la página HTML del complemento de contenido

A continuación, se muestra un ejemplo simple de HTML en una complemento de contenido que usa las clases de temas del documento OfficeTheme.css. Para obtener más información sobre las clases de OfficeThemes.css que corresponden a los 12 colores y 2 fuentes usadas en un tema de documento, vea Clases de tema para complementos de contenido.

<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>

En tiempo de ejecución, cuando se inserta en una presentación que usa el tema de Office predeterminado, el complemento de contenido se representa de esta manera.

Si cambia la presentación para que use otro tema o personalice el tema de la presentación, las fuentes y colores especificados con OfficeThemes.css clases se actualizarán dinámicamente para que se correspondan con las fuentes y colores del tema de la presentación. Con el mismo ejemplo de HTML anterior, si la presentación donde se inserta el complemento usa el tema Faceta, la representación del complemento será similar a la siguiente.

Usar OfficeThemes.css clases de tema de la interfaz de usuario de Office en la página HTML del complemento del panel de tareas

Además del tema del documento, los usuarios pueden personalizar el esquema de color de la interfaz de usuario de Office para todas las aplicaciones de Office mediante el cuadro desplegable Archivo>Cuenta>Tema de Office.

A continuación, se muestra un ejemplo simple de HTML en una complemento de panel de tareas que usa clases de OfficeTheme.css para especificar el color de la fuente y el fondo. Para obtener más información sobre las clases de OfficeThemes.css que corresponden a fuentes y colores del tema de la interfaz de usuario de Office, vea Clases de tema para complementos de panel de tareas.

<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> 

Cuando se ejecuta en PowerPoint con Archivo>Cuenta>Tema de Office establecido como Blanco, la complemento de panel de tareas se representa de la siguiente forma.

Si cambia OfficeTheme a Gris oscuro, las fuentes y colores especificados con OfficeThemes.css clases se actualizarán dinámicamente para representarse de esta forma.

Clases de OfficeTheme.cs

El archivo OfficeThemes.css contiene dos conjuntos de clases que puede usar con los complementos de contenido y panel de tareas para PowerPoint.

Clases de temas para complementos de contenido

El archivo OfficeThemes.css proporciona clases que corresponden a las dos fuentes y 12 colores usados en un tema de documento. Estas clases son apropiadas para los complementos de contenido para PowerPoint de modo que las fuentes y los colores del complemento puedan coordinarse con la presentación en la que se inserta.

Fuentes del tema para complementos de contenido

Clase	Description
office-bodyFont-eastAsian	Nombre del este asiático de la fuente del cuerpo.
office-bodyFont-latin	Nombre latino de la fuente del cuerpo. Valor predeterminado "Calabri"
office-bodyFont-script	Nombre de script de la fuente del cuerpo.
office-bodyFont-localized	Nombre localizado de la fuente del cuerpo. Especifica el nombre de fuente predeterminado conforme a la cultura que se usa actualmente en Office.
office-headerFont-eastAsian	Nombre del este asiático de la fuente de los encabezados.
office-headerFont-latin	Nombre latino de la fuente de los encabezados. Valor predeterminado "Calabri Light"
office-headerFont-script	Nombre de script de la fuente de los encabezados.
office-headerFont-localized	Nombre localizado de la fuente de los encabezados. Especifica el nombre de fuente predeterminado conforme a la cultura que se usa actualmente en Office.

Colores de temas para complementos de contenido

Clase	Description
office-docTheme-primary-fontColor	Color de fuente principal. Valor predeterminado #000000
office-docTheme-primary-bgColor	Color de fondo de fuente principal. Valor predeterminado #FFFFFF
office-docTheme-secondary-fontColor	Color de fuente secundario. Valor predeterminado #000000
office-docTheme-secondary-bgColor	Color de fondo de fuente secundario. Valor predeterminado #FFFFFF
office-contentAccent1-color	Color de énfasis de fuente 1. Valor predeterminado #5B9BD5
office-contentAccent2-color	Color de énfasis de fuente 2. Valor predeterminado #ED7D31
office-contentAccent3-color	Color de énfasis de fuente 3. Valor predeterminado #A5A5A5
office-contentAccent4-color	Color de énfasis de fuente 4. Valor predeterminado #FFC000
office-contentAccent5-color	Color de énfasis de fuente 5. Valor predeterminado #4472C4
office-contentAccent6-color	Color de énfasis de fuente 6. Valor predeterminado #70AD47
office-contentAccent1-bgColor	Color de énfasis de fondo 1. Valor predeterminado #5B9BD5
office-contentAccent2-bgColor	Color de énfasis de fondo 2. Valor predeterminado #ED7D31
office-contentAccent3-bgColor	Color de énfasis de fondo 3. Valor predeterminado #A5A5A5
office-contentAccent4-bgColor	Color de énfasis de fondo 4. Valor predeterminado #FFC000
office-contentAccent5-bgColor	Color de énfasis de fondo 5. Valor predeterminado #4472C4
office-contentAccent6-bgColor	Color de énfasis de fondo 6. Valor predeterminado #70AD47
office-contentAccent1-borderColor	Color de énfasis del borde 1. Valor predeterminado #5B9BD5
office-contentAccent2-borderColor	Color de énfasis del borde 2. Valor predeterminado #ED7D31
office-contentAccent3-borderColor	Color de énfasis del borde 3. Valor predeterminado #A5A5A5
office-contentAccent4-borderColor	Color de énfasis del borde 4. Valor predeterminado #FFC000
office-contentAccent5-borderColor	Color de énfasis del borde 5. Valor predeterminado #4472C4
office-contentAccent6-borderColor	Color de énfasis del borde 6. Valor predeterminado #70AD47
office-a	Color de hipervínculo. Valor predeterminado #0563C1
office-a:visited	Color de hipervínculo visitado. Valor predeterminado #954F72

En la siguiente captura de pantalla se muestran ejemplos de todas las clases de colores de temas (excepto para los dos colores de hipervínculos) asignadas al texto de la complemento cuando se usa el tema predeterminado de Office.

Clases de temas para complementos de panel de tareas

El archivo OfficeThemes.css proporciona clases que corresponden a los cuatro colores asignados a fuentes y fondos utilizados por el tema de la interfaz de usuario de la aplicación de Office. Estas clases son adecuadas para usarse con complementos de tareas para PowerPoint, de modo que los colores del complemento se coordinen con los demás paneles de tareas integrados en Office.

Colores de fuente y de fondo del tema para los complementos de panel de tareas

Clase	Description
office-officeTheme-primary-fontColor	Color de fuente principal. Valor predeterminado #B83B1D
office-officeTheme-primary-bgColor	Color de fondo principal. Valor predeterminado #DEDEDE
office-officeTheme-secondary-fontColor	Color de fuente secundario. Valor predeterminado #262626
office-officeTheme-secondary-bgColor	Color de fondo secundario. Valor predeterminado #FFFFFF

Ver también

• Crear complementos de contenido y panel de tareas para PowerPoint