> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Como definir CSS personalizado para a barra de anúncios > ℹ️ **Note:** Este artigo foi traduzido automaticamente utilizando IA e pode conter imprecisões. Se algo parecer errado, entre em contato com nossa equipe de suporte. Quer controlo total sobre a aparência da sua barra de anúncios? 🎨 Embora as definições de design integradas cubram a maioria das necessidades de personalização, a funcionalidade **Custom CSS** (CSS personalizado) permite ajustar o estilo para além das opções padrão. Isto é útil para comerciantes que pretendem corresponder exatamente às diretrizes da marca, ajustar espaçamentos, personalizar a tipografia ou resolver conflitos de estilo específicos do tema. --- # **⚠️ Antes de começar** Antes de utilizar o **Custom CSS**: * Certifique-se de que a sua barra de anúncios já foi criada. * Tenha conhecimentos básicos de CSS ou acesso a um desenvolvedor. * Compreenda que o **Custom CSS** pode substituir as definições de design padrão. ℹ️ A maioria dos comerciantes nunca precisa de **Custom CSS**. Utilize-o apenas quando as opções de design integradas não conseguirem obter o aspeto pretendido. --- # **🛠️ Passo 1 — Abra o separador Design** Abra a app **Hoppy Announcement Bar** e navegue até à barra de anúncios que pretende personalizar. Depois: ➡️ Clique no separador **Design**. Percorra a página até encontrar a secção **Custom CSS**. --- # **🎨 Passo 2 — Ative o Custom CSS** Dentro da secção **Custom CSS**: ➡️ Clique em **Apply** (Aplicar). Assim que ativado, aparecerá um editor CSS com uma estrutura CSS pré-configurada. Esta estrutura inclui todos os seletores suportados, facilitando a personalização dos diferentes elementos da barra de anúncios sem ter de identificar manualmente os nomes das classes. --- # **✍️ Passo 3 — Adicione o seu CSS personalizado** O editor fornece seletores prontos para os principais elementos da barra de anúncios. ### **Seletores disponíveis** | Seletor | Descrição | | ----- | ----- | | `.futureblink-announcement-bar` | Container completo da barra de anúncios | | `.futureblink-announcement-bar .title` | Texto do título principal | | `.futureblink-announcement-bar .subheading` | Texto do subtítulo | | `.futureblink-announcement-bar .cta-button` | Botão de chamada à ação | | `.futureblink-announcement-bar .close-btn` | Ícone de fecho | | `.futureblink-announcement-bar .arrow` | Setas de navegação | | `.futureblink-announcement-bar .button-prev` | Botão do slide anterior | | `.futureblink-announcement-bar .button-next` | Botão do slide seguinte | ### **Seletores específicos para dispositivos móveis** Para direcionar especificamente dispositivos móveis, utilize a variante `.mobile`. Exemplos: * `.futureblink-announcement-bar.mobile .title` * `.futureblink-announcement-bar.mobile .cta-button` * `.futureblink-announcement-bar.mobile .close-btn` --- ### **Exemplo de CSS** Para colocar o título em maiúsculas com espaçamento adicional: `.futureblink-announcement-bar .title {` `text-transform: uppercase;` `letter-spacing: 2px;` `}` Para que o botão de chamada à ação ocupe toda a largura em dispositivos móveis: `.futureblink-announcement-bar.mobile .cta-button {` `width: 100%;` `}` 💡 Pode utilizar quaisquer propriedades CSS válidas dentro dos seletores fornecidos. --- # **👀 Passo 4 — Pré-visualize as alterações** Depois de introduzir o CSS: ➡️ Clique em **Apply**. A pré-visualização em tempo real é atualizada automaticamente, para que possa rever imediatamente as alterações. Se forem necessários ajustes: ➡️ Edite o CSS diretamente no editor. ➡️ Revise a pré-visualização atualizada. --- # **⚙️ Como funciona o Custom CSS** A app aplica automaticamente um processamento adicional para ajudar a garantir que o seu estilo funciona corretamente. ### **Injeção automática de \\!important** Todas as declarações CSS recebem automaticamente a prioridade `!important` na loja, para ajudar a impedir que os estilos do tema substituam as suas alterações. ### **Processamento automático para dispositivos móveis** Os seletores que utilizam a variante `.mobile` são automaticamente envolvidos em media queries para dispositivos móveis quando apresentados na loja. ### **Prioridade sobre as definições de design** O **Custom CSS** geralmente tem precedência sobre as definições de design padrão configuradas noutras partes da app. --- # **💾 Passo 5 — Guardar e publicar** Quando estiver satisfeito com o estilo: ➡️ Clique em **Save** (Guardar). ➡️ Clique em **Publish** (Publicar). ⚠️ Guardar por si só não atualiza a loja. A configuração também tem de ser publicada antes de os clientes poderem ver as alterações. --- # **🔄 Repor o Custom CSS** Se quiser voltar às definições de design padrão: ➡️ Abra a secção **Custom CSS**. ➡️ Clique em **Reset** (Repor). Isto remove o seu CSS personalizado e devolve o controlo às definições de design padrão. --- # **💡 Dicas úteis** ### **Comece aos poucos** Faça uma alteração de cada vez, para que seja mais fácil identificar o efeito de cada regra CSS. ### **Utilize a pré-visualização em tempo real** Reveja sempre as alterações na pré-visualização antes de publicar. ### **Teste os layouts em dispositivos móveis** Mesmo que o CSS pareça correto no computador, verifique também a aparência em dispositivos móveis. ### **Mantenha uma cópia de segurança** Para personalizações CSS mais extensas, considere manter uma cópia do seu código fora da app. --- # **❓ Resolução de problemas** Se o CSS não for aplicado como esperado: ➡️ Verifique se **Apply** está ativado. ➡️ Confirme que a barra de anúncios foi **Saved** (Guardada) e **Published** (Publicada). ➡️ Verifique se os nomes dos seletores correspondem exatamente aos nomes das classes fornecidos. ➡️ Teste numa janela de navegação privada para eliminar problemas de cache do browser. Para requisitos de estilo avançados, considere trabalhar com um desenvolvedor da **Shopify** ou com a equipa de suporte do seu tema. --- # **🎉 Resultado final** ✅ A sua barra de anúncios utiliza um estilo totalmente personalizado. ✅ Os conflitos com o tema são minimizados através do processamento automático de prioridade CSS. ✅ Os layouts para dispositivos móveis e computador podem ser estilizados independentemente. ✅ A barra de anúncios pode ser adaptada para corresponder mais precisamente à identidade visual da marca. O **Custom CSS** oferece a máxima flexibilidade quando as definições de design padrão não são suficientes, ajudando a criar uma experiência de loja mais polida e consistente. 🚀