{"id":1664,"date":"2026-05-08T19:53:47","date_gmt":"2026-05-08T19:53:47","guid":{"rendered":"https:\/\/uhost.com.br\/temav6\/?p=1664"},"modified":"2026-05-08T19:58:55","modified_gmt":"2026-05-08T19:58:55","slug":"cores-e-estilos-personalizar-cores-tema-dark-light-e-tipografia","status":"publish","type":"post","link":"https:\/\/uhost.com.br\/temav6\/cores-e-estilos-personalizar-cores-tema-dark-light-e-tipografia\/","title":{"rendered":"Cores e Estilos \u2013 Personalizar Cores, Tema Dark\/Light e Tipografia"},"content":{"rendered":"

O que \u00e9 a p\u00e1gina Cores e Estilos?<\/h2>\n

A p\u00e1gina Cores e Estilos<\/strong> \u00e9 o centro de personaliza\u00e7\u00e3o visual do aplicativo de r\u00e1dio. Nela o administrador define as cores do site, escolhe entre o tema Light<\/strong> (claro) ou Dark<\/strong> (escuro), personaliza as cores do player de \u00e1udio e configura as tipografias (fontes, tamanhos e estilos) usadas em todo o layout. Todas as altera\u00e7\u00f5es s\u00e3o salvas com o bot\u00e3o Salvar<\/strong>.<\/p>\n

\"Cores<\/p>\n

Cores Principais<\/h2>\n

A primeira se\u00e7\u00e3o, CORES PRINCIPAIS<\/strong>, cont\u00e9m as configura\u00e7\u00f5es de identidade visual do site:<\/p>\n

    \n
  • Estilo<\/strong>: Dropdown para escolher entre Light<\/em> (tema claro) e Dark<\/em> (tema escuro). Esta op\u00e7\u00e3o altera todo o esquema de cores da interface do aplicativo.<\/li>\n
  • Cor Principal<\/strong>: A cor de destaque do site, usada em bot\u00f5es, links e elementos principais. Exemplo: laranja #ff9500<\/code>.<\/li>\n
  • Cor Secund\u00e1ria<\/strong>: Cor complementar utilizada em alguns temas. Pode n\u00e3o ser aplic\u00e1vel em todos os temas.<\/li>\n
  • Cor Terci\u00e1ria<\/strong>: Terceira cor de apoio visual. Assim como a secund\u00e1ria, pode n\u00e3o ser aplic\u00e1vel em todos os temas.<\/li>\n<\/ul>\n

    Cada cor pode ser definida clicando no quadrado colorido (abre o seletor nativo de cores do sistema) ou digitando diretamente o c\u00f3digo hexadecimal no campo de texto ao lado.<\/p>\n

    Cor do Player<\/h2>\n

    A se\u00e7\u00e3o COR DO PLAYER<\/strong> permite personalizar a apar\u00eancia do tocador de \u00e1udio embutido no site:<\/p>\n

    \"Cor<\/p>\n

      \n
    • Cor do Player<\/strong>: Define a cor de fundo do tocador de \u00e1udio. Deixe o campo vazio para usar automaticamente a Cor Principal do site.<\/li>\n
    • Ativar Degra\u00ea<\/strong>: Toggle (ON\/OFF) que aplica um efeito de gradiente no fundo do player, combinando duas cores para um visual mais moderno.<\/li>\n
    • Cor Final do Degra\u00ea<\/strong>: Quando o degra\u00ea est\u00e1 ativo, esta \u00e9 a segunda cor do efeito de gradiente.<\/li>\n
    • Cor dos Elementos<\/strong>: Define a cor dos \u00edcones, textos e controles dentro do player (ex.: bot\u00f5es play\/pause, nome da m\u00fasica, artista). Padr\u00e3o: branco #ffffff<\/code>.<\/li>\n<\/ul>\n

      A Pr\u00e9-visualiza\u00e7\u00e3o<\/strong> abaixo das op\u00e7\u00f5es exibe em tempo real como o player ficar\u00e1 com as cores configuradas, mostrando o layout completo com bot\u00e3o play, controle de volume e informa\u00e7\u00f5es da m\u00fasica.<\/p>\n

      Fonte do Menu<\/h2>\n

      A se\u00e7\u00e3o FONTE DO MENU<\/strong> controla a tipografia dos itens de navega\u00e7\u00e3o do menu principal do site:<\/p>\n

      \"Fonte<\/p>\n

        \n
      • Definir uma Fonte Personalizada para o Menu?<\/strong>: Toggle (ON\/OFF) que ativa a personaliza\u00e7\u00e3o da fonte do menu.<\/li>\n
      • Font Face<\/strong>: Dropdown com as fam\u00edlias tipogr\u00e1ficas dispon\u00edveis (ex.: Inter, Poppins, Roboto, entre outras fontes Google).<\/li>\n
      • Op\u00e7\u00f5es da Fonte<\/strong>: Radio buttons para escolher o peso\/estilo: normal<\/em>, bold<\/em> ou italic<\/em>.<\/li>\n
      • Tamanho da Fonte<\/strong>: Slider deslizante para ajustar o tamanho em pixels. O valor num\u00e9rico \u00e9 exibido \u00e0 direita do slider (ex.: 14px).<\/li>\n
      • Preview<\/strong>: Caixa de pr\u00e9-visualiza\u00e7\u00e3o que exibe o texto de exemplo com a fonte, tamanho e estilo selecionados em tempo real.<\/li>\n
      • Cor<\/strong>: Define a cor do texto do menu (ex.: preto #111111<\/code>).<\/li>\n<\/ul>\n

        Fonte dos T\u00edtulos das P\u00e1ginas<\/h2>\n

        A se\u00e7\u00e3o FONTE DOS T\u00cdTULOS DAS P\u00c1GINAS<\/strong> controla a tipografia dos t\u00edtulos (h1, h2, h3…) em todo o site:<\/p>\n

        \"Fonte<\/p>\n

          \n
        • Definir uma Fonte Personalizada para os T\u00edtulos das P\u00e1ginas?<\/strong>: Toggle para ativar a personaliza\u00e7\u00e3o. Afeta os elementos h1, h2, h3 e similares em todo o site.<\/li>\n
        • Font Face<\/strong>: Escolha da fam\u00edlia tipogr\u00e1fica (ex.: Inter).<\/li>\n
        • Op\u00e7\u00f5es da Fonte<\/strong>: normal, bold<\/strong> ou italic<\/em>. O padr\u00e3o para t\u00edtulos costuma ser bold<\/em>.<\/li>\n
        • Tamanho da Fonte<\/strong>: Slider com valor em pixels (ex.: 39px para t\u00edtulos grandes).<\/li>\n
        • Preview<\/strong>: O texto de pr\u00e9-visualiza\u00e7\u00e3o \u00e9 exibido em tamanho grande, refletindo exatamente como os t\u00edtulos aparecer\u00e3o no site.<\/li>\n
        • Cor<\/strong>: Cor do texto dos t\u00edtulos (ex.: #1a1a1a<\/code>).<\/li>\n<\/ul>\n

          Fonte dos Cards<\/h2>\n

          A se\u00e7\u00e3o FONTE DOS CARDS<\/strong> define a tipografia usada nos t\u00edtulos de cards e listagens (como cards de not\u00edcias, programas, m\u00fasicas, etc.). Possui as mesmas op\u00e7\u00f5es das se\u00e7\u00f5es anteriores: toggle de ativa\u00e7\u00e3o, Font Face, Op\u00e7\u00f5es da Fonte (normal\/bold\/italic), Tamanho via slider, Preview e Cor do texto.<\/p>\n

          Fonte de Descri\u00e7\u00e3o \/ Corpo<\/h2>\n

          A \u00faltima se\u00e7\u00e3o, FONTE DE DESCRI\u00c7\u00c3O \/ CORPO<\/strong>, controla a tipografia do texto geral do site \u2014 descri\u00e7\u00f5es, par\u00e1grafos e textos de corpo em todo o layout:<\/p>\n

          \"Fonte<\/p>\n

            \n
          • Definir uma Fonte Personalizada para as Descri\u00e7\u00f5es\/Corpo do Site?<\/strong>: Toggle de ativa\u00e7\u00e3o.<\/li>\n
          • Font Face<\/strong>: Fam\u00edlia tipogr\u00e1fica do texto de corpo (ex.: Poppins).<\/li>\n
          • Op\u00e7\u00f5es da Fonte<\/strong>: normal, bold ou italic. Para textos de corpo, o padr\u00e3o \u00e9 normal<\/em>.<\/li>\n
          • Tamanho da Fonte<\/strong>: Slider com valor em pixels (ex.: 15px para texto corrido leg\u00edvel).<\/li>\n
          • Preview<\/strong>: Pr\u00e9-visualiza\u00e7\u00e3o em tempo real do texto com a configura\u00e7\u00e3o escolhida.<\/li>\n
          • Cor<\/strong>: Cor do texto de corpo (ex.: #333333<\/code>).<\/li>\n<\/ul>\n

            Salvar as Altera\u00e7\u00f5es<\/h2>\n

            Ap\u00f3s configurar todos os par\u00e2metros desejados, clique no bot\u00e3o Salvar<\/strong> (dispon\u00edvel tanto no topo da p\u00e1gina quanto no rodap\u00e9) para aplicar todas as mudan\u00e7as de cores e tipografia ao site imediatamente.<\/p>\n

            Dicas importantes<\/h2>\n
              \n
            • O estilo Dark<\/strong> inverte o esquema de cores para fundos escuros \u2014 ideal para r\u00e1dios com identidade visual noturna.<\/li>\n
            • As cores Secund\u00e1ria e Terci\u00e1ria s\u00e3o opcionais e dependem do tema selecionado para ter efeito visual.<\/li>\n
            • O campo Cor do Player<\/strong> pode ficar vazio para herdar automaticamente a Cor Principal do site.<\/li>\n
            • O Ativar Degra\u00ea<\/strong> do player \u00e9 especialmente eficaz quando as cores inicial e final s\u00e3o tons complementares.<\/li>\n
            • Cada se\u00e7\u00e3o de tipografia possui um preview em tempo real<\/strong> \u2014 aproveite para visualizar a combina\u00e7\u00e3o de fonte, tamanho e cor antes de salvar.<\/li>\n
            • As fontes dispon\u00edveis s\u00e3o Google Fonts carregadas automaticamente pelo sistema.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

              O que \u00e9 a p\u00e1gina Cores e Estilos? A p\u00e1gina Cores e Estilos \u00e9 o centro de personaliza\u00e7\u00e3o visual do aplicativo de r\u00e1dio. Nela o administrador define as cores do site, escolhe entre o tema Light (claro) ou Dark (escuro), personaliza as cores do player de \u00e1udio e configura as tipografias (fontes, tamanhos e estilos) usadas em todo o layout. Todas as altera\u00e7\u00f5es s\u00e3o salvas com o bot\u00e3o Salvar. Cores Principais A primeira se\u00e7\u00e3o, CORES PRINCIPAIS, cont\u00e9m as configura\u00e7\u00f5es de identidade visual do site: Estilo: Dropdown para escolher entre Light (tema claro) e Dark (tema escuro). Esta op\u00e7\u00e3o altera todo o esquema de cores da interface do aplicativo. Cor Principal: A cor de destaque do site, usada em bot\u00f5es, links e elementos principais. Exemplo: laranja #ff9500. Cor Secund\u00e1ria: Cor complementar utilizada em alguns temas. Pode n\u00e3o ser aplic\u00e1vel em todos os temas. Cor Terci\u00e1ria: Terceira cor de apoio visual. Assim como a secund\u00e1ria, pode n\u00e3o ser aplic\u00e1vel 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\u00f3digo hexadecimal no campo de texto ao lado. Cor do Player A se\u00e7\u00e3o COR DO PLAYER permite personalizar a apar\u00eancia do tocador de \u00e1udio embutido no site: Cor do Player: Define a cor de fundo do tocador de \u00e1udio. Deixe o campo vazio para usar automaticamente a Cor Principal do site. Ativar Degra\u00ea: 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\u00ea: Quando o degra\u00ea est\u00e1 ativo, esta \u00e9 a segunda cor do efeito de gradiente. Cor dos Elementos: Define a cor dos \u00edcones, textos e controles dentro do player (ex.: bot\u00f5es play\/pause, nome da m\u00fasica, artista). Padr\u00e3o: branco #ffffff. A Pr\u00e9-visualiza\u00e7\u00e3o abaixo das op\u00e7\u00f5es exibe em tempo real como o player ficar\u00e1 com as cores configuradas, mostrando o layout completo com bot\u00e3o play, controle de volume e informa\u00e7\u00f5es da m\u00fasica. Fonte do Menu A se\u00e7\u00e3o FONTE DO MENU controla a tipografia dos itens de navega\u00e7\u00e3o do menu principal do site: Definir uma Fonte Personalizada para o Menu?: Toggle (ON\/OFF) que ativa a personaliza\u00e7\u00e3o da fonte do menu. Font Face: Dropdown com as fam\u00edlias tipogr\u00e1ficas dispon\u00edveis (ex.: Inter, Poppins, Roboto, entre outras fontes Google). Op\u00e7\u00f5es 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\u00e9rico \u00e9 exibido \u00e0 direita do slider (ex.: 14px). Preview: Caixa de pr\u00e9-visualiza\u00e7\u00e3o 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\u00edtulos das P\u00e1ginas A se\u00e7\u00e3o FONTE DOS T\u00cdTULOS DAS P\u00c1GINAS controla a tipografia dos t\u00edtulos (h1, h2, h3…) em todo o site: Definir uma Fonte Personalizada para os T\u00edtulos das P\u00e1ginas?: Toggle para ativar a personaliza\u00e7\u00e3o. Afeta os elementos h1, h2, h3 e similares em todo o site. Font Face: Escolha da fam\u00edlia tipogr\u00e1fica (ex.: Inter). Op\u00e7\u00f5es da Fonte: normal, bold ou italic. O padr\u00e3o para t\u00edtulos costuma ser bold. Tamanho da Fonte: Slider com valor em pixels (ex.: 39px para t\u00edtulos grandes). Preview: O texto de pr\u00e9-visualiza\u00e7\u00e3o \u00e9 exibido em tamanho grande, refletindo exatamente como os t\u00edtulos aparecer\u00e3o no site. Cor: Cor do texto dos t\u00edtulos (ex.: #1a1a1a). Fonte dos Cards A se\u00e7\u00e3o FONTE DOS CARDS define a tipografia usada nos t\u00edtulos de cards e listagens (como cards de not\u00edcias, programas, m\u00fasicas, etc.). Possui as mesmas op\u00e7\u00f5es das se\u00e7\u00f5es anteriores: toggle de ativa\u00e7\u00e3o, Font Face, Op\u00e7\u00f5es da Fonte (normal\/bold\/italic), Tamanho via slider, Preview e Cor do texto. Fonte de Descri\u00e7\u00e3o \/ Corpo A \u00faltima se\u00e7\u00e3o, FONTE DE DESCRI\u00c7\u00c3O \/ CORPO, controla a tipografia do texto geral do site \u2014 descri\u00e7\u00f5es, par\u00e1grafos e textos de corpo em todo o layout: Definir uma Fonte Personalizada para as Descri\u00e7\u00f5es\/Corpo do Site?: Toggle de ativa\u00e7\u00e3o. Font Face: Fam\u00edlia tipogr\u00e1fica do texto de corpo (ex.: Poppins). Op\u00e7\u00f5es da Fonte: normal, bold ou italic. Para textos de corpo, o padr\u00e3o \u00e9 normal. Tamanho da Fonte: Slider com valor em pixels (ex.: 15px para texto corrido leg\u00edvel). Preview: Pr\u00e9-visualiza\u00e7\u00e3o em tempo real do texto com a configura\u00e7\u00e3o escolhida. Cor: Cor do texto de corpo (ex.: #333333). Salvar as Altera\u00e7\u00f5es Ap\u00f3s configurar todos os par\u00e2metros desejados, clique no bot\u00e3o Salvar (dispon\u00edvel tanto no topo da p\u00e1gina quanto no rodap\u00e9) para aplicar todas as mudan\u00e7as de cores e tipografia ao site imediatamente. Dicas importantes O estilo Dark inverte o esquema de cores para fundos escuros \u2014 ideal para r\u00e1dios com identidade visual noturna. As cores Secund\u00e1ria e Terci\u00e1ria s\u00e3o 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\u00ea do player \u00e9 especialmente eficaz quando as cores inicial e final s\u00e3o tons complementares. Cada se\u00e7\u00e3o de tipografia possui um preview em tempo real \u2014 aproveite para visualizar a combina\u00e7\u00e3o de fonte, tamanho e cor antes de salvar. As fontes dispon\u00edveis s\u00e3o Google Fonts carregadas automaticamente pelo sistema.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1664","post","type-post","status-publish","format-standard","hentry","category-v6"],"_links":{"self":[{"href":"https:\/\/uhost.com.br\/temav6\/wp-json\/wp\/v2\/posts\/1664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uhost.com.br\/temav6\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uhost.com.br\/temav6\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uhost.com.br\/temav6\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uhost.com.br\/temav6\/wp-json\/wp\/v2\/comments?post=1664"}],"version-history":[{"count":2,"href":"https:\/\/uhost.com.br\/temav6\/wp-json\/wp\/v2\/posts\/1664\/revisions"}],"predecessor-version":[{"id":1666,"href":"https:\/\/uhost.com.br\/temav6\/wp-json\/wp\/v2\/posts\/1664\/revisions\/1666"}],"wp:attachment":[{"href":"https:\/\/uhost.com.br\/temav6\/wp-json\/wp\/v2\/media?parent=1664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uhost.com.br\/temav6\/wp-json\/wp\/v2\/categories?post=1664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uhost.com.br\/temav6\/wp-json\/wp\/v2\/tags?post=1664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}