Прочитать на английском

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


Учебник: добавление пользовательского CSS на сайт

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

Вы можете создать собственную тему, определив пользовательский файл CSS и загрузив его на сайт.

Из этого руководства вы узнаете, как выполнять следующие задачи:

  • Загружать собственный файл CSS
  • Изменить CSS в Visual Studio Code для Интернет

Предварительные условия

Примечание

Любая создаваемая пользовательская тема должна быть совместима с Bootstrap v3.

Добавление пользовательского CSS на сайт

В следующем видео показано, как применить пользовательский код CSS на сайте.

В этом примере мы добавим несколько пользовательских CSS-файлов, которые позволяет нам добавлять эффекты тени к кнопкам на веб-сайте. Вы можете использовать свой собственный CSS-файл или предоставленный образец.

  1. Чтобы создать образец, в своем предпочитаемом CSS-редакторе создайте файл пользовательской темы button_shadow.css и сохраните его.

    css
    .button1 {
    box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333;
     }
    
  2. Переход к Power Pages.

  3. Выберите сайт, на который вы хотите добавить пользовательскую тему, и выберите Изменить.

  4. Откройте рабочую область Стили.

  5. Выберите тему, выберите ... (многоточие) и выберите Управление CSS.

    Откройте панель управления CSS из рабочей области стилей.

  6. В разделе Пользовательский CSS выберите Отправить и выберите свой пользовательский файл CSS. Вы можете отправить только один файл CSS за раз, но можно отправить несколько файлов. Если несколько файлов CSS обновляют один и тот же атрибут, будет применяться атрибуты в файле CSS внизу списка. Вы можете настроить порядок ваших пользовательских файлов CSS.

  7. Вы должны сразу же увидеть результаты обновлений на холсте страницы.

    Эффект тени от кнопки из отправленного файла CSS.

  8. Вы можете отключить свои пользовательские файлы CSS или изменить их порядок. Файл в конце списка имеет приоритет над остальными.

    Отключение файла CSS или изменение порядка файлов.

  9. Вы можете редактировать CSS-файл напрямую, выбрав многоточие (...) и выбрав Изменить код. При этом откроется редактор Visual Studio Code for the Web. Выберите CTRL-S, чтобы сохранить изменения.

    Редактирование файла CSS в Visual Studio Code for the Web.

  10. Выберите Синхронизация в студии дизайна, чтобы обновить CSS и просмотреть изменения.

  11. Выберите Предварительный просмотр для просмотра пользовательской темы на сайте.

Примечание

Чтобы полностью удалить пользовательскую тему, удалите запись веб-файла в приложении «Управление порталом».