Учебник: добавление пользовательского CSS на сайт
Рабочая область настройки стиля позволяет редактировать некоторые компоненты темы вашего сайта, такие как шрифты и цвета, однако вы можете применять свои собственные темы CSS.
Вы можете создать собственную тему, определив пользовательский файл CSS и загрузив его на сайт.
Из этого руководства вы узнаете, как выполнять следующие задачи:
- Загружать собственный файл CSS
- Изменить CSS в Visual Studio Code для Интернет
Предварительные условия
- Подписка или пробная версия Power Pages. Получите пробную версию Power Pages здесь.
- Создание сайта Power Pages. Создайте сайт Power Pages.
- Файл пользовательской темы, созданный с использованием предпочитаемого вами CSS-редактора.
Заметка
Любая создаваемая пользовательская тема должна быть совместима с Bootstrap v3.
Добавление пользовательского CSS на сайт
В следующем видео показано, как применить пользовательский код CSS на сайте.
В этом примере мы добавим несколько пользовательских CSS-файлов, которые позволяет нам добавлять эффекты тени к кнопкам на веб-сайте. Вы можете использовать свой собственный CSS-файл или предоставленный образец.
Чтобы создать образец, в своем предпочитаемом CSS-редакторе создайте файл пользовательской темы button_shadow.css и сохраните его.
.button1 { box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333; }Переход к Power Pages.
Выберите сайт, на который вы хотите добавить пользовательскую тему, и выберите Изменить.
Откройте рабочую область Стили.
Выберите тему, выберите ... (многоточие) и выберите Управление CSS.
В разделе Пользовательский CSS выберите Отправить и выберите свой пользовательский файл CSS. Вы можете отправить только один файл CSS за раз, но можно отправить несколько файлов. Если несколько файлов CSS обновляют один и тот же атрибут, будет применяться атрибуты в файле CSS внизу списка. Вы можете настроить порядок ваших пользовательских файлов CSS.
Вы должны сразу же увидеть результаты обновлений на холсте страницы.
Вы можете отключить свои пользовательские файлы CSS или изменить их порядок. Файл в конце списка имеет приоритет над остальными.
Вы можете редактировать CSS-файл напрямую, выбрав многоточие (...) и выбрав Изменить код. При этом откроется редактор Visual Studio Code for the Web. Выберите CTRL-S, чтобы сохранить изменения.
Выберите Синхронизация в студии дизайна, чтобы обновить CSS и просмотреть изменения.
Выберите Предварительный просмотр для просмотра пользовательской темы на сайте.
Заметка
Чтобы полностью удалить пользовательскую тему, удалите запись веб-файла в приложении «Управление порталом».