Résolu Sélecteur de styles ? (le visiteur choisit la couleur)

Bonjour ^^ 

Je me demandais si il était possible de faire un sélecteur de style sur son blog pour que le visiteur puisse choisir les couleurs qu'il veut sur mon blog. (J'ai déjà vu ce système sur une plateforme de forums) On devait héberger les feuilles css (ce que je peux faire) et les mettre dans le sélecteur. Le problème c'est que le code utilisé était un javascript qui  plaçait le sélecteur en haut de la page, et par ailleurs il ne fonctionne pas ici. 

Y a-t-il des connaisseurs qui peuvent m'aider ? ^^
Merci d'avance

Salut!

Peux-tu coller ici, ce code js, qu'on regarde un peu ....!

Ok, le voici: 

$("head").append('<link rel="stylesheet" type="text/css" id="tstyle" />');

if(my_getcookie("sstyle")) { $("#tstyle").attr("href", my_getcookie('sstyle')); }

function addstyle(nom,lien) { $("#sstyle").append('<option value="'+lien+'">'+nom+'</option>'); } 

function changestyle(cssurl) { my_setcookie('sstyle',$('#tstyle')[0].href=cssurl,1,0); $('#frame_chatbox,iframe[name=smilies]').contents().find('#tstyle').attr('href',cssurl); } 

$(function(){

  $("#frame_chatbox").load(function(){

    $("#frame_chatbox").contents().find("head").append($("#tstyle").clone());

  });

  $("iframe[name=smilies]").load(function(){

    $("iframe[name=smilies]").contents().find("head").append($("#tstyle").clone()).append('<style type="text/css">body{margin:0!important;}</style>');

  });

  $("body").prepend('<select id="sstyle" onChange="changestyle(this.value);this.selectedIndex=0;"><option>Choisir un style</option></select>');

  addstyle("Explorateurs","http://pokemon.lebeaufourbi.fr/dev/vert.css");

  addstyle("Hors la loi","http://pokemon.lebeaufourbi.fr/dev/rouge.css");

  addstyle("Sac à trésors","");

});

Comme précisé plus haut, il s'agissait d'un code pour une plateforme de forums spécifique ^^

Bonjour Flaura, 

ton code mis a été tronqué...

Tu voudrais que le visiteur puisse choisir entre plusieurs thèmes avec plusieurs éléments qui diffèrent ( le fond du blog, la couleur des textes, etc..) ?

Sinon, j'ai cet article déjà écrit  pour choisir entre plusieurs couleurs mais d'un seul élément du thème..

http://bleulezard.eklablog.com/gadget-choix-couleur-des-liens-par-le-visiteur-a115139582

J'ai bidouillé un truc du même genre...mais vraiment bidouillé !!!

Voir ici

Je me permets de reposter ce message, puisque personne n'a répondu

En fait, j'aimerais faire quelque chose comme je l'ai fait sur ce forum test: http://flauratest.forumactif.org/ avec des feuilles de style pour changer le css. 

Bonjour,

@ Flaura : tu vois pas les réponses de Maximum 34 et Mike GMZ juste au-dessus ?

Bonjour ^^ j'ai réfléchi, mais comme je n'ai aucune connaissance en Javascript, j'ai essayé de voir, mais j'ai besoin d'aide.

Donc, d'après le code de Mike GMZ, je souhaite faire en sorte qu'à la place de modifier un élément (avec par exemple: $('body').style.background=' red'; )

Une feuille css soit appliquée. Comment pourrais-je faire ça, au lieu d'intégrer dans le code les éléments du css un à un ? 

(je me suis permise de re-poster le message, étant donné que je n'ai plus de réponse depuis pas mal de temps)

Bonjour à tous,

Je reprends ce post, car ne connaissant rien au javascript je ne doute pas qu'un "pro" passant à tout hasard par là pourrait peut-être m'éclairer.

"Rebondissant" sur les codes de Mike (adoptés pour la couleur de fond), je me suis dit, pourquoi au lieu de changer la couleur de fond du blog ne pas essayer également de remplacer l'image lorsqu'il s'agit évidemment le cas échéant d'une image.

Ayant trouvé un code que j'ai réussi à adapter (il fonctionne très bien), le visiteur peut donc faire son choix entre 2 images.

Mais voilà le bémol, parce que évidemment, il y en a un  c'est qu'avec ce code, c'est l'image de fond du body qui est remplacée et non celle du blog (#background). De ce fait, même si l'image est adaptée au format du blog le fond d'écran reste blanc (plutôt désagréable).

Je mets ci-dessous les codes utilisés.

<style>
.fondblog  {
position: absolute;
top: 60px;
left: 50%;
margin-left: -498px;
color: #625340;
font-size: 9pt;
list-style-type: none;
opacity: 0.5;
}
.fondblog li a:hover {
color: #625340;
}
.fondblog:hover  {
opacity: 1;
}
</style>

<ul class="fondblog"><li  title="Cliquer pour choisir le fond" onclick="changeImage()" type="button" value="Fond d'écran" /><a>Choisir le fond du blog</a></li></ul>

<script type="text/javascript">// <![CDATA[
var z = new Image();
z.src = "http://ekladata.com/6yvkRsIJlrBzMKn3u6b6gMUSwbo/imagebody.jpg";
document.body.background = z.src;
// ]] ></script>
<script type="text/javascript">// <![CDATA[
function changeImage()
{
  var v = document.body.background;
     if(v.indexOf("imagebody") != -1)
     v = "http://ekladata.com/K0q0aIXi39A39j2h_IIqJ7poTrY/fond3.jpg";
  else
     v = "http://ekladata.com/6yvkRsIJlrBzMKn3u6b6gMUSwbo/imagebody.jpg";
     var z = new Image();
     z.src = v;
     document.body.background = z.src; 
}
function setImage()
{
 var z = new Image();
 z.src = "http://ekladata.com/6yvkRsIJlrBzMKn3u6b6gMUSwbo/imagebody.jpg";
 document.body.background = z.src;
}
window.onload=setImage;
// ]] ></script>

En fin de compte, ma question est la suivante : Est-il possible en s'inspirant de ce code de modifier uniquement le background du blog tout en attribuant une couleur de fond à l'écran.

Merci par avance à celui ou celle qui pourra m'en dire plus, tous mes essais en ce sens étant restés infructueux.

Bonjour Colette95,

Bon, entre nuls du JavaScript on peut partager les "lacunes de nos ignorances"

1ère remarque:
dans le html du blog, la balise <body ...> , contient une <div id="body">, qui elle même contient une <div id="background">

2ème remarque:
document.body.background = z.src;  me semble signifier : donner la valeur de la variable z.src au fond (background) de l'élément body  du document.

3ème remarque:
$('background'), dans Eklablog, cible l'élément qui à pour identifiant le mot background.  (en css ça correspond au #background)

Donc:
Si ma 2ème remarque est valable, je te propose d'essayer
$('background') = z.src    en remplacement de    document.body.background = z.src

Si ça peut aussi inspirer quelque chose d'autre.. Bonne chance !

Dans une autre vie, j'apprendrai le javascript !