Deli z drugimi prek

Vadnica: Dodajanje datotek CSS po meri v vaše spletno mesto

  • Članek

Delovni prostor za oblikovanje omogoča urejanje nekaterih funkcij teme vašega spletnega mesta, kot so pisave in barve; lahko pa uporabite svoje lastne teme CSS po meri.

Svojo temo lahko ustvarite tako, da definirate datoteko CSS po meri in jo naložite v svoje spletno mesto.

V tej vadnici se boste naučili naslednje:

  • Naložite datoteko CSS po meri
  • Uredite datoteko CSS v orodju Visual Studio Code za splet

Zahteve

opomba,

Vsaka tema po meri, ki jo ustvarite, mora biti združljiva z Bootstrap v3.

Dodajanje sloga CSS po meri na spletno mesto

Naslednji videoposnetek prikazuje, kako na svojem spletnem mestu uporabite kodo CSS po meri.

V tem primeru bomo dodali nekaj datotek CSS po meri, ki nam bodo omogočile dodajanje učinkov senc gumbom na našem spletnem mestu. Uporabite lahko lastno datoteko CSS po meri ali priloženi vzorec.

  1. Če želite ustvariti vzorec, v svojem priljubljenem urejevalniku CSS ustvarite datoteko s temo po meri button_shadow.css in jo shranite.

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

  2. Obiščite spletno mesto Power Pages.

  3. Izberite spletno mesto, ki mu želite dodati temo po meri, in izberite Uredi.

  4. Odprite delovni prostor za oblikovanje.

  5. Izberite temo in nato ... (tri pike), nato pa izberite Upravljaj CSS.

    Odprite ploščo za upravljanje CSS v delovnem prostoru za oblikovanje.

  6. V razdelku Po meri CSS izberite Naloži in izberite svojo datoteko CSS po meri. Naložite lahko samo eno datoteko CSS naenkrat, vendar je mogoče naložiti več datotek. Če več datotek CSS posodobi isti atribut, bodo uporabljeni atributi v datoteki CSS na dnu seznama. Prilagodite lahko vrstni red svojih datotek CSS po meri.

  7. Takoj bi morali videti rezultate posodobitev na delovnem območju strani.

    Učinek sence gumba iz naložene datoteke CSS.

  8. Vrstni red svojih datotek CSS po meri lahko omogočite ali premaknete. Zadnja navedena datoteka bo imela prednost pred ostalimi.

    Onemogočite ali premaknite vrstni red datoteke CSS.

  9. Datoteko CSS lahko uredite neposredno tako, da izberete trip pike (...) in nato izberete Uredi kodo. Ta korak bo odprl urejevalnik Visual Code za splet. Če želite shraniti spremembe, izberite CTRL-S.

    Uredite datoteko CSS v orodju Visual Studio Code za splet.

  10. V oblikovalskem studiu izberite Sinhroniziranje, da CSS posodobite in si ogledate spremembe.

  11. Izberite Predogled za ogled teme po meri na vašem spletnem mestu.

opomba,

Če želite popolnoma odstraniti temo po meri, izbrišite zapis spletne datoteke v aplikaciji za upravljanje portala.