Trabalhar com ficheiros de substituição CSS

Artigo
12/11/2024

Isto artigo descreve porquê, quando e como utilizar as Folhas de Estilos em Cascata (CSS) para substituir ficheiros Microsoft Dynamics 365 Commerce.

Os estilos de site permanentes geralmente devem ser tratados através do tema de um site. Os temas fornecem as configurações básicas CSS e de estilo para os módulos em qualquer página do seu site. Os temas são criados usando o Dynamics 365 Commerce SDK (Software Development Kit) online e são implantados em seus sites por meio do Microsoft Dynamics Lifecycle Services (LCS). Os recursos de depuração de temas e as configurações de interface de módulo no SDK ajudam os desenvolvedores de sites a criar pacotes de design de site personalizáveis e coesos. Quando esses pacotes de design são implantados em um site, os autores do site podem se concentrar na criação, edição e publicação de conteúdo em vez do desenvolvimento do site.

Dado o ciclo de vida normal de um tema, a dependência dos desenvolvedores para fazer alterações de estilo por meio do SDK e do LCS pipeline de implementação pode ser proibitiva em alguns cenários. Os protótipos ou hotfixes do site podem parecer complicados se o SDK não estiver configurado ou se você não tiver tempo para esperar por uma implantação do LCS.

Nesses cenários, CSS substituir ficheiros pode ajudar. Nas ferramentas de criação do Commerce, os utilizadores autenticados podem carregar um CSS ficheiro, pré-visualização-lo e, em seguida, ativá-lo para substituir o tema de um site. A sobrecarga da implantação do SDK ou LCS não é necessária. As substituições especificadas em um CSS ficheiro de substituição podem ser tão pequenas quanto uma alteração em um único estilo de texto ou tão abrangentes quanto uma revisão completa da marca.

Antes de usar CSS ficheiros de substituição, esteja ciente das seguintes limitações:

Apenas um CSS ficheiro de substituição pode estar ativo em um site de cada vez. Portanto, todas as substituições ativas devem estar presentes em um único ficheiro de substituição.
Embora você possa pré-visualização as substituições nas ferramentas de criação do Commerce, não há recursos de depuração dedicados para ajudar a identificar quaisquer bugs que as substituições introduzam. Em outras palavras, quando você usa CSS ficheiros de substituição, não tem o mesmo conjunto de ferramentas que o SDK fornece para validação de módulo e criação.

No entanto, CSS os ficheiros de substituição fornecem uma maneira rápida de prototipar um design ou implementar um hotfix antes que uma atualização completa do tema seja desenvolvida e implantada.

Criar um CSS ficheiro de substituição

Para criar um CSS ficheiro de substituição, você pode usar qualquer ambiente de desenvolvimento integrado (IDE), editor de texto ou editor de código-fonte. Uma abordagem típica é usar depuradores da Web padrão em seu navegador para identificar seletores de estilo, propriedades e valores em seu site existente. A maioria dos navegadores permite alterar valores e pré-visualização-los no depurador. Depois de identificar as alterações que deseja fazer, você pode salvá-las em seu próprio CSS ficheiro.

Carregar um CSS ficheiro de substituição

Para carregar um CSS ficheiro para o seu site no Commerce, siga estes passos.

Nas ferramentas de criação, vá para o seu site.
No painel de navegação à esquerda, selecione Design.

Nota

Dependendo da versão das ferramentas de criação do Commerce que estiver a utilizar, poderá ter de expandir Definições no painel de navegação antes de poder selecionar Estrutura.
Na parte superior do painel de design principal, selecione a CSS guia Substituir , se ainda não estiver selecionada.
Em Substituições CSS disponíveis, selecione Carregar CSS ficheiro. É apresentada uma janela do Explorador de Ficheiros.
No Explorador de Ficheiros, procure e selecione um CSS ficheiro e, em seguida, selecione Abrir. O ficheiro carregado CSS aparece agora em Substituições CSS disponíveis.

pré-visualização um CSS ficheiro de substituição

Para pré-visualização um CSS ficheiro de substituição antes de ativá-lo em seu site ativo, siga estas etapas.

No painel de navegação à esquerda, selecione Estrutura e, em seguida, no CSS separador Substituir , em Substituições CSS disponíveis, localize o CSS ficheiro que pretende pré-visualização.
Ao lado do nome do CSS ficheiro, selecione pré-visualização site.
Na caixa de diálogo Selecionar um URL , selecione o URL do site ao qual pretende ver a substituição aplicada e, em seguida, selecione OK.
Se houver várias variantes para o URL selecionado, selecione a variante desejada na caixa de diálogo pré-visualização variações exibida.

Uma nova guia ou janela do navegador é aberta, onde você pode validar suas substituições de estilo em relação ao seu site. Em seguida, pode partilhar o URL com outros utilizadores autenticados do Commerce para revisão e comentários.

Ativar um CSS ficheiro de substituição em seu site ativo

Depois de visualizar e aprovar o CSS ficheiro de substituição, você pode ativá-lo em seu site ativo.

Nota

Apenas um CSS ficheiro de substituição pode estar ativo no seu site de cada vez. Se você ativar um novo ficheiro de substituição, o ficheiro de substituição anterior será inativado. Portanto, certifique-se de que todas as substituições necessárias estejam presentes em um único CSS ficheiro de substituição.

Para ativar um CSS ficheiro de substituição, siga estes passos.

No painel de navegação à esquerda, selecione Estrutura e, em seguida, no CSS separador Substituir , em Substituições CSS disponíveis, localize o CSS ficheiro que pretende ativar.
Sob o nome do CSS ficheiro, selecione Ativar. O ficheiro de substituição fica imediatamente ativo em seu site ativo.

Desativar um CSS ficheiro de substituição em seu site ativo

Para desativar um CSS ficheiro de substituição no seu site, siga estas etapas.

No painel de navegação à esquerda, selecione Design e, em seguida, no CSS separador Substituir , em Substituições CSS disponíveis, localize o CSS ficheiro que pretende desativar.
Sob o nome do CSS ficheiro, selecione Desativar. O ficheiro de substituição fica imediatamente inativo em seu site ativo.

Sugestão

Para aceder a opções adicionais para CSS substituir ficheiros, selecione as reticências (...) junto ao nome do CSS ficheiro. As opções Baixar, Renomear e Substituir são úteis para alterações rápidas em um ficheiro de substituição existente CSS .