Apmācība: pielāgota CSS pievienošana vietnei

Izmantojot stilu veidošanas darbvietu, varat rediģēt dažus vietnes dizaina līdzekļus, piemēram, fontus un krāsas, tomēr varat lietot savus pielāgotos CSS dizainus.

Varat izveidot savu dizainu, definējot pielāgotu CSS failu un augšupielādējot to savā vietnē.

Šajā apmācībā uzzināsiet, kā:

• Augšupielādēt pielāgotu CSS failu
• CSS rediģēšana Visual Studio Code tīmeklim

Priekšnoteikumi

• Power Pages abonements vai izmēģinājumversija. Iegūt Power Pages izmēģinājumversiju šeit.
• Power Pages vietne ir izveidota. Power Pages vietnes izveide.
• Pielāgots dizaina fails, kas izveidots, izmantojot jūsu iecienīto CSS redaktoru.

Piezīmes

Visiem izveidotajiem pielāgotajiem dizainiem ir jābūt saderīgiem ar Bootstrap v3.

Pielāgota CSS pievienošana vietnei

Tālāk sniegtajā videoklipā ir parādīts, kā vietnei lietot pielāgotu CSS kodu.

Šajā piemērā mēs pievienosim dažus pielāgotus CSS failus, kas ļauj mums pievienot ēnu efektus mūsu vietnes pogām. Varat izmantot savu pielāgoto CSS failu vai izmantot sniegto paraugu.

1. Lai izveidotu paraugu, savā iecienītajā CSS redaktorā izveidojiet button_shadow.css pielāgoto dizaina failu un saglabājiet.

   .button1 {
   box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333;
    }
   

2. Dodieties uz Power Pages.

3. Atlasiet vietni, kurai vēlaties pievienot pielāgoto dizainu, un izvēlieties Rediģēt.

4. Atveriet darbvietu Stila izveide.

5. Atlasiet dizainu, atlasiet ... (daudzpunktes) un pēc tam atlasiet Pārvaldīt CSS.

   

6. Sadaļā Pielāgots CSS atlasiet Augšupielādēt un izvēlieties savu pielāgoto CSS failu. Vienā reizē var augšupielādēt tikai vienu CSS failu, bet var augšupielādēt vairākus failus. Ja vairāki CSS faili atjaunina vienu atribūtu, tiks lietoti atribūti CSS failā saraksta apakšdaļā. Varat pielāgot pielāgoto CSS failu secību.

7. Atjauninājumu rezultāti ir nekavējoties jāredz lapas audeklā.

   

8. Varat atspējot vai mainīt pielāgoto CSS failu secību. Pēdējais sarakstā iekļautais fails tiek lietots pirms pārējiem.

   

9. CSS failu var rediģēt tieši, atlasot daudzpunktes (...) un pēc tam atlasot vienumu Rediģēt kodu. Ar šo darbību tiks atvērts Vizuālais kods tīmeklim redaktors. Lai saglabātu izmaiņas, atlasiet CTRL-S.

   

10. Atlasiet sinhronizēt noformējuma studijā, lai atjauninātu CSS un skatītu izmaiņas.

11. Atlasiet Priekšskatījums, lai vietnē skatītu pielāgoto dizainu.

Piezīmes

Lai pilnībā noņemtu pielāgoto dizainu, izdzēsiet tīmekļa faila ierakstu portāla pārvaldības programmā.