[AwesomeBB] Ajouter une image de fond de page

[orpheus]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://sailormoon-france.forumactif.com

Description du problème

Bonsoir à tous !

Voilà, j'aimerai sous AwesomeBB ajouter une image de fond sur mon forum mais lorsque j'ai tenté de le faire, je n'ai pas trouver l'option sur le panneau d'administration, alors qu'elle existe sur PhpBB2 par exemple.

Par fond de page, je parle du fond blanc sur l'index, les rubriques et topics, que j'aimerai qui soit recouvert par une image de mon choix.

Merci.

[MlleAlys]

Bonjour,
La version AwewomeBB est allégée d'un point de vue images de façon à rester relativement légère et facilement affichable en version mobile.
Pour ajouter une image de fond, vous pouvez passer par l'ajout d'un code css dans votre feuille de style :

Code:

body {
  background-image: url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg);
  background-attachment: fixed;
  background-size: cover;
}

- Remplacez l'adresse https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg entre les parenthèses par l'url de l'image voulue.
- background-attachment: fixed; fixe l'image de fond de page par rapport à la fenêtre : elle ne défile pas avec le forum. Supprimez cette ligne si vous souhaitez la voir défiler avec le forum.
- background-size: cover; règle la taille de l'image, pour couvrir l'ensemble de la fenêtre, peu importe la taille de celle-ci ou de l'écran. Vous pouvez supprimer cette ligne pour que l'image reprenne sa taille originale.

[orpheus]

Bonsoir MlleAlys,

Je vous remercie pour votre aide qui a bien solutionné mon problème.
Cependant, je remarque qu'il en a crée un autre auquel je m'attendais pas : certains fonds devaient être en transparence j'imagine, conséquence, ils ressortent moins bien voir pas du tout avec le nouveau fond.

Voir l'exemple:

Est-ce que vous auriez une idée pour solutionner ce problème ?
Merci.

[Stefano123]

Bonjour orpheus,

Et en mettant le body comme ça ?

Code:

body {
  background: url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg) center;
  background-attachment: fixed;
  background-size: cover;
}

Cdt,

[orpheus]

Bonsoir Stefano123,

Après essai, ça ne résout pas le problème.
Je précise que j'ai viré les lignes 3 et 4, mon but était d'utiliser une petite image qui se répète à l'infini.

Pour info si ça peut aider, voici l'image en question :
https://i.servimg.com/u/f96/18/56/12/14/testfo11.png

[Stefano123]

orpheus,

Vous voulez parler du fond du forum où le font de la barre des catégories ou les blocs blancs des sous-catégories sur l'index ?

Essayez ceci voir !

Code:

body {
    background-image: url(https://i.servimg.com/u/f96/18/56/12/14/testfo11.png);
    background-attachment: fixed;
    background-size: auto;
}

[orpheus]

Je parle de la barre en dessous du titre de la rubrique, plus précisément celle que je viens d'entourer en rouge et où est indiqué la description de la rubrique.

[Stefano123]

Essayer ceci voir :

La barre des titres des catégories :

Code:

.forum-header {
  background: url(https://i.servimg.com/u/f96/18/56/12/14/testfo11.png) center;
  background-size: cover;
}

Les sous-catégories :

Code:

.forum-section {
  background: url(https://i.servimg.com/u/f96/18/56/12/14/testfo11.png) center;
  background-size: cover;
}

[Stefano123]

Je parle de la barre en dessous du titre de la rubrique, plus précisément celle que je viens d'entourer en rouge et où est indiqué la description de la rubrique.

Essayer voir ceci :

Code:

#page-desc{
  background: url(https://i.servimg.com/u/f96/18/56/12/14/testfo11.png) center;
  background-size: auto;
}

[Stefano123]

orpheus, si ce n'est pas ça, j'ai bien peur de ne pas pouvoir vous aider davantage, j'en suis vraiment navré…
J'avoue que je ne suis pas assez calé dans le codage, juste une bonne base, j'aime bien venir en aide, tout comme moi quand j'ai besoins d'aide…

En espérant que quelqu'un d'autre vous donne une suite pour résoudre votre souci…

Cdt,

[orpheus]

Oh ce n'est pas grave Stefano, c'est l'intention qui compte.
Je viens de tester vos propositions et malheureusement, aucune ne correspond à ce que je recherche.

Cependant, j'ai remarqué que la dernière à savoir :

Code:

#page-desc{
  background: url(https://i.servimg.com/u/f96/18/56/12/14/testfo11.png) center;
  background-size: auto;
}

Semble jouer sur la partie qui m'intéresse. Mais au lieu d'ajouter une image, c'est une couleur qu'il aurait fallut pouvoir sélectionner afin d'enlever cette effet de transparence.

Je vois d'ailleurs que cette effet de transparence s'applique également à d'autres parties du forum :


Il aurait fallut que le même traitement que je recherche s'applique sur toutes ces zones où il y a cet effet de transparence car ce n'est pas simple à lire ainsi.

[Stefano123]

Bonjour orpheus,

Dans ce cas-là, on enlève le img et on le remplace par la couleur :
Si c'est bien cela que vous souhaitez, il faudra aussi l'appliquer sur les autres zones

Petite question : si c'est bien ce que vous souhaitez : voulez-vous qu'ils soient tous de la même couleur, ou de couleurs différentes ?
Certaines zones transparentes peuvent avoir le même code, donc, la même couleur !

Code:

#page-desc {
    background-color: #eaadef;
}

Cdt,

[MlleAlys]

Essayez ce code css, vous pouvez modifier le code de la couleur du "background" à votre convenance (j'ai laissé ici un gris plutôt pâle).
J'ai sûrement oublié certains éléments, il faudra faire le tour du forum pour vérifier.

Code:


/*** visibilité par dessus le fond de page ***/

#page-desc, .btn-flat, .topic-actions a, #addthis-toolbar .btn-floating-left, .quick-nav-topics a {
  background: #e2e2e2;  /*couleur de fond*/
}

/*pour la forme de bouton*/
.topic-actions a, #addthis-toolbar .btn-floating-left, .quick-nav-topics a {
  border-radius: 3px;
  font-size: 13px;
  height: 36px;
  line-height: 36px;
  padding: 0 24px;
  display: inline-block;
}

/*** fin visibilité par dessus le fond de page ***/



[orpheus]

Après test, je vous confirme qu'ainsi, ça correspond à merveille à ce que je voulais !

Petite question : si c'est bien ce que vous souhaitez : voulez-vous qu'ils soient tous de la même couleur, ou de couleurs différentes ?
Certaines zones transparentes peuvent avoir le même code, donc, la même couleur !

Oui dans l'idéal, j'aimerais le même code de couleur pour toutes les zones entourées sur ma dernière image.

[MlleAlys]

Normalement le code que j'ai donné applique bien la même couleur de fond à tous les éléments.

[orpheus]

Essayez ce code css, vous pouvez modifier le code de la couleur du "background" à votre convenance (j'ai laissé ici un gris plutôt pâle).
J'ai sûrement oublié certains éléments, il faudra faire le tour du forum pour vérifier.

Code:


/*** visibilité par dessus le fond de page ***/

#page-desc, .btn-flat, .topic-actions a, #addthis-toolbar .btn-floating-left, .quick-nav-topics a {
  background: #e2e2e2;  /*couleur de fond*/
}

/*pour la forme de bouton*/
.topic-actions a, #addthis-toolbar .btn-floating-left, .quick-nav-topics a {
  border-radius: 3px;
  font-size: 13px;
  height: 36px;
  line-height: 36px;
  padding: 0 24px;
  display: inline-block;
}

/*** fin visibilité par dessus le fond de page ***/



Navré pour ce double post, je viens juste de prendre connaissance du code apporté par MlleAlys qui, après test, solutionne le problème dans son intégralité !
Je vais donc appliquer ce dernier à mon forum.

Encore merci à tous pour votre aide, je classe le sujet en résolu.

[Stefano123]

Rebonjour,

Excellent orpheus, et à @MlleAlys d'avoir simplifié la demande !! C'est cool… ⁣

Petite précision : si vous souhaitez que vos blocs ne soient pas de la même couleur !

Code:

#page-desc {
  background: #e2e2e2;  /*couleur de fond*/
}

Code:

.topic-actions a {
  background: #e2e2e2;  /*couleur de fond*/
}

Code:

.btn-flat  {
  background: #e2e2e2;  /*couleur de fond*/
}

Code:

#addthis-toolbar {
  background: #e2e2e2;  /*couleur de fond*/
}

Code:

.btn-floating-left {
  background: #e2e2e2;  /*couleur de fond*/
}

Code:

.quick-nav-topics a {
  background: #e2e2e2;  /*couleur de fond*/
}

Bonne journée à vous,

Cdt,