Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Peletti

Cor da fonte em links do header em loja virtual uol

Recommended Posts

Boa tarde pessoal, estou trabalhando na customização de uma loja virtual para uns amigos, ela foi feito com template do uol host e agora estou alterando algumas coisas com CSS para melhorar a cara do site, mas me deparei com um problema.

Quero deixar todas as palavras/links do header na cor branca, mas conforme podem ver na imagem abaixo, só consegui alterar o "BEM VINDO"...

 

198745bad85e9c9e2c157b443e5d22de08b0f0e393559f2ebed6956b6840f2c86g.jpg

 

A parte onde está escrito "bem vindo" foi alterada para branco, utilizando o código simples de CSS:

 

<style type="text/css">
.toplinks-bar {
	color:white;
}
</style>

 

Mas as demais palavras que são links, "Minha Conta", "Meu Carrinho", etc não tem jeito de alterar, alguém tem alguma dica de como posso fazer?

 

Lembro que é um template de loja virtual, então as alterações por código CSS devem ser inseridas dentro do site de administração do UOL, numa área específica, não sei se é isso que pode estar bagunçando, mas o estranho é conseguir alterar um item e não os outros.

 

Abaixo, parte do código do site para análise onde se encontra as tags e os links que preciso alterar a cor e se necessário o site pode ser acessado em:

 

www.coze.com.br

 

<div class="outline-creator">
     <div class="toplinks-bar">
           <strong>Bem-vindo!</strong>
                  	<ul class="top-links">
                                  	<li class="first" ><a href="https://coze.lojablindada.com/customer/account/?SID=iqk7kb8p59h28g1hjhm1rli6a7" title="Minha Conta" >Minha Conta</a></li>
                                  	<li ><a href="https://coze.lojablindada.com/wishlist/?SID=iqk7kb8p59h28g1hjhm1rli6a7" title="Minha Lista de Desejos" class="top-link-wishlist">Minha Lista de Desejos</a></li>
                                  	<li ><a href="http://www.coze.com.br/checkout/cart/" title="Meu Carrinho" class="top-link-cart">Meu Carrinho</a></li>
                                  	<li ><a href="http://www.coze.com.br/checkout/" title="Fechar Compra" class="top-link-checkout">Fechar Compra</a></li>
                                  	<li class=" last" ><a href="https://coze.lojablindada.com/customer/account/login/?SID=iqk7kb8p59h28g1hjhm1rli6a7" title="Entrar" >Entrar</a></li>
                                   </ul>
        	</div>

 

Muito obrigado!

 

Felipe Pelini

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não use apelidos para cores, procure escrevênas no formato RGB hexadecimal. Pesquise a respeito.

.top-links li a {
   color: #FFF; /* branco */
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pessoal, boa noite, estou tentando alterar o mesmo menu (cor da letra) citado acima e não estou conseguindo, eu consigo alterar o tamanho da letra, alterar a margem mas a cor não estou conseguindo, alguém pode me auxiliar?

Segue fonte para avaliação:

<div class="shop-access">

<div>

<ul>

<li class="first">

<a title="Minha Conta" href="https://minhamobil.lojablindada.com/customer/account/?SID=49qr238s9pqc1tj62tj12cpbp6">Minha Conta</a>

</li>

<li>

<a class="top-link-wishlist" title="Minha Lista de Desejos" href="https://minhamobil.lojablindada.com/wishlist/?SID=49qr238s9pqc1tj62tj12cpbp6">Minha Lista de Desejos</a>

</li>

<li>

<a class="top-link-cart" title="Meu Carrinho" href="http://www.minhamobilia.com.br/checkout/cart/">Meu Carrinho</a>

</li>

<li>

<a class="top-link-checkout" title="Fechar Compra" href="http://www.minhamobilia.com.br/checkout/">Fechar Compra</a>

</li>

<li class=" last">

<a title="Entrar" href="https://minhamobil.lojablindada.com/customer/account/login/?SID=49qr238s9pqc1tj62tj12cpbp6">Entrar</a>

</li>

</ul>

</div>

</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Por favor, na próxima vez coloca os códigos dentro da tag code ou clica em <> ali no editor pra inserir código. Fica horrível ler assim :(

 

Por que determinou uma class pra cada link? Vai determinar uma cor específica pra cada um? Porque se não for, não é necessário.

 

Então Naynay, leu o post do Henrique Barcelos?

.top-links li a {
   color: #FFF; /* branco */
}

Pra "customizar" links deve se usar a SEMPRE: a:link, a:hover, a:active, ou simplesmente a para todos (link normal, link ao passar o mouse e link ativo).

 

Vou te explicar o código do Henrique:

.top-links li a {

.top-links = class. Todos os elementos com a class .top-links ou todos os elementos dentro de um elemento que tenha essa classe.

li = todos os elementos li de .top-links.

a = link. Todos os links de todos os elementos li de todos os elementos (ou dentro de um elemento) com .top-links

{ = Depois, só determinamos os valores (o código aí de baixo é autoexplicativo):

   color: #FFF; /* branco */

} = fecha determinações.

 

Um exemplo de uso:

<div class="top-links">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
</ul>
</div>

Todos os links desse meu menu vão ser brancos.

 

Simples. Agora é só adaptar.

 

Se continuar com dúvidas...

:seta: http://www.w3schools.com/css/css_link.asp

 

:bye:

Compartilhar este post


Link para o post
Compartilhar em outros sites
Não use apelidos para cores, procure escrevênas no formato RGB hexadecimal.
Por quê? Poderia me explicar :unsure:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Diéssica, desde já agradeço o retorno.

Sobre as class que comentaste, esse código é de uma loja virtual, não tenho como alterar.

Estou usando o seguinte código CSS para alterar:

 

.shop-access ul li a {
font: 12px  Verdana,Helvetica,sans-serif;
color: #000;
}

 

Teóricamente com esse código deveria alterar o tamanho da letra, o estilo da letra e a cor, mas o que está acontecendo é que só consigo alterar o tamanho e estilo a cor não estou conseguindo.

Você saberia me dizer por que?

Abraço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Adiciona isso no início do CSS:

a:link {
color:#F00;
}
a:hover {
color:#FFF;
}

E vê comos os links vão se comportar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Que estranho.. Posta o código HTML e CSS (de preferência completo), deve ter algo determinando a formatação desses links antes.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá, não surtiu efeito nenhum...

Alguém mais pode me ajudar?

obrigado.

 

Que estranho.. Posta o código HTML e CSS (de preferência completo), deve ter algo determinando a formatação desses links antes.

Ok, logo mais a noite extraio o HTML e posto aqui.

Obigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.