Использование тем документов в надстройках PowerPoint

Статья
06/21/2024

Тема Office, в частности, состоит из визуально согласованного набора шрифтов и цветов, которые вы можете применять к презентациям, документам, электронным таблицам и электронным письмам. Чтобы применить или настроить тему презентации в PowerPoint, используйте группы Темы и Варианты на вкладке Дизайн. По умолчанию PowerPoint присваивает новой пустой презентации тему Office, но вы можете выбрать другие темы, доступные на вкладке Дизайн, скачать дополнительные темы с веб-сайта Office.com или создать и настроить собственную тему.

Используя OfficeThemes.css, проектируйте надстройки, координируемые с PowerPoint, двумя способами.

В контентных надстройках для PowerPoint. Используйте классы темы документа OfficeThemes.css , чтобы указать шрифты и цвета, соответствующие теме презентации, в которую вставляется контентная надстройка, и эти шрифты и цвета будут динамически обновляться, если пользователь изменяет или настраивает тему презентации.
В надстройках области задач для PowerPoint. Используйте классы темы пользовательского интерфейса Office OfficeThemes.css , чтобы указать те же шрифты и цвета фона, которые используются в пользовательском интерфейсе, чтобы надстройки области задач соответствовали цветам встроенных областей задач, и эти цвета будут динамически обновляться, если пользователь изменяет тему пользовательского интерфейса Office.

Цвета темы документа

Каждая тема документа Office определяет 12 цветов. Десять из них доступны при выборе шрифта, фона и других цветовых настроек презентации с помощью палитры.

Цветовая палитра.

Чтобы просмотреть или настроить полный набор из 12 цветов темы в PowerPoint, в группе Варианты на вкладке Конструктор щелкните раскрывающийся список Дополнительно , а затем выберите Цвета>Настроить цвета , чтобы открыть диалоговое окно Создание новых цветов темы .

Диалоговое окно

Первые четыре цвета предназначены для текста и фона. Текст, выполненный в светлых тонах, всегда лучше читается на темном фоне, а текст темных тонов — на светлом фоне. Следующие шесть цветов — это контрастные цвета, которые всегда четко видны на четырех возможных фоновых цветах. Последние два цвета применяются для непросмотренных и просмотренных гиперссылок.

Шрифты темы документа

В каждой теме документа Office определено два шрифта: один для заголовков и другой для основного текста. PowerPoint использует их для создания автоматических текстовых стилей. Кроме того, они используются в коллекциях текстовых экспресс-стилей и WordArt. Эти два шрифта отображаются вверху средства выбора шрифтов.

Средство выбора шрифта.

Чтобы просмотреть или настроить шрифты темы в PowerPoint, в группе Варианты на вкладке Конструктор щелкните раскрывающийся список Дополнительно , а затем выберите Шрифты>Настроить шрифты , чтобы открыть диалоговое окно Создание шрифтов темы .

Диалоговое окно

Шрифты и цвета темы для пользовательского интерфейса Office

Office также позволяет выбирать между несколькими стандартными темами, которые определяют несколько цветов и шрифтов, используемых в пользовательском интерфейсе всех приложений Office. Для этого используйте раскрывающийся списокТема Officeдля учетной записи>файлов> (из любого приложения Office).

Раскрывающийся список темы Office.

OfficeThemes.css включает классы, которые можно использовать в надстройках области задач для PowerPoint, чтобы они использовали те же шрифты и цвета. Это позволит вам создавать свои надстройки области задач, внешний вид которых совпадает с внешним видом встроенных областей задач.

Использование OfficeThemes.css

Использование файла OfficeThemes.css с контентными надстройками для PowerPoint позволяет координировать внешний вид надстройки с темой, применяемой к презентации, с которой она выполняется. Использование файла OfficeThemes.css с надстройками области задач для PowerPoint позволяет координировать внешний вид надстройки со шрифтами и цветами пользовательского интерфейса Office.

Добавьте файл OfficeThemes.css в проект

Выполните следующие действия, чтобы добавить файл OfficeThemes.css в проект надстройки и сослаться на нее.

Примечание.

Действия этой процедуры применимы только к Visual Studio 2015. Если вы используете Visual Studio 2019, файл OfficeThemes.css автоматически создается для всех новых проектов надстроек PowerPoint, которые вы создаете.

В обозревателе решений щелкните правой кнопкой мыши (или выберите и удерживайте) папку Содержимое в веб-проектеproject_name, выберите Добавить, а затем — Таблицу стилей.
Назовите новую таблицу стилей OfficeThemes.

Важно!

Таблица стилей должна называться OfficeThemes, в противном случае не будет работать динамическое обновление шрифтов и цветов надстроек.

Удалите из файла класс body по умолчанию (body {}) и скопируйте в файл представленный ниже CSS-код.

/* 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; }

Если для создания надстройки используется средство, отличное от Visual Studio, скопируйте код CSS из предыдущего шага в текстовый файл. Затем сохраните файл как OfficeThemes.css.

Ссылка на OfficeThemes.css на HTML-страницах надстройки

Чтобы использовать файл OfficeThemes.css в проекте надстройки, добавьте <link> тег, который ссылается на файл OfficeThemes.css внутри <head> тега веб-страниц (например, .html, .aspx или .php файла), который реализует пользовательский интерфейс надстройки в этом формате.

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

Чтобы сделать это в Visual Studio, выполните указанные ниже действия.

Выберите Создание нового проекта.
Используя поле поиска, введите надстройка. Выберите вариант Веб-надстройка PowerPoint и нажмите кнопку Далее.
Присвойте проекту имя и нажмите кнопку Создать.
В диалоговом окне Создание надстройки Office выберите Добавить новые функции в PowerPoint, а затем нажмите кнопку Готово, чтобы создать проект.
Visual Studio создаст решение, и в обозревателе решений появятся два соответствующих проекта. В Visual Studio откроется файл Home.html.
На HTML-страницах, которые реализуют пользовательский интерфейс надстройки, например Home.html в шаблоне по умолчанию, добавьте следующий <link> тег в <head> тег, который ссылается на файл OfficeThemes.css .
```
<link href="../../Content/OfficeThemes.css" rel="stylesheet" type="text/css" />
```

Если вы создаете надстройку с помощью средства, отличного от Visual Studio, добавьте <link> тег в том же формате, указывающий относительный путь к копии OfficeThemes.css , которая будет развернута вместе с надстройкой.

Использование OfficeThemes.css классов темы документа на HTML-странице контентной надстройки

Ниже представлен простой пример HTML-кода в контентной надстройке, которая использует классы OfficeTheme.css для темы документа. Дополнительные сведения о OfficeThemes.css классах, соответствующих 12 цветам и 2 шрифтам, используемым в теме документа, см. в разделе Классы темы для контентных надстроек.

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

Во время выполнения при вставке в презентацию, которая использует тему Office по умолчанию, контентная надстройка отображается следующим образом.

Приложение содержимого, работающее с темой Office.

Если изменить презентацию для использования другой темы или настроить тему презентации, шрифты и цвета, указанные в OfficeThemes.css классах, будут динамически обновляться в соответствии со шрифтами и цветами темы презентации. Если презентация, в которую вставляется надстройка, использует тему Аспект, описанная выше HTML-страница надстройки будет выглядеть так:

Контентное приложение, работающее с темой

Использование OfficeThemes.css классов темы пользовательского интерфейса Office на HTML-странице надстройки области задач

Помимо темы документа, пользователи могут настраивать цветовую схему приложения Office. Для этого используется раскрывающийся список Файл>Учетная запись>Тема Office.

Ниже показан пример простого HTML-кода в надстройка области задач, который использует классы OfficeTheme.css для указания цвета шрифта и фона. Дополнительные сведения о OfficeThemes.css классах, соответствующих шрифтам и цветам темы пользовательского интерфейса Office, см. в разделе Классы темы для надстроек области задач.

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

Если в PowerPoint выбрать в раскрывающемся списке Файл>Учетная запись>Тема Office значение Белая, то надстройка области задач будет выглядеть так:

Область задач с темой Office White.

Если изменить officeTheme на темно-серый, шрифты и цвета, указанные в OfficeThemes.css классах, будут динамически обновляться таким образом.

Область задач с темой Office темно-серого цвета.

Классы OfficeTheme.css

Файл OfficeThemes.css содержит два набора классов, которые можно использовать с контентными надстройками и надстройками области задач для PowerPoint.

Классы тем для контентных надстроек

Файл OfficeThemes.css содержит классы, соответствующие 2 шрифтам и 12 цветам, используемым в теме документа. Эти классы предназначены для использования с контентными надстройками для PowerPoint, чтобы шрифты и цвета вашей надстройки были согласованы с презентацией, в которую она вставлена.

Шрифты тем для контентных надстроек

Класс	Описание
`office-bodyFont-eastAsian`	Восточноазиатское имя шрифта основного текста.
`office-bodyFont-latin`	Латинское название шрифта основного текста. По умолчанию "Calabri"
`office-bodyFont-script`	Имя сценария шрифта основного текста.
`office-bodyFont-localized`	Локализованное имя шрифта основного текста. Задает название шрифта по умолчанию в соответствии с текущей культурой, используемой в Office
`office-headerFont-eastAsian`	Восточноазиатское название шрифта заголовков
`office-headerFont-latin`	Латинское название шрифта заголовков. По умолчанию "Calabri Light"
`office-headerFont-script`	Имя сценариев шрифта заголовков
`office-headerFont-localized`	Локализованное имя шрифта заголовков. Задает название шрифта по умолчанию в соответствии с текущей культурой, используемой в Office

Цвета тем для контентных надстроек

Класс	Описание
`office-docTheme-primary-fontColor`	Основной цвет шрифта. По умолчанию #000000
`office-docTheme-primary-bgColor`	Основной цвет фона шрифта. По умолчанию #FFFFFF
`office-docTheme-secondary-fontColor`	Дополнительный цвет шрифта. По умолчанию #000000
`office-docTheme-secondary-bgColor`	Дополнительный цвет фона шрифта. По умолчанию #FFFFFF
`office-contentAccent1-color`	Контрастный цвет шрифта 1. По умолчанию #5B9BD5
`office-contentAccent2-color`	Контрастный цвет шрифта 2. По умолчанию #ED7D31
`office-contentAccent3-color`	Контрастный цвет шрифта 3. По умолчанию #A5A5A5
`office-contentAccent4-color`	Контрастный цвет шрифта 4. По умолчанию #FFC000
`office-contentAccent5-color`	Контрастный цвет шрифта 5. По умолчанию #4472C4
`office-contentAccent6-color`	Контрастный цвет шрифта 6. По умолчанию #70AD47
`office-contentAccent1-bgColor`	Контрастный цвет фона 1. По умолчанию #5B9BD5
`office-contentAccent2-bgColor`	Контрастный цвет фона 2. По умолчанию #ED7D31
`office-contentAccent3-bgColor`	Контрастный цвет фона 3. По умолчанию #A5A5A5
`office-contentAccent4-bgColor`	Контрастный цвет фона 4. По умолчанию #FFC000
`office-contentAccent5-bgColor`	Контрастный цвет фона 5. По умолчанию #4472C4
`office-contentAccent6-bgColor`	Контрастный цвет фона 6. По умолчанию #70AD47
`office-contentAccent1-borderColor`	Контрастный цвет границы 1. По умолчанию #5B9BD5
`office-contentAccent2-borderColor`	Контрастный цвет границы 2. По умолчанию #ED7D31
`office-contentAccent3-borderColor`	Контрастный цвет границы 3. По умолчанию #A5A5A5
`office-contentAccent4-borderColor`	Контрастный цвет границы 4. По умолчанию #FFC000
`office-contentAccent5-borderColor`	Контрастный цвет границы 5. По умолчанию #4472C4
`office-contentAccent6-borderColor`	Контрастный цвет границы 6. По умолчанию #70AD47
`office-a`	Цвет гиперссылки. По умолчанию #0563C1
`office-a:visited`	Цвет просмотренной гиперссылки. По умолчанию #954F72

На следующем снимке экрана представлены примеры всех классов цветов темы (за исключением двух цветов для гиперссылок), указанных для текста надстройка при использовании темы Office по умолчанию.

Пример цветов темы Office по умолчанию.

Классы тем для надстроек области задач

Файл OfficeThemes.css содержит классы, соответствующие четырем цветам, назначенным шрифтам и фонам, используемым темой пользовательского интерфейса приложения Office. Эти классы подходят для использования с надстройками задач для PowerPoint, чтобы цвета надстройки были согласованы с другими встроенными областями задач в Office.

Цвета шрифта и фона тем для надстроек области задач

Класс	Описание
`office-officeTheme-primary-fontColor`	Основной цвет шрифта. Значение по умолчанию — #B83B1D.
`office-officeTheme-primary-bgColor`	Основной цвет фона. По умолчанию #DEDEDE
`office-officeTheme-secondary-fontColor`	Дополнительный цвет шрифта. По умолчанию #262626
`office-officeTheme-secondary-bgColor`	Дополнительный цвет фона. По умолчанию #FFFFFF

См. также

Создание контентных надстроек и надстроек области задач для PowerPoint

Поделиться через