Tutorial: Adicione CSS personalizado ao seu site

  • Artigo

O espaço de trabalho Aplicação de Estilo permite que você edite alguns dos recursos de tema do seu site, como fontes e cores; no entanto, você pode aplicar seus próprios temas personalizados do CSS.

Para criar seu próprio tema, defina um arquivo CSS personalizado e carregue-o no seu site.

Neste tutorial, você aprenderá a:

  • Carregar um arquivo CSS personalizado
  • Editar CSS no Visual Studio Code para a Web

Pré-requisitos

Nota

Qualquer tema personalizado que você criar deve ser compatível com o Bootstrap v3.

Adicionar CSS personalizado ao seu site

O vídeo a seguir mostra como aplicar o código personalizado CSS ao seu site.

Neste exemplo, vamos adicionar alguns arquivos CSS que nos permitirão adicionar efeitos de sombra aos botões em nosso site. Você pode usar seu próprio arquivo CSS personalizado ou usar o exemplo fornecido.

  1. Para criar um exemplo, em seu editor CSS favorito, crie o arquivo de tema personalizado button_shadow.css e salve-o.

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

  2. Vá para Power Pages.

  3. Selecione o site ao qual você deseja adicionar o tema personalizado e escolha Editar.

  4. Abra o espaço de trabalho Aplicação de Estilo.

  5. Selecione um tema e selecione as ... (reticências); em seguida, selecione Gerenciar CSS.

    Abra o painel de gerenciamento de CSS no espaço trabalho Aplicação de Estilo.

  6. Na seção CSS Personalizado, selecione Carregar e escolha seu arquivo CSS personalizado. Você só pode enviar um arquivo CSS por vez, mas vários arquivos podem ser carregados. Se vários arquivos CSS atualizam o mesmo atributo, os atributos no arquivo CSS na parte inferior da lista serão aplicados. Você pode ajustar a ordem do seus arquivos CSS personalizados.

  7. Você deve ver imediatamente os resultados das atualizações na tela das páginas.

    Efeito de sombra do botão do arquivo CSS carregado.

  8. Você pode desabilitar ou mover a ordem dos seus arquivos CSS personalizados. O arquivo listado por último terá precedência sobre os outros.

    Desabilite ou mova a ordem do arquivo CSS.

  9. Você pode editar diretamente um arquivo CSS selecionando as reticências (...) e, em seguida, selecionando Editar código. Essa etapa abrirá o editor do Visual Code para a Web. Selecione CTRL-S para salvar as alterações.

    Editar o arquivo CSS no Visual Studio Code para a Web.

  10. Selecione Sincronizar no estúdio de design para atualizar o CSS e exibir as alterações.

  11. Selecione Visualizar para exibir o tema personalizado em seu site.

Nota

Para remover totalmente o tema personalizado, exclua o registro de arquivo da Web no aplicativo Gerenciamento do Portal.