CSS personalizado

Guia prático Todos os planos 2 min de leitura

Use Stylesheet / CSS (folha de estilos / CSS) quando as definições, os tipos de letra e as cores não chegam para o que precisa: um efeito especial ao passar o rato, o tamanho de letra de um item ou uma pequena correção do tema. O CSS é guardado com o menu e acrescentado à sua loja online quando publica.

Nota

O CSS personalizado exige conhecimentos básicos de CSS. Se preferir não escrever código, contacte-nos: ajudamos gratuitamente com pequenas alterações de estilo.

Acrescentar CSS personalizado

1. Abra o separador Advanced

   No editor de menu, clique no ícone Advanced (avançado) (</>) na barra lateral esquerda (1).

   

   Abra o separador Advanced (1) e escreva o seu CSS em Stylesheet / CSS (2).

2. Acrescente o seu CSS

   Escreva ou cole o seu CSS em Stylesheet / CSS (2), substituindo o texto de exemplo //enter css custom here.

3. Guarde e publique

   Clique em Save e, depois, em Publish. Faça uma atualização forçada da sua loja online para ver o resultado.

Selecionar os elementos certos

O CSS é acrescentado à página tal como está e não se limita a este menu, por isso restrinja os seus seletores:

• Todos os menus: comece por .gm-menu.
• Um menu: comece por .gm-menu-<ID>. Para encontrar o ID, clique com o botão direito do rato no menu na sua loja online e escolha Inspecionar.
• Um item: atribua-lhe um Extra classname (classe adicional) na secção Advanced das definições do item (consulte Editar um item de menu) e use essa classe.

Por exemplo, para pôr a negrito e a vermelho um item com a classe adicional sale-item:

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

O separador Advanced tem também Market availability (disponibilidade por mercado), que limita o menu aos mercados selecionados. Consulte Mostrar menus por mercado.

Resolução de problemas

O meu CSS não tem efeito

• Confirme que clicou em Publish depois de guardar.
• Os estilos da própria aplicação usam muitas vezes !important, por isso a sua regra também pode precisar dele.
• Procure erros de escrita, como uma } em falta: um único erro pode impedir que as regras seguintes funcionem.

Páginas relacionadas

• Ajustar as cores do menuDefina as cores da barra de menu, dos submenus, dos separadores, das etiquetas de produto e do botão de adicionar ao carrinho.
• Ajustar os tipos de letra do menuEscolha a família, a espessura e o tamanho do tipo de letra para cada parte do menu.
• Editar um item de menuAltere o título, a ligação, o ícone, as cores, a etiqueta, o submenu e a visibilidade de um item, ou duplique-o, mova-o e elimine-o.

Esta página foi útil?

Comunicar um problema