O que é a página Cores e Estilos?
A página Cores e Estilos é o centro de personalização visual do aplicativo de rádio. Nela o administrador define as cores do site, escolhe entre o tema Light (claro) ou Dark (escuro), personaliza as cores do player de áudio e configura as tipografias (fontes, tamanhos e estilos) usadas em todo o layout. Todas as alterações são salvas com o botão Salvar.
Cores Principais
A primeira seção, CORES PRINCIPAIS, contém as configurações de identidade visual do site:
- Estilo: Dropdown para escolher entre Light (tema claro) e Dark (tema escuro). Esta opção altera todo o esquema de cores da interface do aplicativo.
- Cor Principal: A cor de destaque do site, usada em botões, links e elementos principais. Exemplo: laranja
#ff9500. - Cor Secundária: Cor complementar utilizada em alguns temas. Pode não ser aplicável em todos os temas.
- Cor Terciária: Terceira cor de apoio visual. Assim como a secundária, pode não ser aplicável em todos os temas.
Cada cor pode ser definida clicando no quadrado colorido (abre o seletor nativo de cores do sistema) ou digitando diretamente o código hexadecimal no campo de texto ao lado.
Cor do Player
A seção COR DO PLAYER permite personalizar a aparência do tocador de áudio embutido no site:
- Cor do Player: Define a cor de fundo do tocador de áudio. Deixe o campo vazio para usar automaticamente a Cor Principal do site.
- Ativar Degraê: Toggle (ON/OFF) que aplica um efeito de gradiente no fundo do player, combinando duas cores para um visual mais moderno.
- Cor Final do Degraê: Quando o degraê está ativo, esta é a segunda cor do efeito de gradiente.
- Cor dos Elementos: Define a cor dos ícones, textos e controles dentro do player (ex.: botões play/pause, nome da música, artista). Padrão: branco
#ffffff.
A Pré-visualização abaixo das opções exibe em tempo real como o player ficará com as cores configuradas, mostrando o layout completo com botão play, controle de volume e informações da música.
Fonte do Menu
A seção FONTE DO MENU controla a tipografia dos itens de navegação do menu principal do site:
- Definir uma Fonte Personalizada para o Menu?: Toggle (ON/OFF) que ativa a personalização da fonte do menu.
- Font Face: Dropdown com as famílias tipográficas disponíveis (ex.: Inter, Poppins, Roboto, entre outras fontes Google).
- Opções da Fonte: Radio buttons para escolher o peso/estilo: normal, bold ou italic.
- Tamanho da Fonte: Slider deslizante para ajustar o tamanho em pixels. O valor numérico é exibido à direita do slider (ex.: 14px).
- Preview: Caixa de pré-visualização que exibe o texto de exemplo com a fonte, tamanho e estilo selecionados em tempo real.
- Cor: Define a cor do texto do menu (ex.: preto
#111111).
Fonte dos Títulos das Páginas
A seção FONTE DOS TÍTULOS DAS PÁGINAS controla a tipografia dos títulos (h1, h2, h3…) em todo o site:
- Definir uma Fonte Personalizada para os Títulos das Páginas?: Toggle para ativar a personalização. Afeta os elementos h1, h2, h3 e similares em todo o site.
- Font Face: Escolha da família tipográfica (ex.: Inter).
- Opções da Fonte: normal, bold ou italic. O padrão para títulos costuma ser bold.
- Tamanho da Fonte: Slider com valor em pixels (ex.: 39px para títulos grandes).
- Preview: O texto de pré-visualização é exibido em tamanho grande, refletindo exatamente como os títulos aparecerão no site.
- Cor: Cor do texto dos títulos (ex.:
#1a1a1a).
Fonte dos Cards
A seção FONTE DOS CARDS define a tipografia usada nos títulos de cards e listagens (como cards de notícias, programas, músicas, etc.). Possui as mesmas opções das seções anteriores: toggle de ativação, Font Face, Opções da Fonte (normal/bold/italic), Tamanho via slider, Preview e Cor do texto.
Fonte de Descrição / Corpo
A última seção, FONTE DE DESCRIÇÃO / CORPO, controla a tipografia do texto geral do site — descrições, parágrafos e textos de corpo em todo o layout:
- Definir uma Fonte Personalizada para as Descrições/Corpo do Site?: Toggle de ativação.
- Font Face: Família tipográfica do texto de corpo (ex.: Poppins).
- Opções da Fonte: normal, bold ou italic. Para textos de corpo, o padrão é normal.
- Tamanho da Fonte: Slider com valor em pixels (ex.: 15px para texto corrido legível).
- Preview: Pré-visualização em tempo real do texto com a configuração escolhida.
- Cor: Cor do texto de corpo (ex.:
#333333).
Salvar as Alterações
Após configurar todos os parâmetros desejados, clique no botão Salvar (disponível tanto no topo da página quanto no rodapé) para aplicar todas as mudanças de cores e tipografia ao site imediatamente.
Dicas importantes
- O estilo Dark inverte o esquema de cores para fundos escuros — ideal para rádios com identidade visual noturna.
- As cores Secundária e Terciária são opcionais e dependem do tema selecionado para ter efeito visual.
- O campo Cor do Player pode ficar vazio para herdar automaticamente a Cor Principal do site.
- O Ativar Degraê do player é especialmente eficaz quando as cores inicial e final são tons complementares.
- Cada seção de tipografia possui um preview em tempo real — aproveite para visualizar a combinação de fonte, tamanho e cor antes de salvar.
- As fontes disponíveis são Google Fonts carregadas automaticamente pelo sistema.
