Bannière de fond de page aléatoire (phpBB3)
2 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
Bannière de fond de page aléatoire (phpBB3)
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 : https://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
Re: Bannière de fond de page aléatoire (phpBB3)
Bonjour,
Pour le premier soucis c'est pas "background-position: top-center;" mais "top center"
Pour le reste je verrais ça quand mon interner arrêtera de bugger et voudra bien charger ta page correctement XD
Pour le premier soucis c'est pas "background-position: top-center;" mais "top center"
Pour le reste je verrais ça quand mon interner arrêtera de bugger et voudra bien charger ta page correctement XD
Re: Bannière de fond de page aléatoire (phpBB3)
Le centrage marche, merci. J'attendrais donc pour la suite.
Re: Bannière de fond de page aléatoire (phpBB3)
Pour l'ombre c'est parce que tu as ça dans ton CSS :
Il faut que tu enlèves les "box-shadow" .
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é ?
- 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" .
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é ?
Re: Bannière de fond de page aléatoire (phpBB3)
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.
Et pour la bannière, j'aimerais qu'elle change à chaque actualisation. Merci.
Re: Bannière de fond de page aléatoire (phpBB3)
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
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é :
https://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 :
Et enfin tu valides, je vais t'expliquer ce que j'ai fait en passant, si tu le souhaites.
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
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é :
https://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
Re: Bannière de fond de page aléatoire (phpBB3)
Merci pour votre réponse. Avant de me lancer dans son application cependant je vais attendre la réponse à ce sujet : https://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.
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.
Sujets similaires
» [phpBB3] Couleur de fond pour Message sur la page d'accueil
» Bannière aléatoire de fond
» Banniere en Image du fond de page
» Code pour bannière en fond de page
» [PHPBB3] Ne pas faire bouger le fond de page...
» Bannière aléatoire de fond
» Banniere en Image du fond de page
» Code pour bannière en fond de page
» [PHPBB3] Ne pas faire bouger le fond de page...
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