Tutorial: afegir un CSS personalitzat al vostre lloc

L'espai de treball d'estils us permet editar algunes de les característiques del tema del vostre lloc, com ara tipus de lletra i colors; tanmateix, podeu aplicar els vostres propis temes de CSS personalitzats.

Podeu crear un tema propi definint un fitxer personalitzat CSS i carregant-lo al vostre lloc.

En aquest tutorial, aprendreu com:

• Carrega un fitxer CSS personalitzat
• Edita CSS al Visual Studio Code per al web

Requisits previs

• Una prova de subscripció o gratuïta de Power Pages. Obtén una versió de prova gratuïta de Power Pages aquí.
• Lloc de Power Pages creat. Crear un lloc de Power Pages.
• Un fitxer de tema personalitzat creat amb el vostre editor de CSS favorit.

Nota

Qualsevol tema personalitzat que creeu ha de ser compatible amb el Bootstrap v3.

Afegir CSS personalitzat al vostre lloc

El vídeo següent us explica com s'aplica el codi CSS personalitzat al lloc.

En aquest exemple, afegirem alguns fitxers personalitzats CSS que ens permetran afegir efectes d'ombra als botons del nostre lloc web. Podeu utilitzar el vostre propi fitxer CSS personalitzat o utilitzar l'exemple proporcionat.

1. Per crear un exemple, al vostre editor de CSS favorit, creeu el fitxer de tema personalitzat button_shadow.css i deseu .

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

2. Aneu al Power Pages.

3. Seleccioneu el lloc on voleu afegir el tema personalitzat i trieu Edita.

4. Obriu l'àrea de treball d'estil.

5. Seleccioneu un tema, els punts suspensius ... i, a continuació, seleccioneu Administra CSS.

   

6. A la secció Personalitza CSS, seleccioneu Carrega i trieu el fitxer CSS personalitzat. Només es pot carregar un fitxer CSS cada vegada, però es poden carregar diversos fitxers. Si hi ha diversos fitxers CSS que actualitzen el mateix atribut, s'aplicaran els atributs del fitxer CSS de la part inferior de la llista. Podeu ajustar l'ordre dels fitxers personalitzats CSS .

7. Hauríeu de veure immediatament els resultats de les actualitzacions al llenç de les pàgines.

   

8. Podeu desactivar o moure l'ordre dels fitxers personalitzats CSS . L'últim fitxer de la llista és el prioritari.

   

9. Podeu editar un fitxer CSS directament seleccionant ... i seleccionant Edita el codi. Aquest pas obrirà l'editor de Visual Code per al web. Seleccioneu Ctrl+S per desar els canvis.

   

10. Seleccioneu Sincronitza al estudi de disseny per actualitzar el CSS i veure els canvis.

11. Trieu Visualització prèvia per veure el tema personalitzat al lloc.

Nota

Per suprimir del tot el tema personalitzat, suprimiu el registre de fitxer web a l'aplicació Administració del portal.