Урок: Добавяне на персонализирани 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 за уеб. Изберете CTRL-S, за да запазите промените си.
Изберете Синхронизиране в студиото за дизайн, за да актуализирате CSS и да видите промените.
Изберете Преглед, за да видите персонализираната тема в сайта си.
Бележка
За да премахнете напълно персонализираната тема, изтрийте записа на уеб файла в приложението за управление на портали.