Opetusohjelma: Mukautetun CSS:n lisääminen sivustolle
Tyyli-työtilan avulla voidaan muokata joitakin sivuston teemaominaisuuksia, kuten fontteja ja värejä. Käyttöön voidaan ottaa myös omia mukautettuja CSS-teemoja.
Voit luoda oman teeman määrittämällä mukautetun CSS-tiedoston ja lataamalla sen sivustoon.
Tässä opetusohjelmassa opit:
- Lataa mukautettu CSS-tiedosto
- Muokkaa CSS-tiedostoa Visual Studio Coden verkkoversiossa
edellytykset
- Power Pages -tilaus tai -kokeiluversio. Hanki Power Pages -kokeiluversio täältä.
- Power Pages-sivusto luotu. Luo Power Pages -sivusto.
- Mukautettu teematiedosto, joka on luotu suosikki-CSS-editorillasi.
Muistiinpano
Luotavan mukautetun teeman on oltava yhteensopiva Bootstrap v3:n kanssa.
Mukautetun CSS:n lisääminen sivustolle
Seuraavasta videosta näet, miten voit käyttää mukautettua CSS-koodia verkkosivustollasi.
Tässä esimerkissä lisätään mukautettuja CSS-tiedostoja, joiden avulla voi lisätä tehosteita verkkosivustomme painikkeisiin. Voit käyttää omaa mukautettua CSS-tiedostoa tai käyttää mukana toimitettua esimerkkiä.
Luo näyte luomalla mukautettu button_shadow.css-teematiedosto ja tallentamalla se suosikki-CSS-editorissa.
.button1 { box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333; }Siirry kohteeseen Power Pages.
Valitse sivusto, johon haluat lisätä mukautetun teeman, ja valitse sitten Muokkaa.
Avaa Tyyli-työtila.
Valitse ensin teema, sitten ... (kolme pistettä) ja lopuksi CSS-hallinta.
Valitse Mukautettu CSS -osassa Lataa palvelimeen ja valitse sitten mukautettu CSS-tiedosto. Vaikka vain yksi CSS-tiedosto voidaan ladata kerralla, useita tiedostoja voidaan ladata. Jos useat CSS-tiedostot päivittävät saman määritteen, luettelon alaosassa olevan CSS-tiedoston määritteitä käytetään. Mukautettujen CSS-tiedostojen järjestystä voi säätää.
Päivitysten tulokset pitäisi nähdä heti sivupohjassa.
Mukautettuja CSS-tiedostoja voi poistaa käytöstä tai niiden paikkaa voi siirtää. Viimeksi mainittu tiedosto ohittaa muut.
Voit muokata CSS-tiedostoa suoraan valitsemalla kolme pistettä (...) ja valitsemalla sitten Muokkaa koodia. Tämä vaihe avaa Verkon visuaalisen koodin -editorin. Tallenna muutokset valitsemalla CTRL-S.
Päivitä CSS-muutokset ja tarkastele muutoksia valitsemalla suunnittelustudiossa Synkronoi.
Valitse Esikatselu, jos haluat tarkastella sivustosi mukautettua teemaa.
Muistiinpano
Poista mukautettu teema kokonaan poistamalla verkkotiedostotietue portaalin hallintasovelluksessa.