Javascript changer background/fond du forum

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Internet Explorer, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonsoir tout le monde !

J'ai trouvé un code génial qui circule et permet de changer la bannière aléatoirement.
Je souhaite savoir si cela est possible mais QUE avec le background ?

Néophyte en tout, mais réussissant tout de même à savoir changer des URL, j'ai tenté de trouver le # qui sert de fond... et bien que changer, cela ne marche pas. Avez vous une idée ?

J'ai changé tous les banner et logo par background et ... rien... J'ai tenté aussi bodyline, ça ne marche pas non plus.

Code:

$(function(){

  var banner = new Array();

  banner[0] = "https://2img.net/image.noelshack.com/fichiers/2016/06/1455190213-fond23.png";
  banner[1] = "https://2img.net/image.noelshack.com/fichiers/2016/33/1471442044-background.png";

  $("#pun-logo img,#i_logo,#logo img").attr('src', banner[Math.floor(Math.random()*banner.length)]);
});

Cordialement,

[Bipo]

Re-bonjour Kaehlyth,

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Background aléatoire" et pour placement "Toutes les pages".

Insérez-y le code suivant :

Code:

$(function() {
var a = [
"https://2img.net/image.noelshack.com/fichiers/2016/06/1455190213-fond23.png",
"https://2img.net/image.noelshack.com/fichiers/2016/33/1471442044-background.png",
];
$("body").css("background-image",'url("'+a[Math.floor(Math.random() * a.length)]+'")')
});

N'oubliez pas de cliquer sur le bouton afin de sauvegarder les modifications.

Pour évitez que les images se répètent en scrollant le forum, vous pouvez toujours ajouter ceci dans la feuille de style CSS de votre forum :

Code:

body {
 background-attachment:fixed;
}

Bonne fin de journée sur Forumactif.
Bipo.

[Kaehlyth]

Merci beaucoup,

Encore une enquête de résolue !
C'est un palliatif au sélecteur de thème.

Peut-être pourriez vous m'en dire plus : est-il possible de faire un "sélecteur de thème" qui ne change QUE le fond d'écran à la sélection ?
C'est la raison pour laquelle je n'ai fait qu'un aléatoire car la plupart des solution, il faut faire un CSS qui change toute la mise en page...

[Bipo]

Re,

Il faut partir de ce tutoriel : https://forum.forumactif.com/t308631-selecteur-de-style ! Par contre, il faut avoir un compte sur Archive-Host pour héberger des fichiers CSS externes. Dans ce fichier CSS, vous faites en sorte que de modifier le fond de votre forum... :

Un premier fichier CSS avec :

Code:

body {
background-image:url(https://2img.net/image.noelshack.com/fichiers/2016/06/1455190213-fond23.png);
}

Un second fichier CSS avec :

Code:

body {
background-image:url(https://2img.net/image.noelshack.com/fichiers/2016/33/1471442044-background.png);
}


Bipo.

[MlleAlys]

Bonjour, Est-ce qu'il ne serait pas possible d'utiliser un sélecteur qui, plutôt que de charger une nouvelle css, se contente d'ajouter/modifier une classe sur le body ? Ainsi dans la css déjà existante du forum, il suffirait de quelques lignes pour appliquer le fond en fonction de la class choisie par l'utilisateur ?

[Kaehlyth]

Bonjour,

En effet je n'ai pas fait cette astuce car charger une page CSS avec "que" le code "background" me semblait "lourd".
J'étais partisane de l'idée de Mlle Alys et c'est pour ça que je suis partie sur un "fond aléatoire" à défaut de.

Merci de votre temps à tous en tous les cas !

[MlleAlys]

Aloooooors
J'ai tenté quelque chose sur mon forum test...
Franchement, je n'ai aucune idée de si c'est propre ou pas, j'en doute évidemment, cela dit ça semble fonctionner... Je ne suis pas très douée en javascript donc c'est un patchwork entre l'astuce du sélecteur de style, et des codes trouvés à droite à gauche sur internet....

Si quelqu'un qui s'y connait plus que moi passe par là, qu'il n'hésite pas à corriger mon bidouillage !  

Vous pouvez essayer sur votre forum :
- dans modules, créez un nouveau javascript
- vous pouvez le nommer "sélecteur de style"
- appliquez-le sur toute les pages
- copiez/collez le code suivant :

Code:

$(function() {
  
  /*appliquer au forum le style en mémoire dans le cookie s'il existe*/
  if ($.cookie("sstyle")) {
    $("body").attr("class", $.cookie("sstyle"));
  }
  
  /*intégrer le sélecteur à la page du forum*/
  $("body").prepend('<select id="sstyle" onChange="changestyle(this.value);"><option value="">Style par défaut</option></select>');
    
  /*liste des styles à ajouter au sélecteur*/
  addstyle("Nom style 2", "style2");
  addstyle("Nom style 3", "style3");
  addstyle("Nom style 4", "style4");
  
  /*affichage du style déjà choisi sur le sélecteur en fonction du cookie s'il existe*/
  if ($.cookie("sstyle")) {
    $('#sstyle option[value="' + $.cookie("sstyle") + '"]').attr("selected", "selected");
  }

});


/*fonction qui ajoute les styles au sélecteur*/
function addstyle(nom, styleclass) {
  $("#sstyle").append('<option value="' + styleclass + '">' + nom + '</option>');
};
 
/*fonction qui change la class du body et le cookie lors de l'utilisation du sélecteur*/
function changestyle(styleclass) {
  $("body").attr("class", styleclass);
  $.cookie("sstyle", styleclass, {expires:365});
};

- enregistrez.


Donc,
Actuellement, ce code ajouter un sélecteur au début du "body" de la page (début de la ligne 9 du code : $("body").prepend(). Il faudra certainement changer l'endroit d'insertion, en fonction de là où vous voulez l'afficher.

Le sélecteur créé par le script contient 4 styles, qui sont nommés ici "style par défaut", "Nom style 2", "Nom style 3" et "Nom style 4" (la ligne 9 crée le style par défaut de valeur vide, puis les lignes 12, 13 et 14 permettent de créer les syles 2, 3 et 4.
A chaque style est associé une class qui est appliquée au body de la page :
addstyle("Nom style 2", "style2"); : le style s'appelle "Nom style 2" dans le sélecteur, et une fois sélectionné applique la class "style2" au body de la page.
Vous pouvez bien sûr supprimer ou ajouter des styles, changer le nom et la class qui leur est associée, à ces lignes là.

Ainsi dans votre css, vous pourrez ensuite utiliser ces class pour appliquer le style voulu, et notamment changer le fond.

Le script enregistre également le style choisi dans un cookie, afin de le réappliquer à chaque actualisation ou lors de la navigation sur le forum.


BREF, ça semble fonctionner chez moi, j'espère que ce que j'ai fait n'est pas trop moche !


EDIT PS : Cela dit si c'est pour le problème du fond décalé en fonction de la taille de l'écran, nul besoin de ce script, au contraire, il vous suffit de préciser dans votre css que l'image de fond doit être centrée avec background-position: center;.

[Kaehlyth]

Bonsoir,

je n'ai pas le temps de tester votre code mais j'ai hâte demain !

Pour le CSS actuel de mon fond de page, j'ai ceci et j'ai exactement le

Code:

background-position: center;

Merci encore de m'aider !!

Code:

/***************************Encadrement header + footer ****************************/
/* Pour l'adaptrivité du design par rapport à l'écran. */
.bodylinewidth {width: 100%;  background-attachment:fixed;}
/* Permet que l'intérieur du corps de page soit plus petit que le cadre */
#page-body .three-col {margin: auto;width: 770px;}
/* Permettra de placer la bannière et le footer correctement. */
.bodyline {position: relative;z-index: 2;padding: 0px;}
/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran  */
.bodyline:after {
content: "";display: block;height: 442px;width: 100%;margin: auto;background-image: url("");background-position: center;
background-repeat: no-repeat;margin-top: -500px;}

Edit à 22:08 : ça marche totalemmmmeeeennnnttttt !!!!

[MlleAlys]

Votre "background-position: center;" est appliqué à ".bodyline:after" et non au "body" de la page.
Je vous avoue que j'aurais fait un peu de ménage en supprimant tout ce css !
Cela ne changera rien pour l'instant, seulement remettre la largeur du forum à ce qui est prévu dans le panneau (rendez-vous dans général > configuration pour remettre 770 à la place de 70% comme largeur du forum)

Puis ajouter le code css pour centrer l'image de fond du body :

Code:

body {
  background-position: center;    /*centrer l'image de fond de page*/
}


Si par la suite vous souhaitez une bannière plus large que le corps de votre forum, il suffira de modifier le template pour la sortir du cadre.

[Kaehlyth]

Je m'excuse si ce CSS est chaotique, c'est un vieux code que je n'ose plus toucher depuis longtemps...
Comme déjà expliqué en MP, je reprends petit à petit, je mets 3 jours pour quelque chose d'expliquer sous mes yeux et que vous trouvez en 5 minutes, hihi...

Je ferai le nettoyage un jour, lorsque j'aurai les bases pour tout comprendre.

[MlleAlys]

vous pouvez ajouter le code ci-dessus sans supprimer les autres ^^

[Kaehlyth]

J'aimerai mais parfois, le code CSS et le JS ne se chargent plus sur le forum et c'est un mystère de boule de gomme...
Je subit ça depuis que j'ai ajouté le CSS pour le sélecteur.
ça a marché puis...
Je sais pas, ça a cassé !

Et là c'est revenu avec un CTRL + F5 ... Mais je ne peux plus sélectionner.

Code:

#sstyle {
    position: fixed;
    left: 80px;
    border-radius: 3px;
    box-shadow: 0px 0px 2px #BD91C2;
}
.style2 {
background-image:url(https://2img.net/image.noelshack.com/fichiers/2016/06/1455190213-fond23.png);
}
.style3 {
background-image:url(https://2img.net/image.noelshack.com/fichiers/2016/33/1471442044-background.png);
}

En tous les cas, vous avez été formidable, merci !

[MlleAlys]

cassé dans quel sens ? Personnellement je n'arrive pas à cliquer dessus à cause de la superposition des éléments (il est en dessous de.
Essayez peut être de préciser z-index: 999; dans le css de #sstyle.

Ou alors ligne 9 du code javascript, vous pouvez replacer "body" par "#page-body" pour que le sélecteur soit dans le corps du forum.

[Kaehlyth]

Il se trouve que si je charge le site :

Spoiler:

Et avec CTRL + F5 ...  

Spoiler:

[MlleAlys]

De mon côté je vois le deuxième screen (enfin, avec mon écran plus petit donc tout décalé et superposé).
Si c'est lorsque vous avez modifié le css que cela a posé souci, peut être y a-t-il une erreur dans votre code css.

[Kaehlyth]

Non absolument pas, il se trouve que j'ai cela au petit bonheur la chance.
Un retard d'actualisation sans doute.

Je vais utiliser l'astuce :

Code:

background-position: center;    /*centrer l'image de fond de page*/

pour centrer toutes les images. Merci à vous !

[MlleAlys]

Videz bien le cache de votre navigateur au cas où ! ^^

[Kaehlyth]

Oui, c'est ce que fait CTRL+F5 ou CTRL+R !
(Pour ceux qui liront et auraient le même soucis... hihi).