Não existe grande ciência para alterar as cores de um site produzido por Umbraco. Até é bastante simples.
A primeira coisa que se deve fazer é ir aos “settings”->”Stylesheets” e escolher o ficheiro “styles”. Este ficheiro é um ficheiro css.
Atenção: Antes de alterar alguma coisa, fazer um backup total do codigo existente dentro deste ficheiro, porque se for alterada alguma coisa, por mais pequena que seja, pode arruinar o trabalho já existente e depois para encontrar o erro é muito complicado pois é um codigo vasto.
Para alterar o background não é preciso procurar muito. Perto do inicio do ficheiro existe o “Body” do site.
/*
================================
MAIN STYLES
================================
*/
body
{
background-color:#FFFFFF;
font-family:Arial, Verdana, Sans-Serif;
color:#800000;
}
Neste momento as cores estão como fundo a branco, e a cor das letras a um vermelho escuro. Para saber as cores vejam as tabelas de cores html. São as cores RGB mas em Hexadécimal.
No caso acima as cores em RGB do background são 256/256/256 e convertendo para hexadécimal dá FFFFFF.
Exemplo:
background-color:#000000;
Assim teria o background negro.
Para as cores das letras de uma maneira geral, funciona da mesma maneira, contudo o comando é apenas “color:”.
Isto é para casos gerais. Agora se eu usar uma classe personalizada, ela irá ficar sobreposta a classe geral (body).
#header h1.flashHeader
{
font-family:Segoe UI Light, Arial, Sans-Serif;
font-size:18px;
font-weight: normal;
color:#cccccc;
}
Neste caso a cor que iria aparecer no site seria a correspondente a cor CCCCCC. Alterando aquela cor, altera-se no site em todas as palavras que utilizem aquela classe.
Exemplo:
<h1 class="flashHeader left">
<a href="/" title="« Voltar ao início">
<img src='/media/1194/267318_lo_01.gif' alt=""/>
</a>
</h1>
Tudo o que escrever dentro desta classe se n específicar nada em concreto a cor que irá utilizar será a cor definida na css acima.
Depois de alterar tudo o que se quer, é gravar e publicar para verificar resultados. Se não alterar logo o que se quer na primeira tentativa não é caso para preocupação. Volte a repor os valores e continue a procurar os comandos “color” e procure na classe correcta. Em caso de duvida, tente ver o codigo fonte da página.
Tutorial de:
João Martins - Student Club@ ISEC