Bannière de fond de page aléatoire (phpBB3)

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

Résolu Bannière de fond de page aléatoire (phpBB3)

Message par SweetGumiho le Dim 1 Mar 2015 - 17:07

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://thewitcher.jdrforum.com/

Description du problème

Bonjour,

J'ai suivi le tutoriel suivant pour placer mon header en page de fond : http://forum.forumactif.com/t239492-banniere-en-image-de-fond

Malheureusement malgré le code suivant dans ma feuille de style CSS :

Code:
body {
   background-position: top-center;
   background-attachment: scroll;
        background-repeat: no-repeat;
  }

Comme vous pouvez le voir, la bannière est en décalée (pas centrée) et on voit une sorte de ligne/ombre en transparence, celle-ci venant probablement du code, aussi je vous donne l'intégralité de mon CSS :

Code:
#wrap {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    border: 0 solid #FFFFFF;   
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
body {
   background-position: top-center;
   background-attachment: scroll;
        background-repeat: no-repeat;
  }
.inputbox {
   background-color: #3c3c3c;
   border: 1px solid #BCBCBC;
   color: #ffffff;
   padding: 2px;
   cursor: text;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
dl.codebox {
   padding: 3px;
   background-color: #FFFFFF;
   border: 1px solid #C9D2D8;
   font-size: 1em;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   border: 1px solid #101010;
}
.forabg {
   background-color: #262627;
   margin-bottom: 4px;
   clear: both;
   border: 2px solid #;
   padding: 0px 5px;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   border: 1px solid #101010;
   background-image: url(http://imageshack.com/a/img838/9827/fsga.png);
   -o-transition: background-color 0.2s linear; 
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.panel {
   margin-bottom: 4px;
   padding: 0px 10px;
   background-image: url(\'\');
   border: 1px solid #101010;   
   background-repeat: repeat-x;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   background-color: #262627;
   border: 1px solid #101010;
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.post {
   padding: 0 10px;
   margin-bottom: 4px;
   background-repeat: no-repeat;
   background-position: 100% 0;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   background-color: #262627;
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.postbody /*justification automatique des posts*/ {
display: block;
text-align: justify;
padding: 10px;
}
.postprofile {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4) !important;
    border-radius: 5px 5px 5px 5px;
    color: #999;
    display: inline;
    margin: 5px 0 0;
    min-height: 80px;
    position: relative;
    text-align: center;
    width: 17%;
    word-wrap: break-word;
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 5px;
}
dl.codebox {
    background-color: #1E1D1B;
    border: 1px solid #878787;
}
ul.profile-icons {
   margin-top: 10px;
   list-style: none;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
.module {
   background-image: url(http://i60.servimg.com/u/f60/14/70/09/25/gradie22.png);
   border: 1px solid #101010;   
   background-repeat: repeat-x;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   background-color: #262627;
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.signature {
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   border-color: #111010;
}
.row2 {
    background-color: #0D0C0B;
    background-image: url("http://imageshack.com/a/img690/452/q962.png");
    background-position: center top;
    background-repeat: repeat-x;
}
.row1 {
    background-color: #0D0C0B;
    background-image: url("http://imageshack.com/a/img690/452/q962.png");
    background-position: center top;
    background-repeat: repeat-x;
}
blockquote {
    background: url("http://imageshack.com/a/img809/2250/voys.png") no-repeat scroll 0 0 #C1A780;
    border: 0 none #4C402D;
    border-radius: 10px;
    padding-right: 25px;
}
.panel {
    background-color: #000000;
    background-image: url("");
    background-repeat: repeat-x;
    border-radius: 10px;
    margin-bottom: 4px;
    padding: 0 10px;
}
a.button1, a.button2, button.button2, input.button1, input.button2 {
    background-color: #1E1D1B;
    background-image: url("http://imageshack.com/a/img849/7503/zow4.png");
    border: 0 none;
    color: #B89E7D;
}
#search-box input {
display: none;
}
#search-box input.button1 {
display: none;
}
input.search {
display: none;
}
#smiley-box{
  display:none;
}
 
.slidesmile{
  position:relative;
  top:39px; left:705px;
  z-index:4;
}
.forabg .lastpost { width:25% }
.forabg .dterm { width:70% !important }
.navig {
    position: fixed;
    top:0;
    width:100%
    background: black; /*couleur de fond de la barre de navigation*/
    box-shadow: 0 2px 10px black;  /*effet d'ombre sous la barre de navigation*/
}
.navig li {
    display: inline-block;
    padding: 5px;  /*marge autour des liens*/

De plus j'aimerais savoir comme faire pour mettre 7 bannières et non une seule (en aléatoire donc), car le tutoriel ne le permet pas.

Merci d'avance pour vos réponses.


Dernière édition par SweetGumiho le Mer 4 Mar 2015 - 1:05, édité 1 fois

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière de fond de page aléatoire (phpBB3)

Message par Alzufen le Dim 1 Mar 2015 - 17:43

Bonjour,

Pour le premier soucis c'est pas "background-position: top-center;" mais "top center" Wink

Pour le reste je verrais ça quand mon interner arrêtera de bugger et voudra bien charger ta page correctement XD

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière de fond de page aléatoire (phpBB3)

Message par SweetGumiho le Dim 1 Mar 2015 - 19:04

Le centrage marche, merci. J'attendrais donc pour la suite. Smile

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière de fond de page aléatoire (phpBB3)

Message par Alzufen le Dim 1 Mar 2015 - 19:58

Pour l'ombre c'est parce que tu as ça dans ton CSS :

Code:
#wrap {
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-moz-box-shadow: 0 0 9px #000;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0 0 9px #000;
border: 0 solid #FFF;
border-radius: 10px;
}

Il faut que tu enlèves les "box-shadow" Wink.

Pour la bannière aléatoire, il y a pas mal de tuto sur le net bien que ça ne marche qu'avec la bannière en header, faudrait l'adapté pour le faire avec le fond de page, mais j'aimerais savoir si tu veux que la bannière change à chaque fois que la page est actualisée ou si elle change après un temps donné ?

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière de fond de page aléatoire (phpBB3)

Message par SweetGumiho le Dim 1 Mar 2015 - 20:36

Qu'est-ce que fait ce #wrap exactement en fait ? Je peux le supprimer ?

Et pour la bannière, j'aimerais qu'elle change à chaque actualisation. Merci.

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière de fond de page aléatoire (phpBB3)

Message par Alzufen le Dim 1 Mar 2015 - 22:45

La balise div ayant pour id "wrap" entoure tout le contenu du Forum, en soit sur votre forum elle ne sert pas à grand chose, dans votre CSS le seul truc utile est "border: 0 solid #FFF;" qui devrait être écrit "border: 0" pour retirer la bordure blanche de base de cette div Wink

Pour la bannière aléatoire, on va donc suivre ce tuto et reprendre le code de celui-ci en le modifiant légèrement pour que tu es l'effet désiré :

http://forum.forumactif.com/t223082-banniere-aleatoire-ou-defilante

Le code de base modifie la bannière du forum et donc change le header, dans notre cas c'est le fond de page qu'on va changer, du coup, on va modifier un peu le code en remplaçant la cible par "body" pour optimiser encore plus on va pouvoir mettre "#phpbb" qui va cibler uniquement le body de cette page, et ne touchera donc pas à celui de la Chatbox par exemple. Ensuite, on va lui demander de changer la propriété css "background-image" pour y ajouter l'image qu'on veut à chaque fois. Tu pourras d'ailleurs retirer l'image de base de fond de page que tu as mis dans tes images dans le panneau d'administration, elle sera généré par le code. Il va nous falloir aussi rajouter plusieurs images, mais ça, ce n'est pas bien compliqué.

Tu vas donc aller dans Panneau d'administration > Modules > (Tout en bas) Gestion des pages Javascript = Vérifie que tu as bien coché "oui" > Ajouter une nouvelle page Javascript > Sur toutes les pages de coché = met le titre que tu veux et ajoute ceci :

Code:
$(function() {
var a = ['http://adresse_image_1', 'http://adresse_image_2', 'http://adresse_image_3', 'http://adresse_image_4', 'http://adresse_image_5', 'http://adresse_image_6', 'http://adresse_image_7'];
$('#phpbb').css('background-image', 'url('+a[Math.floor(Math.random() * a.length)]+')');
});

Et enfin tu valides, je vais t'expliquer ce que j'ai fait en passant, si tu le souhaites.

Code:
$(function(){ // Déclare la fonction suivante en jQuery
Code:
var a = ['http://adresse_image_1', 'http://adresse_image_2', 'http://adresse_image_3', 'http://adresse_image_4', 'http://adresse_image_5', 'http://adresse_image_6', 'http://adresse_image_7']; // Ajoute une variable nommée "a" qui est égal à chaque adresse url fourni
Code:
$('#phpbb').css('background-image', 'url('+a[Math.floor(Math.random() * a.length)]+')'); // Un peu plus compliqué, on cible le corps de page (body) de ton forum, on y ajoute comme propriété css "background-img", pour définir la propriété, on va donc utiliser une fonction jQuery qui permet de générer un nombre aléatoire, ce nombre aura pour minimum 1 et pour maximum le nombre de lien fourni dans la variable a (donc ici 7), une fois le nombre généré on récupère l'url correspondant dans la variable "a", une fois cela fais, on l'ajoute à la propriété background image dans "url()" qui permet de définir l'url du background
Code:
}); // On ferme la fonction tout simple

Voilà, je sais pas si mes explications seront clair et si elles te serviront à quelque chose mais je préférais expliquer plutôt que de te donner un code et te laisser dans le flou avec, ça marche et osef de son effet XD

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière de fond de page aléatoire (phpBB3)

Message par SweetGumiho le Dim 1 Mar 2015 - 22:49

Merci pour votre réponse. Avant de me lancer dans son application cependant je vais attendre la réponse à ce sujet : http://forum.forumactif.com/t376465-nettoyage-de-feuille-de-style-css En effet il y a sûrement comme vous dites plein d'éléments inutiles dans cette feuille de style CSS. Ce sujet peut donc être affiché comme "en cours". Merci encore. ^^

EDIT : J'attends que la commande des bannières soit terminée, pour l'instant je n'ai rien d'autre que ma bannière de test. :/

EDIT 2 : Ça marche, parfait. Merci beaucoup pour les explications ! Je préfère bien mieux de cette façon car j'apprends par la même occasion. Smile

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

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


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