Trabalhar com ficheiros de substituição CSS

Artigo
05/30/2024

Isto artigo descreve porquê, quando e como utilizar ficheiros de substituição das Folhas de Estilo em Cascata (CSS) Microsoft Dynamics 365 Commerce.

Os estilos permanentes do sítio devem normalmente ser tratados através do tema do sítio. Os temas fornecem as definições básicas de CSS e de estilo para os módulos em qualquer página do seu sítio. Os temas são criados utilizando o kit de desenvolvimento de software (SDK) online Dynamics 365 Commerce e são implementados nos seus sítios Web através do Microsoft Dynamics Lifecycle Services (LCS). As capacidades de depuração de temas e as configurações da interface do módulo no SDK ajudam os programadores de sítios a criar pacotes de design de sítios personalizáveis e coesos. Quando estes pacotes de design são implementados num site, os autores do site podem concentrar-se na criação, edição e publicação de conteúdos em vez de no desenvolvimento do site.

Dado o ciclo de vida habitual de um tema, a dependência dos programadores para efetuar alterações de estilo através do SDK e do pipeline de implementação LCS pode ser proibitiva em alguns cenários. Os protótipos de sites ou hotfixes podem parecer complicados se o SDK não estiver configurado ou se não tiver tempo para esperar por uma implementação LCS.

Nestes cenários, os ficheiros de substituição CSS podem ajudar. Nas ferramentas de criação do Commerce, os utilizadores autenticados podem carregar um ficheiro CSS , pré-visualizá-lo e depois activá-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 num ficheiro de substituição CSS podem ser tão pequenas como uma alteração a um único estilo de texto ou tão abrangentes como uma revisão completa da marca.

Antes de utilizar os ficheiros de substituição CSS , tenha em atenção as seguintes limitações:

Apenas um ficheiro de substituição CSS pode estar ativo num sítio de cada vez. Por conseguinte, todas as substituições activas devem estar presentes num único ficheiro de substituições.
Embora seja possível pré-visualizar as substituições nas ferramentas de criação do Commerce, não existem funcionalidades de depuração dedicadas para ajudar a identificar quaisquer erros que as substituições introduzam. Por outras palavras, quando utiliza ficheiros de substituição CSS , não dispõe do mesmo conjunto de ferramentas que o SDK fornece para a validação de módulos e de autoria.

No entanto, os ficheiros de substituição CSS proporcionam uma forma rápida de criar um protótipo de um design ou implementar uma correção antes de ser desenvolvida e implementada uma atualização completa do tema.

Criar um ficheiro de substituição CSS

Para criar um ficheiro de substituição CSS , pode utilizar qualquer ambiente de desenvolvimento integrado (IDE), editor de texto ou editor de código-fonte. Uma abordagem típica é a utilização de depuradores Web padrão no seu browser para identificar selectores de estilo, propriedades e valores no seu site existente. A maioria dos browsers permite-lhe alterar os valores e visualizá-los no depurador. Depois de ter identificado as alterações que pretende fazer, pode guardá-las no seu próprio ficheiro CSS .

Carregar um ficheiro de substituição CSS

Para carregar um ficheiro CSS para o seu sítio no Commerce, siga estes passos.

Nas ferramentas de criação, aceda ao seu sítio.
No painel de navegação à esquerda, seleccione Design.

Nota

Dependendo da versão das ferramentas de autoria do Commerce que está a utilizar, poderá ter de expandir Settings no painel de navegação antes de poder selecionar Design.
Na parte superior do painel de design principal, seleccione o separador CSS override , se ainda não estiver selecionado.
Em Available CSS overrides, selecionar Upload CSS file. Aparece uma janela do Explorador de ficheiros.
No Explorador de Ficheiros, procure e seleccione um ficheiro CSS e, em seguida, seleccione Abrir. O ficheiro carregado CSS aparece agora em Disponível CSS substitui.

Pré-visualizar um ficheiro de substituição CSS

Para pré-visualizar um ficheiro de substituição CSS antes de o tornar ativo no seu site ativo, siga estes passos.

No painel de navegação à esquerda, seleccione Design e, em seguida, no separador CSS override , em Available CSS overrides, localize o ficheiro CSS que pretende pré-visualizar.
Ao lado do nome do ficheiro CSS , seleccione Preview site.
Na caixa de diálogo Select a URL , seleccione o URL do site ao qual pretende que a substituição seja aplicada e, em seguida, seleccione OK.
Se existirem várias variantes para o URL selecionado, seleccione a variante pretendida na caixa de diálogo Preview variations que aparece.

É aberto um novo separador ou janela do browser, onde pode validar as suas substituições de estilo em relação ao seu site. Pode então partilhar o URL com outros utilizadores autenticados do Commerce para revisão e feedback.

Ativar um ficheiro de substituição CSS no seu sítio ativo

Depois de ter pré-visualizado e aprovado o ficheiro de substituição CSS , pode activá-lo no seu site ativo.

Nota

Apenas um ficheiro de substituição CSS pode estar ativo no seu sítio de cada vez. Se ativar um novo ficheiro de substituição, o ficheiro de substituição anterior é desativado. Por conseguinte, certifique-se de que todas as substituições necessárias estão presentes num único ficheiro de substituição CSS .

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

No painel de navegação à esquerda, seleccione Design e, em seguida, no separador CSS override , em Available CSS overrides, localize o ficheiro CSS que pretende ativar.
No nome do ficheiro CSS , selecionar Ativar. O ficheiro de substituição fica imediatamente ativo no seu sítio ativo.

Desativar um ficheiro de substituição CSS no seu sítio ativo

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

No painel de navegação à esquerda, seleccione Design e, em seguida, no separador CSS override , em Available CSS overrides, localize o ficheiro CSS que pretende desativar.
No nome do ficheiro CSS , seleccione Desativar. O ficheiro de substituição fica imediatamente inativo no seu sítio ativo.

Sugestão

Para aceder a opções adicionais para ficheiros de substituição CSS , seleccione as reticências (...) junto ao nome do ficheiro CSS . As opções Download, Rename e Replace são úteis para alterações rápidas a um ficheiro de substituição CSS existente.