28173 sujets

CSS et mise en forme, CSS3

Changement de la coul. du fond des pages du blog par l'internaute

Bonjour,
Mon blog (Wordpress) sera composé de nombreuses et longues Pages de texte (CMS).
Pour ne pas trop décourager l'internaute, je vais utiliser un maximum d'éléments de confort et d'interactivité texte (notes, pliage-dépliage de partie de texte, encarts, lettrines, ...).
Mais je voudrais pouvoir permettre à l'internaute de pouvoir choisir entre plusieurs couleurs de fond (et pourquoi pas de police).
Imaginer 4 ou 5 rectangles de couleur dans le Widget à cliquer pour changer la couleur du fond des pages (pas d'articles) est-il envisageable ? Le CSS(3) doit forcément être accompagné de JavaScript (que je ne connais pas vraiment) ?
Avez-vous un piste ou un exemple de ce type ?
Merci pour vos avis.
Bon, eh bien le peu que j'ai connu est bien perdu ;-(
J'ai déjà tenté de faire fonctionner une page html avec les 2 parties du code.
Les boutons sur la page web ne réagissent pas avec ceci :
<!DOCTYPE html>
<html>	
 <HEAD>
<SCRIPT LANGUAGE="JavaScript">
$('#rouge').click(function () {
    $('body').css('background-color', 'red');
});
$('#vert').click(function () {
    $('body').css('background-color', 'green');
});
$('#bleu').click(function () {
    $('body').css('background-color', 'blue');
});
</script>
</HEAD>

<BODY>
<button id="rouge">Rouge</button>
<button id="vert">Vert</button>
<button id="bleu">Bleu</button>
</BODY>
</html>

Quand je pense qu'il me faut ensuite faire fonctionner ça dans un blog Wordpress en mettant les boutons sur la droite (Widget) pour activer les Pages (opposées aux articles).
J'ai du boulot...
Modifié par 6l20 (30 May 2013 - 18:21)
Rosa_Luxembourg a écrit :
Bon, eh bien le peu que j'ai connu est bien perdu ;-(
J'ai déjà tenté de faire fonctionner une page html avec les 2 parties du code.
Les boutons sur la page web ne réagissent pas avec ceci :
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;HEAD&gt;
&lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;
$('#rouge').click(function () {
$('body').css('background-color', 'red');
});
$('#vert').click(function () {
$('body').css('background-color', 'green');
});
$('#bleu').click(function () {
$('body').css('background-color', 'blue');
});
&lt;/script&gt;
&lt;/HEAD&gt;

&lt;BODY&gt;
&lt;button id=&quot;rouge&quot;&gt;Rouge&lt;/button&gt;
&lt;button id=&quot;vert&quot;&gt;Vert&lt;/button&gt;
&lt;button id=&quot;bleu&quot;&gt;Bleu&lt;/button&gt;
&lt;/BODY&gt;
&lt;/html&gt;
/////////////
Quand je pense qu'il me faut ensuite faire fonctionner ça dans un blog Wordpress en mettant les boutons sur la droite (Widget) pour activer les Pages (opposées aux articles).
J'ai du boulot...


C'est normal que ça ne fonctionne pas, comme je l'ai dit plus haut, j'ai fait ça avec du jQuery qui est une librairie Javascript.

Pour résoudre ton soucis, il faut que tu importe la librairie en question. Tu peux le faire ainsi en mettant entre tes balises <head></head> et AVANT le script :


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


Et lorsque tu colles du code sur le forum, met-le entre les balises code et /code (avec des crochets de chaque côté) pour que ça soit plus lisible pour nous. Smiley cligne
Modifié par j0r (30 May 2013 - 18:02)
Modérateur
Bonjour Rosa,

Il faut inclure JQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#rouge').click(function () {
$('body').css('background-color', 'red');
});
$('#vert').click(function () {
$('body').css('background-color', 'green');
});
$('#bleu').click(function () {
$('body').css('background-color', 'blue');
});
  });
</script>


Edit : Grillé par j0r
Modifié par Tony Monast (30 May 2013 - 18:10)
Oui, c'est ce que j'ai fini par me dire.
Seulement, si je veux tester simplement dans une page sur ma machine, sans même lancer WampServer, ça ne peut fonctionner car la bibliothèque n'est manifestement pas appelée.
Il me faut donc tester avec mon serveur local.
Je n'arrive pas au résultat souhaité :

1• Où, dans quel(s) fichier(s), placer ces codes HTML et JS pour qu'on pour que l'internaute puisse choisir ou modifier une couleur de la partie gauche (Page), dans la partie droite (Widget), en cliquant sur un des 3 boutons ?
2• Et si je voulais garder le choix pour que les pages suivantes consultées par l'internaute affiche la même couleur choisie ?
Sujet clos
Aller à