Korisnički priručnik: dodavanje prilagođenog CSS web-mjestu

Radni prostor Stil omogućuje uređivanje nekih značajki teme web- mjesta, kao što su fontovi i boje; međutim, možete primijeniti vlastite prilagođene teme CSS.

Možete stvoriti vlastitu temu definiranjem prilagođene datoteke CSS i njezinim prijenosom na web-mjesto.

U ovom ćete vodiču saznati kako:

• Prijenos prilagođene datoteke CSS
• Uređivanje CSS u Visual Studio Code za Web

Preduvjeti

• Pretplata ili probna verzija Power Pages. Dohvati probnu verziju Power Pages ovdje.
• Web-mjesto sustava Power Pages je stvoreno. Stvorite web-mjesto Power Pages.
• Prilagođena datoteka teme stvorena pomoću omiljenog uređivača CSS.

Napomena

Svaka prilagođena tema koju stvorite mora biti kompatibilna s Bootstrap v3.

Dodaj prilagođeni CSS na web-mjesto

Sljedeći videozapis pokazuje kako primijeniti prilagođeni kod CSS na svoje web-mjesto.

U ovom ćemo primjeru dodati neke prilagođene datoteke CSS koje će nam omogućiti dodavanje efekata sjene gumbima na web-mjestu. Možete koristiti vlastitu prilagođenu datoteku CSS ili koristiti ponuđeni uzorak.

1. Za stvaranje uzorka u omiljenom uređivaču CSS stvorite datoteku prilagođene teme button_shadow.css i spremite.

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

2. Idite na Power Pages.

3. Odaberite web-mjesto na koje želite dodati prilagođenu temu i odaberite Uredi.

4. Otvorite radni prostor Stil.

5. Odaberite temu i odaberite ... (trotočje), a zatim odaberite Upravljaj CSS.

   

6. U odjeljku Prilagođeni CSS odaberite Prenesi i odaberite prilagođenu datoteku CSS. Odjednom možete prenijeti samo jednu datoteku CSS, ali se može prenijeti više datoteka. Ako više datoteka CSS ažurira isti atribut, primijenit će se atributi u datoteci CSS sa dna popisa. Možete prilagoditi redoslijed prilagođenih datoteka CSS.

7. Trebali biste odmah vidjeti rezultate ažuriranja na radnom području stranica.

   

8. Možete omogućiti ili prilagoditi redoslijed prilagođenih datoteka CSS. Posljednja navedena datoteka imat će prednost nad ostalima.

   

9. Datoteku CSS možete urediti izravno odabirom trotočja (...), a zatim odabirom Uredi kod. Ovaj korak otvorit će uređivač Visual Code za Web. Odaberite CTRL-S za spremanje promjena.

   

10. Odaberite Sinkroniziraj u studiju za dizajn kako biste ažurirali CSS i pregledali promjene.

11. Odaberite Pretpregled kako biste pregledali prilagođenu temu na web-mjestu.

Napomena

Za potpuno uklanjanje prilagođene teme izbrišite zapis web-datoteke u aplikaciji za upravljanje portalom.