> ## 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 o aplicativo reservas de nomeação > ℹ️ **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 o widget de reserva para combinar com a marca da sua loja exatamente? Hoppy Appointments permite que você adicione seu próprio CSS em cima das configurações de design incorporadas, para que você possa ajustar fontes, cores, espaçamento, botões e muito mais. Este guia orienta você através da adição e aplicação de CSS personalizado para o widget de reserva. --- # **⚠️ Antes de começar** Antes de usar CSS personalizado, certifique-se de ter: * A **Hoppy Appointments** app instalado no seu Shopify guardar * Pelo menos um serviço ativo * Familiaridade básica com seletores e declarações CSS 💡 Para a maioria das mudanças de design — cores, fontes, logotipos e estilos de botões — use o built-in **Desenho** configurações primeiro. CSS personalizado é melhor quando você precisa de alterações as opções incorporadas não cobrem. Para uma visão completa das opções de design incorporadas, consulte **Reservas de Nomeação — Opções de Design e Estilhamento**. --- # **🛠️ Passo 1 — Abra o Editor CSS Personalizado** CSS personalizado pode ser gerenciado em dois lugares. ## **CSS global (aplica-se a todos os serviços por padrão)** 1. Abrir o **Hoppy Appointments** app 2. Clique **Configuração** no menu da aplicação 3. Clique **Desenho** 4. Rolar para baixo para o **CSS Personalizado** carta na parte inferior da página ## **CSS por serviço (sobrepõe CSS global para um serviço)** 1. Abrir o **Hoppy Appointments** app 2. Ir para **Serviços** 3. Clique no serviço que você deseja estilo 4. Clique na **Desenho** aba 5. Certifiquem-se disso. **Não seguir as Configurações Predefinidas do Tema** deve ser verificado 6. Rolar para baixo para o **CSS Personalizado** cartão --- # **🛠️ Passo 2 — Escolha CSS global ou nível de serviço** Ao editar CSS em um serviço **Desenho** tab, você verá uma opção: **Não seguir as Configurações Predefinidas do Tema** * **Desligado** → o serviço utiliza o CSS global de **Configurações → Design** * **Ligado** → o serviço usa seu próprio CSS a partir do nível de serviço **Desenho** aba Isso permite que você mantenha um estilo consistente em todos os serviços, ou dê a serviços específicos um olhar único. --- # **🛠️ Passo 3 — Escreva seu CSS** O editor CSS começa com um modelo padrão que inclui os seletores de widget mais comuns. Você pode substituir ou estender o modelo com suas próprias regras. ## **Classes de embalagem principais** Seletor O que ele visa `.futureblink-appointment` Todo o widget de reserva `.futureblink-appointment .dialog` A janela principal de reserva (desktop) `.futureblink-appointment.mobile .dialog` A janela principal de reserva (móvel) `.futureblink-appointment .userInfoSection` O painel de detalhes do serviço ## **Selectores comuns que você pode usar** Seletor O que ele visa `.futureblink-appointment .confirm-btn` Confirmar o botão / Livro `.futureblink-appointment .continue-btn` Botão Continuar `.futureblink-appointment .back-btn` Botão traseiro `.futureblink-appointment .time-slot.selected` Espaço de tempo selecionado `.futureblink-appointment .highlighted_date.react-calendar__tile--active` Data de calendário selecionada `.futureblink-appointment .schedule-form` Formulário de reserva do cliente `.futureblink-appointment .meeting-booked` Página de sucesso / confirmação ## **Exemplo** .futureblink-pointment .confirmar-btn { fundo- cor: # 2563eb; cor: #ffffff; Raio-fronteira: 8px; } .futureblink-pointment.mobile.confirm-btn { fundo- cor: #1d4ed8; } ℹ️ Tu sabes. **não** precisa adicionar `!important` às suas declarações. Hoppy Appointments adiciona automaticamente `!important` quando o CSS é injetado no widget, o que ajuda suas regras a substituir os estilos padrão. --- # **🛠️ Passo 4 — Aplique o CSS** Depois de inserir seu CSS, clique no **Aplicar** botão abaixo do editor. * **Aplicar** → habilita o CSS personalizado e injeta-o no widget de reserva * **Reiniciar** → desabilita o CSS personalizado e reverte o editor para o modelo padrão ⚠️ CSS personalizado só faz efeito depois de clicar **Aplicar**. Colar CSS no campo sozinho não muda a aparência do widget. --- # **💾 Passo 5 — Salvar e Antevisão** 1. Clique **Gravar** na barra superior 2. Aguarde a mensagem de confirmação 3. Visualize o widget de reserva na frente da sua loja ou no painel de visualização do administrador Se você editou CSS por serviço, certifique-se **Não seguir as Configurações Predefinidas do Tema** alternância está ligada, caso contrário o CSS global ainda será usado. --- # **💡 Dicas e melhores práticas** * **Iniciar pequeno** — alterar um elemento de cada vez para que possa ver o que cada regra afecta * **Usar seletores específicos** — objectivo `.futureblink-appointment .your-class` em vez de selectores largos que podem afetar outras partes da sua loja * **Ensaio em dispositivos móveis** — utilizar o `.futureblink-appointment.mobile` prefixo para ajustar o layout móvel separadamente * **Manter uma cópia de segurança** — copiar o CSS de trabalho num ficheiro de notas antes de carregar **Reiniciar** * **Usar as configurações de design incorporadas primeiro** — cores, fontes e logotipos são mais fáceis de gerenciar lá e não requerem conhecimento CSS --- # **🐞 Resolução de Problemas** ## **Meu CSS não está mostrando na frente da loja** 1. Certifique-se de clicar **Aplicar** no editor CSS personalizado 2. Certifique-se de clicar **Gravar** no topo da página 3. Para CSS por serviço, certifique-se **Não seguir as Configurações Predefinidas do Tema** está ligado 4. Verifique se os seus selectores correspondem aos nomes reais das classes de elementos 5. Limpar o cache do seu navegador ou testar em uma janela desconhecida ## **O elemento foi revertido para a aparência padrão** Clicando **Reiniciar** desativa o CSS e restaura o modelo padrão. Se você quiser suas regras personalizadas de volta, cole-as novamente e clique **Aplicar**. ## **Algumas regras não funcionam** O auto `!important` injeção funciona melhor com simples `property: value;` declarações. CSS muito complexo — tais como `@media` consultas, `@keyframes`, ou selectores aninhados – não podem ser transformados de forma confiável. Mantenha suas regras diretas para os resultados mais consistentes. --- # **📚 Artigos relacionados** * **Reservas de Nomeação — Opções de Design e Estilhamento** * **Como configurar locais de reunião para reservas de nomeação** * **Como configurar serviços de reserva de nomeação**