Javascript changer background/fond du forum

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Javascript changer background/fond du forum

Message par Kaehlyth Sam 30 Avr 2022 - 21:05

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. Embarassed

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,
Kaehlyth

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Javascript changer background/fond du forum

Message par Bipo Dim 1 Mai 2022 - 18:33

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 :enreg: 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.
Bipo

Bipo
Rédactif
Rédactif

Messages : 2543
Inscrit(e) le : 23/09/2010

Voir le profil de l'utilisateur
Bipo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par Kaehlyth Dim 1 Mai 2022 - 18:45

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...
Kaehlyth

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par Bipo Dim 1 Mai 2022 - 18:58

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.
Bipo

Bipo
Rédactif
Rédactif

Messages : 2543
Inscrit(e) le : 23/09/2010

Voir le profil de l'utilisateur
Bipo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par MlleAlys Dim 1 Mai 2022 - 19:09

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 ?


Dernière édition par MlleAlys le Dim 1 Mai 2022 - 19:25, édité 1 fois
MlleAlys

MlleAlys
Membre actif

Messages : 5089
Inscrit(e) le : 12/09/2012

Voir le profil de l'utilisateur
MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par Kaehlyth Dim 1 Mai 2022 - 19:14

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 !
Kaehlyth

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Javascript changer background/fond du forum

Message par MlleAlys Dim 1 Mai 2022 - 20:51

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 !  Razz

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 ! Razz


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;. Wink


Dernière édition par MlleAlys le Dim 1 Mai 2022 - 22:16, édité 3 fois (Raison : correction des numéros de lignes)
MlleAlys

MlleAlys
Membre actif

Messages : 5089
Inscrit(e) le : 12/09/2012

Voir le profil de l'utilisateur
MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par Kaehlyth Dim 1 Mai 2022 - 21:46

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 !!!! cheers cheers
Kaehlyth

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par MlleAlys Dim 1 Mai 2022 - 22:09

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.
MlleAlys

MlleAlys
Membre actif

Messages : 5089
Inscrit(e) le : 12/09/2012

Voir le profil de l'utilisateur
MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par Kaehlyth Dim 1 Mai 2022 - 22:12

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.
Kaehlyth

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par MlleAlys Dim 1 Mai 2022 - 22:22

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

MlleAlys
Membre actif

Messages : 5089
Inscrit(e) le : 12/09/2012

Voir le profil de l'utilisateur
MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par Kaehlyth Dim 1 Mai 2022 - 22:23

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é ! pale

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 !
Kaehlyth

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par MlleAlys Dim 1 Mai 2022 - 22:32

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.

scratch
MlleAlys

MlleAlys
Membre actif

Messages : 5089
Inscrit(e) le : 12/09/2012

Voir le profil de l'utilisateur
MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par Kaehlyth Dim 1 Mai 2022 - 22:34

Il se trouve que si je charge le site :
Spoiler:
Et avec CTRL + F5 ...  affraid
Spoiler:
Kaehlyth

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par MlleAlys Dim 1 Mai 2022 - 22:37

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.
MlleAlys

MlleAlys
Membre actif

Messages : 5089
Inscrit(e) le : 12/09/2012

Voir le profil de l'utilisateur
MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par Kaehlyth Dim 1 Mai 2022 - 22:38

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 !
Kaehlyth

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par MlleAlys Dim 1 Mai 2022 - 22:41

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

MlleAlys
Membre actif

Messages : 5089
Inscrit(e) le : 12/09/2012

Voir le profil de l'utilisateur
MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript changer background/fond du forum

Message par Kaehlyth Dim 1 Mai 2022 - 22:43

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

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum