Tutorial: Personalizando Cores do Novo Menu no Scriptcase 🎨

Menu / Menu Árvore
#1

Olá, Scriptcasers! :rocket: Vocês pediram mais personalização no Novo Menu do Scriptcase, e aqui estamos para ajudar a colorir o seu menu de uma maneira fácil e prática! :tada:

Problema: O Novo Menu é super responsivo, mas a personalização de cores está meio limitada, né? Não se preocupe, vamos resolver isso juntos! :sunglasses:

Solução:

  1. Acesse o “OnApplicationInit”:
  • No seu projeto (menu), vá até o menu “Eventos” e selecione “OnApplicationInit”.
  1. Cole o Código:
  • Insira o seguinte código:
?>
<style>
    
    *[data-aetheme=dark-cobalt] {
        --theme-color-primary: #1C1917 !important;
        --theme-color-secondary: #4E4D49 !important;
        --theme-color-accent: #4E4D49 !important;
        --theme-color-muted: #FFFFFF !important;
        --theme-color-text: #DDDEE9 !important;
        --theme-box-shadow: rgba(0, 0, 0, 0.5);
    }
    
</style>
<?php

Explicação:

  • Este código é baseado no tema “dark-cobalt”. :new_moon:
  • Se quiser, adapte para o tema que você está usando ou mude todos os menus para “dark-cobalt”.
  • Desative a opção de mudar de tema se quiser manter a consistência.
  1. Mude as Cores:
  • Substitua os códigos hexadecimais pelas suas cores. :art:
  • Não se esqueça do !important para o navegador priorizar suas escolhas! :rocket:

Importante:

  • Insira o !important ao final de cada cor para dar aquela prioridade. :vertical_traffic_light:

Pronto! Agora seu menu ficará do jeito que você quiser. :computer::sparkles: Se surgir alguma dúvida, deixe abaixo e vamos te ajudar a colorir seu Scriptcase da melhor forma possível!

8 Curtidas
#2

Não sabe apresentar um código aqui?

Copie ou escreva o código entre [code] e [/code]

1 Curtida
#3

Mesmo utilizando a função de código do editor de texto, ele removeu a indentação e o navegador removeu o style…

#4

Usei aqui e deu certo:

?>
<style>
    
    *[data-aetheme=dark-cobalt] {
        --theme-color-primary: #1C1917 !important;
        --theme-color-secondary: #4E4D49 !important;
        --theme-color-accent: #4E4D49 !important;
        --theme-color-muted: #FFFFFF !important;
        --theme-color-text: #DDDEE9 !important;
        --theme-box-shadow: rgba(0, 0, 0, 0.5);
    }
    
</style>
<?php

Mas muito boa a dica, valeu!

4 Curtidas
#5

Agora eu consegui… :+1:

3 Curtidas
#7

Simples e objetivo… obrigado por compartilhar !! Ajudou muito !!

1 Curtida
#8

o meu deu certo esse :


?>
<style>
    
[data-aetheme=light-gray] {
    --theme-color-primary: #ffffff;
    --theme-color-secondary: #f0f0f0;
    --theme-color-accent: #dadada;
    --theme-color-muted: rgb(255 186 0 / 68%) !important;
    --theme-color-text: rgba(47, 43, 61, 0.6784313725);
    --theme-box-shadow: rgba(0, 0, 0, 0.15);
    
</style>
<?php
1 Curtida
#9

Top, tem que ser no atributo data o tema que você está usando na aplicação.

[data-aetheme=NOME_DO_TEMA]

#10

Boa noite a todos, parabéns por compartilhar conhecimento.

1 Curtida