Eklablog Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science
Editer l'article Suivre ce blog Administration + Créer mon blog
MENU

Publicité

Modif couleurs par visiteur

Un p'tit clavier ou zapette, pour modifier certaines couleurs du blog...!
Quoi ...????? C'est juste pour le fun !!!!!!

fond de page en:


header en:


menu1 en:

 

Code CSS


#choix-couleur li {
 float: left;
 margin-right:20px;
 margin-left:1px;
 list-style-type: none;
 box-shadow:6px 6px 10px black;
 transition:1s;
 }
 #choix-couleur li:hover {
 box-shadow:none;
 transition:0.5s;
 }
 #coul {
 max-width:200px;
 height:260px;
 margin-bottom:20px;
 background-color:rgba(51, 51, 51, 0.55);
 border:2px solid black;
 border-radius:15px;
 box-shadow:6px 6px 10px black;
 }
 #coul p {
 margin:10px auto;
 max-width:130px;
 text-align:center;
 color:grey;
 padding:0px;
 border:2px solid black;
 border-radius:5px;
 background-color:white;
 box-shadow:6px 6px 10px black;
 }

Code HTML


<div id="coul">
<p>fond de page en:</p>
<ul id="choix-couleur">
<li><a style="color: red;" onclick="$('body').style.background=' red';$('header').style.background=' yellow'" href="#"><span style="background: red;">rou</span></a></li>
<li><a style="color: green;" onclick="$('body').style.background=' green'" href="#"><span style="background: green;">ver</span></a></li>
<li><a style="color: yellow;" onclick="$('body').style.background=' yellow'" href="#"><span style="background: yellow;">jau</span></a></li>
</ul>
<br />
<p>header en:</p>
<ul id="choix-couleur">
<li><a style="color: red;" onclick="$('header').style.background=' red'" href="#"><span style="background: red;">rou</span></a></li>
<li><a style="color: green;" onclick="$('header').style.background=' green'" href="#"><span style="background: green;">ver</span></a></li>
<li><a style="color: yellow;" onclick="$('header').style.background=' yellow'" href="#"><span style="background: yellow;">jau</span></a></li>
</ul>
<br />
<p>menu1 en:</p>
<ul id="choix-couleur">
<li><a style="color: red;" onclick="$('menu1').style.background=' red'" href="#"><span style="background: red;">rou</span></a></li>
<li><a style="color: green;" onclick="$('menu1').style.background=' green'" href="#"><span style="background: green;">ver</span></a></li>
<li><a style="color: yellow;" onclick="$('menu1').style.background=' yellow'" href="#"><span style="background: yellow;">jau</span></a></li>
</ul>
</div>
Publicité
Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
C
Bonjour Mike,<br /> Super tuto et quelle bonne idée ! A partir de tes codes, que j'ai un peu bidouillés, car je ne connais absolument pas le javascript, j'ai réussi à installer cette fonction et je trouve cela très sympa et plutôt confortable pour le visiteur qui a du mal à supporter les fonds de couleur claire. Maintenant il n'a plus qu'à choisir !...<br /> Merci beaucoup pour ce partage ! 
Répondre
D
Mike tu es fortiche !<br /> J'ai vu ton com. dans le forum.<br /> Bon dimanche. Dani
Répondre
M
test com 001
Répondre