Como podemos ajudar?

FC 14481 :: Como alterar as cores da barra da loja modelo?

Veja o passo a passo para modificar as cores dos elementos.

Verifique se sua loja possui o arquivo Colors.css, caso sim as alterações serão feitas nesse arquivo.

Caso não tenha, todas as alterações de cores serão feitas no arquivo LojaSite.css

Veja o exemplo: Modelo Responsivo

Para alterar a cor da barra de Azul para Verde altere a classe .HeaderMainMenuFC:

De:

.HeaderMainMenuFC{background:none repeat scroll 0 0 #0e72d2;border-bottom:2px solid #195d9e;box-sizing:border-box;display:table;text-align:center;width:100%;height:50px;}

Para:

.HeaderMainMenuFC{background:none repeat scroll 0 0 #008000;border-bottom:2px solid #008000;box-sizing:border-box;display:table;text-align:center;width:100%;height:50px;}

Veja como ficará a barra:

Alterar o efeito de Hover ao sobrepor o mouse sobre o Menu:

Para alterar a cor do efeito Hover altere a classe .HeaderMenuULFC a:hover li:

De:

.HeaderMenuULFC a:hover li{background:#124b8e;color:#fcfcfc;}

Para:

.HeaderMenuULFC a:hover li{background:#FF0000;color:#fcfcfc;}

Alterar a cor do ícone no efeito Hover ao sobrepor o mouse sobre o Menu:

Para alterar a cor do ícone no efeito Hover altere a classe .HeaderMenuULFC a:hover svg:

De:

.HeaderMenuULFC a:hover svg{fill:#bad9f7;transition: fill 0.5s ease;}

Para:

.HeaderMenuULFC a:hover svg{fill:#FFFF00;transition: fill 0.5s ease;}

Alterar a cor do ícone Carrinho:

Para alterar a cor do ícone altere a classe .HeaderCartMainFC path, .HeaderCartMainFC circle:

De:

.HeaderCartMainFC path, .HeaderCartMainFC circle{fill:#0E72D2;}

Para:

.HeaderCartMainFC path, .HeaderCartMainFC circle{fill:#8B4513;}

Alterar a cor do ícone no efeito Hover ao sobrepor o mouse sobre o Carrinho:

Para alterar a cor do ícone no efeito Hover ao sobrepor o mouse sobre o Carrinho altere a classe .HeaderCartMainFC:hover path, .HeaderCartMainFC:hover circle:

De:

.HeaderCartMainFC:hover path, .HeaderCartMainFC:hover circle{fill:#1baa32;transition: fill 0.3s ease;}

Para:

.HeaderCartMainFC:hover path, .HeaderCartMainFC:hover circle{fill:#808080;transition: fill 0.3s ease;}

Alterar a cor do preço do Carrinho:

Para alterar a cor do preço altere o ID a #HeaderCartTotalFC:

De:

Classe original: a #HeaderCartTotalFC{position:relative;top:3px;font-size:15px;color:#433f37;font-family:'OpenSansBold',verdana,arial}

Para:

Alterando a cor: a #HeaderCartTotalFC{position:relative;top:3px;font-size:15px;color:#008000;font-family:'OpenSansBold',verdana,arial}

Alterar a cor do texto item(s) do Carrinho:

Para alterar a cor do item(s) altere o ID a #HeaderCartItemFC:

De:

a #HeaderCartItemFC{position:relative;top:-1px;font-size:13px;color:#4868d1;}

Para:

a #HeaderCartItemFC{position:relative;top:-1px;font-size:13px;color:#FF0000;}

Alterar a cor do botão de busca:

A classe .btn-sent precisa ser inserida no arquivo LojaSite.css.

.btn-sent {background:#FF0000 !important;color:#fff !important;}

Alterar a cor do texto Departamentos na Barra Flutuante:

Para alterar a cor do texto Departamentos altere a classe .HeaderMenuToolbarFC:

De:

.HeaderMenuToolbarFC{float: left; margin:18px 15px;}

Para:

.HeaderMenuToolbarFC{float: left; margin:18px 15px;color:#9400D3 !important;}

Alterar a cor do ícone do telefone na Barra Flutuante:

Para alterar a cor do ícone do telefone altere a classe .FCToolBarChatTel a svg path:

De:

.FCToolBarChatTel a svg path{fill:#0e72d2}

Para:

.FCToolBarChatTel a svg path{fill:#9400D3}

Alterar a cor do ícone Departamentos na Barra Flutuante:

Para alterar a cor do ícone Departamentos altere a classe .HeaderMenuCatDepFC svg path:

De:

.HeaderMenuCatDepFC svg path{fill:#0e72d2}

Para:

.HeaderMenuCatDepFC svg path{fill:#9400D3}

---

Avaliações dos clientes: Este produto ainda não recebeu avaliações de clientes. Clique aqui e seja o primeiro a avaliá-lo