Jump to content

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


Recommended Posts

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

accueil-1.png

Edited by flyman30
[RESOLU] (see edit history)

Share this post


Link to post
Share on other sites

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"

Share this post


Link to post
Share on other sites

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 ...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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... 

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites

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

5a44cd257ac0a_Capturedecran2017-12-2811_53_06.thumb.jpg.a36b7d3c3e504194bec56bb25374733d.jpg

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

  • Like 1

Share this post


Link to post
Share on other sites

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

/*
 * 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;}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More