> ## 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 os distintivos e ícones de confiança > ℹ️ **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 controle total sobre como seus Distintivos de Confiança ficam em sua loja? 🎨 Enquanto a guia Design fornece opções extensas de personalização, **CSS Personalizado** dá-lhe a flexibilidade para fazer ajustes de estilo avançados que vão além das configurações padrão. Se você está refinando o espaçamento, combinando diretrizes estritas da marca, adicionando efeitos visuais personalizados ou resolvendo conflitos de estilo específicos do tema, o Custom CSS oferece controle criativo completo sobre seu design Trust Badge. --- # **⚠️ Antes de começar** Antes de usar CSS personalizado: * Certifique-se de que você já criou um Distintivo de Confiança. * Tenha uma compreensão básica de CSS ou acesso a um desenvolvedor. * Compreenda que CSS personalizado pode sobrepor configurações de design padrão. 💡 Se você ainda não criou um Distintivo de Confiança, crie um antes de prosseguir com este guia. --- # **🛠️ Passo 1 — Abra a Página Desenho** Abrir o **Hoppy Trust Badges** app e navegue para o distintivo de confiança que você deseja personalizar. Depois: ➡️ Clique na **Desenho** tab. Desça até localizar o **CSS Personalizado** secção. Esta seção contém todas as ferramentas necessárias para adicionar e gerenciar o estilo personalizado. --- # **🎨 Passo 2 — Abra a seção CSS personalizada** Dentro da **CSS Personalizado** Seção que você vai encontrar: * Um editor de CSS * A **Ver Guia** botão * An **Aplicar** botão * Um modelo CSS inicial O template starter contém os selectores disponíveis que podem ser personalizados para o seu distintivo de confiança. Isto torna mais fácil começar a styling sem necessidade de inspecionar manualmente elementos storefront. --- # **✍️ Passo 3 — Adicione seu CSS personalizado** O editor inclui vários seletores pré-configurados que visam elementos específicos do Trust Badge. ### **Selectores Disponíveis** #### **Container** Seletor Designação das mercadorias `.futureblink-trust-badge` Contêiner de distintivos de confiança completo --- #### **Título** Seletor Designação das mercadorias `.futureblink-trust-badge .fb-title` Texto do título principal `.futureblink-trust-badge.mobile .fb-title` Estilo de título móvel 💡 Para crachás flutuantes, o seletor de título usa `.title` em vez de `.fb-title`. --- #### **Subdivisão** Seletor Designação das mercadorias `.futureblink-trust-badge .subheading` Descrição do texto `.futureblink-trust-badge.mobile .subheading` Estilo de descrição móvel --- #### **Ícones** Seletor Designação das mercadorias `.futureblink-trust-badge .icon` Ícones de Distintivo `.futureblink-trust-badge.mobile .icon` Estilo de ícones móveis --- #### **Botão Chamar a Ação** Seletor Designação das mercadorias `.futureblink-trust-badge .cta-button` Botão CTA `.futureblink-trust-badge.mobile .cta-button` Estilo de botão CTA móvel --- ### **Exemplo CSS** Para adicionar enchimento ao recipiente de crachá e personalizar o título: `.futureblink-trust-badge {` `padding: 20px;` `}` `.futureblink-trust-badge .fb-title {` `color: #2c3e50;` `font-size: 18px;` `}` 💡 Você pode adicionar seletores CSS adicionais, consultas de mídia, animações e regras de estilo, conforme necessário. --- # **📱 Passo 4 — Adicionar um estilo específico para dispositivos móveis** Para direcionar especificamente dispositivos móveis, use o `.mobile` variação dos selectores. Exemplo: `.futureblink-trust-badge.mobile .fb-title {` `font-size: 14px;` `}` A aplicação é automática `.mobile` Seletores dentro de uma consulta de mídia móvel ao renderizá-los em sua loja. Se você preferir escrever suas próprias consultas de mídia, elas serão preservadas exatamente como inseridas. --- # **✅ Passo 5 — Aplique seu CSS** Uma vez que o seu CSS foi adicionado: ➡️ Clique **Aplicar**. As atualizações de visualização ao vivo automaticamente, permitindo que você reveja suas alterações de estilo imediatamente. Se você quiser remover seu estilo personalizado mais tarde: ➡️ Clique **Reiniciar**. Isso remove seu CSS personalizado e restaura as configurações de Design padrão. --- # **👀 Passo 6 — Reveja a Visualização** Depois de aplicar o seu CSS: ➡️ Reveja a visualização do Desktop. ➡️ Reveja a pré-visualização do Mobile. Verificar que: * O texto aparece correctamente. * Ícones permanecem alinhados. * O espaçamento parece consistente. * Os botões exibem como esperado. Se forem necessários ajustamentos: ➡️ Atualizar o CSS. ➡️ Clique **Aplicar** Outra vez. A antevisão atualiza automaticamente após cada alteração. --- # **💾 Passo 7 — Salvar e Publicar** Uma vez satisfeito com o design: ➡️ Clique **Gravar**. ➡️ Clique **Publicar**. ⚠️ Salvar sozinho não atualiza o storefront. O Distintivo de Confiança também deve ser publicado antes que os clientes possam ver as alterações. --- # **⚠️ Notas Importantes** ### **CSS Personalizado Substitui as Configurações Padrão** CSS personalizado tem precedência sobre a maioria das configurações da aba Design. Se uma configuração de cor, espaçamento ou tipografia parecer ser ignorada, é provável que esteja sendo substituída por seu CSS. --- ### **Manuseamento Automático!importante** O aplicativo adiciona automaticamente `!important` prioridade para declarações CSS ao renderizar estilos no storefront. Você não precisa adicionar `!important` manualmente. --- ### **Styling Escondido** CSS personalizado é automaticamente escopo para o distintivo de confiança específico sendo editado. Isso ajuda a evitar conflitos de estilo com: * Outros Distintivos de Confiança * Elementos temáticos * Outros componentes da frente da loja --- ### **Seletores vazios são permitidos** Você não precisa usar cada seletor fornecido no modelo. Apenas adicione estilos aos elementos que deseja personalizar. --- ### **Validação do CSS** O editor não valida a sintaxe do CSS. Se um estilo não estiver se aplicando corretamente: ➡️ Verifique os nomes do selector. ➡️ Verifique os suportes e pontos e vírgulas. ➡️ Reveja o CSS para erros de sintaxe. --- # **❓ Resolução de Problemas** Se seus estilos não estão aparecendo corretamente: ➡️ Confirmar que **Aplicar** foi clicado. ➡️ Verificar o distintivo de confiança tem sido **Gravado** e **Publicado**. ➡️ Verifique se os nomes do seletor correspondem exatamente ao modelo fornecido. ➡️ Teste em uma janela de navegador Incógnito ou Privado. ➡️ Atualizar o storefront para limpar estilos em cache. --- # **🎉 Resultado Final** ✅ Seu distintivo de confiança pode ser personalizado além das configurações de design padrão. ✅ Branding, espaçamento, tipografia e estilo de ícones podem ser controlados com mais precisão. ✅ Os layouts desktop e móvel podem ser decorados de forma independente. ✅ Os estilos personalizados permanecem isolados ao distintivo de confiança selecionado. Custom CSS fornece uma maneira flexível de criar uma experiência mais polida e consistente com a marca Trust Badge, mantendo a simplicidade das ferramentas de design integradas do aplicativo. ✨