Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?
Détails techniques
Version du forum : phpBB2Poste occupé : Administrateur
Navigateur(s) concerné(s) : Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://unebouteillealamer.pro-forum.fr/forum
Description du problème
Bonjour ! Tout est dans le titre..Sur un template de Noel, je souhaiterais que le visiteur puisse choisir entre quelques couleurs pour le fond (avoir du vert, ou du rouge, ou du blanc...).
Il faudrait des petits carrés de couleurs où le visiteur puisse cliquer pour choisir.
Cela est-il possible ?
Fil'
Dernière édition par Fil-de-faire le Mer 21 Nov 2018 - 8:25, édité 1 fois
Re: Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?
Bonjour
Oui c'est possible
Voici une base que vous pouvez modifier selon vos envies.. du coup j'ai ajouté un bouton pour la neige...mais on peut l'enlever..
https://jsbin.com/javeyijopa/edit?html,css,js,output
Il y a tout les codes nécessaires pour le mettre en place sur votre forum.
Vous n'avez pas précisé si c'est juste pour l'accueil ou toutes les pages...
On peut vous aider et détailler le placement si nécessaire
Cdt.
Oui c'est possible
Voici une base que vous pouvez modifier selon vos envies.. du coup j'ai ajouté un bouton pour la neige...mais on peut l'enlever..
https://jsbin.com/javeyijopa/edit?html,css,js,output
Il y a tout les codes nécessaires pour le mettre en place sur votre forum.
Vous n'avez pas précisé si c'est juste pour l'accueil ou toutes les pages...
On peut vous aider et détailler le placement si nécessaire
Cdt.
Re: Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?
Bonjour Adam_sfp !
Tout d'abord, un grand grand merci pour votre réponse.
Je regarde vos explications qui me semblent très claires à tête reposée et reviens vers vous. C'est EXACTEMENT ce que je voulais et cette neige... elle est somptueuse ! Encore merci et à très vite !
Fil'
Tout d'abord, un grand grand merci pour votre réponse.
Je regarde vos explications qui me semblent très claires à tête reposée et reviens vers vous. C'est EXACTEMENT ce que je voulais et cette neige... elle est somptueuse ! Encore merci et à très vite !
Fil'
Re: Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?
Super si ça vous convient ;-)
Je viens juste de voir un doublon dans la partie script (j'ai surement coller en double ) cette partie en fin de script que vous pouvez enlevez
Je viens juste de voir un doublon dans la partie script (j'ai surement coller en double ) cette partie en fin de script que vous pouvez enlevez
- Code:
if (localStorage.getItem("background") != null) {
getColour = localStorage.background;
document.body.className = getColour;
}
jQuery(".c-green-button").click(function () {
setColour = "c-green"
document.body.className = setColour
localStorage.setItem("background", setColour);
});
jQuery(".c-white-button").click(function () {
setColour = "c-white"
document.body.className = setColour
localStorage.setItem("background", setColour);
});
jQuery(".c-red-button").click(function () {
setColour = "c-red"
document.body.className = setColour
localStorage.setItem("background", setColour);
});
Re: Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?
Bonjour Adam_sfp !
J'ai :
- mis le javascript et l'activé (supprimé le paragraphe faisant doublon)
- supprimé l'ancienne animation flocons
- mis la css
- mis le code sur l'index
et... rien ne se passe. Qu'ai-je oublié ?
J'ai :
- mis le javascript et l'activé (supprimé le paragraphe faisant doublon)
- supprimé l'ancienne animation flocons
- mis la css
- mis le code sur l'index
et... rien ne se passe. Qu'ai-je oublié ?
Re: Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?
Je ne suis pas experte mais je pense qu'il vaut mieux mettre le premier code dans le haut de page, pour que ce soit actif sur toutes les pages non ?
Re: Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?
Bonsoir
Oui ce n'est pas évident à mettre en place ce qui fonctionne en extérieur ne fonctionne pas toujours sur forum actif ou il peut y avoir conflit avec d'autres scripts...
On va essayer comme ceci :
le premier script qui correspond à la neige à mettre dans gestion des codes javascript sur toutes les pages.
Dans ce code au début vous pouvez personnaliser la neige dans cette partie
Ensuite on met ce 2 ème script à mettre dans gestion des codes javascript sur toutes les pages.
(ce script permet de garder en "mémoire" la couleur choisie même à l'actualisation de la page. )
Ensuite CSS dans la partie CSS
Et pour finir le HTML pour toutes les pages il faudrait passer par le template overall header
recherchez cette ligne
Et mettre le code juste après
Enregistrez et n'oubliez pas de publier.
Sinon pour l'effet uniquement sur l’accueil mettre le code HTML en page d’accueil
Cela devrait fonctionner je viens de tester sur un forum
Cdt.
Oui ce n'est pas évident à mettre en place ce qui fonctionne en extérieur ne fonctionne pas toujours sur forum actif ou il peut y avoir conflit avec d'autres scripts...
On va essayer comme ceci :
le premier script qui correspond à la neige à mettre dans gestion des codes javascript sur toutes les pages.
- Code:
window.onload = function() {
function snowFall(snow) {
snow = snow || {};
this.maxFlake = snow.MaxFlake || 50;
this.flakeSize = snow.flakeSize || 8;
this.fallSpeed = snow.fallSpeed || 2;
this.status = 0;
}
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) {
setTimeout(callback, 1000 / 60);
};
cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame;
snowFall.prototype.start = function() {
if (this.status == 1 || this.status == 4) {
return false;
}
this.status = 1;
snowCanvas.apply(this);
createFlakes.apply(this);
drawSnow.apply(this);
};
snowFall.prototype.stop = function() {
if (this.status == 2 || this.status == 0 || !this.canvas) {
return false;
}
this.pause();
this.status = 2;
this.canvas.parentNode.removeChild(this.canvas);
this.canvas = null;
};
snowFall.prototype.pause = function() {
if (this.status == 3) {
return false;
}
this.status = 3;
cancelAnimationFrame(this.loop);
};
snowFall.prototype.resume = function() {
if (this.status == 3 && this.canvas) {
this.status = 4;
this.loop = requestAnimationFrame(function() {
drawSnow.apply(that);
});
}
};
function snowCanvas() {
var snowcanvas = document.createElement("canvas");
snowcanvas.id = "snowfall";
snowcanvas.width = window.innerWidth;
snowcanvas.height = window.innerHeight;
snowcanvas.setAttribute("style", "position:fixed; top:0; left:0; z-index:1000; pointer-events:none;");
document.getElementsByTagName("body")[0].appendChild(snowcanvas);
this.canvas = snowcanvas;
this.ctx = snowcanvas.getContext("2d");
window.onresize = function() {
snowcanvas.width = window.innerWidth;
snowcanvas.height = window.innerHeight;
};
}
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
this.x = Math.floor(Math.random() * canvasWidth);
this.y = Math.floor(Math.random() * canvasHeight);
this.size = Math.random() * flakeSize + 2;
this.maxSize = flakeSize;
this.speed = Math.random() * 1 + fallSpeed;
this.fallSpeed = fallSpeed;
this.velY = this.speed;
this.velX = 0;
this.stepSize = Math.random() / 30;
this.step = 0;
}
flakeMove.prototype.update = function() {
var x = this.x, y = this.y;
this.velX *= 0.98;
if (this.velY <= this.speed) {
this.velY = this.speed;
}
this.velX += Math.cos(this.step + .05) * this.stepSize;
this.y += this.velY;
this.x += this.velX;
if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
this.reset(canvas.width, canvas.height);
}
};
flakeMove.prototype.reset = function(width, height) {
this.x = Math.floor(Math.random() * width);
this.y = 0;
this.size = Math.random() * this.maxSize + 2;
this.speed = Math.random() * 1 + this.fallSpeed;
this.velY = this.speed;
this.velX = 0;
};
flakeMove.prototype.render = function(ctx) {
var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
snowFlake.addColorStop(0, "rgba(255,255,255,0.9)");
snowFlake.addColorStop(.5, "rgba(255,255,255,0.5)");
snowFlake.addColorStop(1, "rgba(255,255,255,0)");
ctx.save();
ctx.fillStyle = snowFlake;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
};
function createFlakes() {
var maxFlake = this.maxFlake, flakes = this.flakes = [], canvas = this.canvas;
for (var i = 0; i < maxFlake; i++) {
flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed));
}
}
function drawSnow() {
var maxFlake = this.maxFlake, flakes = this.flakes;
ctx = this.ctx, canvas = this.canvas, that = this;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var e = 0; e < maxFlake; e++) {
flakes[e].update();
flakes[e].render(ctx);
}
this.loop = requestAnimationFrame(function() {
drawSnow.apply(that);
});
}
var snow = new snowFall({maxFlake:200});
var get = function(id) {
return document.getElementById(id);
}, oStart = get("snowStart"), oStop = get("snowStop"), oPause = get("snowPause"), oResume = get("snowResume");
oStart.addEventListener("click", snow.start.bind(snow));
oStop.addEventListener("click", snow.stop.bind(snow));
};
Dans ce code au début vous pouvez personnaliser la neige dans cette partie
- Code:
this.maxFlake = snow.MaxFlake || 50; // ICI LE NOMBRE DE FLOCONS
this.flakeSize = snow.flakeSize || 8; // ICI LA TAILLE MAX
this.fallSpeed = snow.fallSpeed || 2; // ICI LA VITESSE
Ensuite on met ce 2 ème script à mettre dans gestion des codes javascript sur toutes les pages.
(ce script permet de garder en "mémoire" la couleur choisie même à l'actualisation de la page. )
- Code:
$(function(){if(localStorage.getItem("background")!=null){getColour=localStorage.background;document.body.className=getColour}jQuery(".c-green-button").click(function(){setColour="c-green";document.body.className=setColour;localStorage.setItem("background",setColour)});jQuery(".c-white-button").click(function(){setColour="c-white";document.body.className=setColour;localStorage.setItem("background",setColour)});jQuery(".c-red-button").click(function(){setColour="c-red";document.body.className=setColour;
localStorage.setItem("background",setColour)})});
Ensuite CSS dans la partie CSS
Et pour finir le HTML pour toutes les pages il faudrait passer par le template overall header
recherchez cette ligne
- Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
Et mettre le code juste après
- Code:
<div class="colorBack">
<div class="c-green-button"></div>
<div class="c-white-button"></div>
<div class="c-red-button"></div>
</div>
<div class="Buttonsnow">
<div class="c-snowon-button" id="snowStart">ON</div>
<div class="c-snowoff-button" id="snowStop">OFF</div>
</div>
Enregistrez et n'oubliez pas de publier.
Sinon pour l'effet uniquement sur l’accueil mettre le code HTML en page d’accueil
Cela devrait fonctionner je viens de tester sur un forum
Cdt.
Re: Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?
C'est juste parfait et correspond complètement à mes attentes... je vous invite à regarder le résultat !
Vos explications sont si claires... j'ai l'impression d'être super forte et d'avoir fait quelque chose d'extraordinaire !
...
Une dernière question : que puis-je faire pour vous remercier ?
Vos explications sont si claires... j'ai l'impression d'être super forte et d'avoir fait quelque chose d'extraordinaire !
...
Une dernière question : que puis-je faire pour vous remercier ?
Re: Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?
Bonsoir
Mais vous êtes super forte et vous avez fait quelque chose d'extraordinaire !
C'est en parfaite adéquation avec votre forum et le dosage de neige est parfait
Vous me remerciez amplement en mettant ce code sur votre forum
Mais vous êtes super forte et vous avez fait quelque chose d'extraordinaire !
C'est en parfaite adéquation avec votre forum et le dosage de neige est parfait
Vous me remerciez amplement en mettant ce code sur votre forum
Re: Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?
wow !!! Très belle neige... Adam.
Dommage, ma page de script est full pin. Je l'aurais installé avec plaisir !
Dommage, ma page de script est full pin. Je l'aurais installé avec plaisir !
Sujets similaires
» permettre aux visiteurs de postez sur le forum
» Permettre aux visiteurs de télécharger les contenus
» Permettre de changer de design aux membres et visiteurs
» Comment permettre aux visiteurs de voir les images du forum?
» Quelle fonction va permettre à tous les visiteurs de lire un forum donné?
» Permettre aux visiteurs de télécharger les contenus
» Permettre de changer de design aux membres et visiteurs
» Comment permettre aux visiteurs de voir les images du forum?
» Quelle fonction va permettre à tous les visiteurs de lire un forum donné?
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum