Titorial: Engadir CSS personalizado ao seu sitio

A área de traballo de estilo permítelle editar algunhas das funcións temáticas do seu sitio, como fontes e cores; non obstante, pode aplicar os seus propios temas CSS personalizados.

Pode crear o seu propio tema definindo un ficheiro CSS personalizado e cargándoo no seu sitio.

Neste titorial aprenderá a:

• Cargar un ficheiro CSS personalizado
• Editar CSS en Visual Studio Code para a web

Requisitos previos

• Unha subscrición ou proba de Power Pages. Obter unha proba de Power Pages aquí.
• Un sitio de Power Pages creado. Cree un sitio de Power Pages.
• Un ficheiro de tema personalizado creado co seu editor de CSS favorito.

Nota

Calquera tema personalizado que cree debe ser compatible con Bootstrap v3.

Engadir un CSS personalizado ao sitio

O seguinte vídeo móstralle como aplicar código CSS personalizado ao seu sitio.

Neste exemplo, engadiremos algúns ficheiros CSS personalizados que nos permitirán engadir efectos de sombra aos botóns do noso sitio web. Pode utilizar o seu propio ficheiro CSS personalizado ou utilizar a mostra que se proporciona.

1. Para crear unha mostra, no seu editor de CSS favorito, cree o ficheiro de tema personalizado button_shadow.css e gárdeo.

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

2. Vaia a Power Pages.

3. Seleccione o sitio ao que desexa engadir o tema personalizado e escolla Editar.

4. Abra a área de traballo Estilo.

5. Seleccione un tema e seleccione ... (puntos suspensivos) e, a seguir, seleccione Xestionar CSS.

   

6. Na sección CSS personalizado, seleccione Cargar e escolla o seu ficheiro CSS personalizado. Só pode cargar un ficheiro CSS á vez, pero pódense cargar varios ficheiros. Se varios ficheiros CSS actualizan o mesmo atributo, aplicaranse os atributos do ficheiro CSS á parte inferior da lista. Pode axustar a orde dos seus ficheiros CSS personalizados.

7. Debe ver inmediatamente os resultados das actualizacións no lenzo das páxinas.

   

8. Pode desactivar ou mover a orde dos seus ficheiros CSS personalizados. O ficheiro que aparece en último lugar terá prioridade sobre os demais.

   

9. Pode editar un ficheiro CSS directamente seleccionando os puntos suspensivos (...) e despois seleccionando Editar código. Este paso abrirá o editor Visual Code para a web. Seleccione CTRL-S para gardar os seus cambios.

   

10. Seleccione Sincronizar no estudio de deseño para actualizar o CSS e ver os cambios.

11. Seleccione Previsualizar para ver o tema personalizada no seu sitio.

Nota

Para eliminar completamente o tema personalizado, elimine o rexistro do ficheiro web na aplicación Xestión de portais.