Changer la couleur de certains liens (menus et pieds de page) [RESOLU]

[flyman30]

Bonjour,

J'utilise le thème classic prestashop 1.7.2.4 j'ai modifié les couleurs du thème en utilisant custom.css.

Le header et le pied de page sont de couleur vert foncé #234843 je voudrais donner du contraste au liens qui sont dans ces parties mais si je leurs donne la couleur blanche ou gris clair, ça modifie également les liens qui sont dans la page qui elle est de couleur claire et ils deviennent alors quasi invisible... Je suis donc obligé de mettre des liens de couleurs un peu plus foncé ce qui limite le contraste...

Ma question est : est-il possible dans ce thème par défaut de ne changer la couleur que des liens du header et du footer ? moi je sèche !

Je précise que le site est en cours de dévelopement en local, il n'est pas en ligne

Edited January 12, 2018 by flyman30
[RESOLU] (see edit history)

[Ryan Hidri]

si tu te connais un peu en css, tu devrais mentionner les elements parents de l ement concerné (ou s il a un ID) pour ne pas toucher tous les elements

exemple :

.classe_div p.classe_parag span { color:red;}

je t explique l exemple : on veut mettre l element span en rouge, si on ne met pas le chemin excat vers cet element en particulier, tous les span seront en rouge

donc on vise seulement le span qui se trouve sous un paragraphe qui a la classe "classe_parag" et qui se trouve a son tour sous une div qui a la classe "classe_div"

[flyman30]

Merci mais dans le cas qui me préoccupe c'est l'élément a  par exemple on trouve ceci :

a, #footer a, #footer .h1, #footer .h2, #footer .h3, .block-contact .block-contact-title, .linklist .blockcms-title a {color: #ffffff!important;text-decoration: none;}

si j'enlève a et que je mets :

#footer a, #footer .h1, #footer .h2, #footer .h3, .block-contact .block-contact-title, .linklist .blockcms-title a {color: #ffffff!important;text-decoration: none;}

a{color:#000000;}

Ça ne fonctionne pas ...

[Ryan Hidri]

essaye de mettre

.linklist .blockcms-title a {color:white;}

ou bien l hierarchie des elements html parents de l element a puis color white comme je t aimontré dans l exemple

et si tu peux faire une capture d ecran des elements html ce sera bien

je pourrai mieux t aider peut etre

[flyman30]

Ça ne fonctionne pas ! 

 

[Ryan Hidri]

essaye ca stp

#header .header-nav #contact-link a {color:white;}

 

[flyman30]

il y a 4 minutes, Ryan Hidri a dit :

essaye ca stp

#header .header-nav #contact-link a {color:white;}

 

Désolé mais ça ne fonctionne pas !  le style du des liens prend le pas dessus... 

[Ryan Hidri]

a mon avis, la meilleure solution est que ej t assite le soir par team viewer

ca te convient ?

[flyman30]

il y a 1 minute, Ryan Hidri a dit :

a mon avis, la meilleure solution est que ej t assite le soir par team viewer

ca te convient ?

Si tu veux mais je pense que ça ne fonctionnera pas car les liens (a)  prennent le pas  sur les tentatives de surcharge CSS  dans custom.css.

On ne peut pas faire des <span>a: color:white;</span> sans intervenir dans le code PHP me semble t-il.

Ce n'est mon premier site internet, j'ai une boutique codé par moi même en ASP il y a 10 ans, et des sites associatifs, mais là je peux mettre les mains dans le code...

[Ryan Hidri]

toucher au code est le dernier recours

c'est ce que je te recommande

je te contacte en privé

[Mediacom87]

Bonjour,

je viens de tester avec le même template que vous et je n'ai pas eu de soucis pour surcharger le design puisque custom.css prend le dessus sur le theme.css.

en ajoutant simplement :

#header {
	background: #004400;
	color: #fff;
}
#header a {
	color: #fff;
}
#header .header-top a[data-depth="0"] {
	color: #fff;
	text-transform: uppercase;
}
#header .dropdown .expand-more {
	color: #fff;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

j'obtiens ce résultat

Il y a des choses à améliorer mais en faisant étape par étape ce se passe pas trop mal.

[flyman30]

Merci à tous les deux, Mediacom87 m'a mis sur la piste et j'ai réussi a faire ce que je voulais 

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
#header {background:#234843;color:#fff;}
#header .header-nav #contact-link a{color:#fff;}
#header .header-nav .user-info a{color:#fff;}
#header a {color:#000;}
#header a:hover {color:#629900;}
#header .header-top a[data-depth="0"]{color:#fff;text-transform: uppercase;}
#header .dropdown .expand-more{color:#fff;cursor:pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
#header .header-nav .cart-preview.active i, #header .header-nav .cart-preview.active a {color: #000!important}
#header .header-nav .cart-preview.active a, #header .header-nav .cart-preview.active i {color: #color: #fff;}
#header .material-icons {color: #fff;}
#header .header-nav .blockcart .header {margin-top: .125rem;color: #000;}

#wrapper .breadcrumb{background: #234843; padding: 5;text-decoration: none;font-weight: 700;}
#wrapper .breadcrumb li:last-child{content: "/";color: #ffffff;margin: 0;}
.material-icons {color: #fff;}

.block-categories {background: #234843!important;}
.block-categories a {color: #fff;}
.block-categories a:hover {color: #629900;}
.material-icons {color: #fff;}
    
#products .product-miniature .discount-percentage, #products .product-miniature .on-sale, #products .product-miniature .online-only, #products .product-miniature .pack, #products .product-miniature .product-flags .new, .featured-products .product-miniature .discount-percentage, .featured-products .product-miniature .on-sale, .featured-products .product-miniature .online-only, .featured-products .product-miniature .pack, .featured-products .product-miniature .product-flags .new, .product-accessories .product-miniature .discount-percentage, .product-accessories .product-miniature .on-sale, .product-accessories .product-miniature .online-only, .product-accessories .product-miniature .pack, .product-accessories .product-miniature .product-flags .new, .product-miniature .product-miniature .discount-percentage, .product-miniature .product-miniature .on-sale, .product-miniature .product-miniature .online-only, .product-miniature .product-miniature .pack, .product-miniature .product-miniature .product-flags .new { background-color: #629900;} 
li.product-flag  {background: #629900;}
li.product-flag{color:#000;}
.product-price {color: #000;display: inline-block;}
.btn-primary {color: #000;background-color: #629900;border-color: transparent;}
.h1, .h2, .h3 {text-transform: uppercase;color: #000;}
Tax-shipping-delivery-label {font-size: .8125rem;color: #000;}
.material-icons {color: #fff;}
.bootstrap-touchspin .input-group-btn-vertical .material-icons {background-color:#629900;}
.remove-from-cart .material-icons {color: #000;}

#footer a, #footer .h1, #footer .h2, #footer .h3, .block-contact .block-contact-title, .linklist .blockcms-title {color: #fff!important;text-decoration: none;}
.block_newsletter p {padding-top: .625rem;color: #fff;}
.block-contact {border-left: 2px solid #fff;padding-left: 3rem;color: #fff;}