[AwesomeBB] Questions sur bannière

[Invité]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://gemurama.com/

Description du problème

Bonjour à tous

Actuellement, mon forum est dépourvu de bannière. J'ai utilisé un code CSS pour :

Code:

#header-banner {
  height: 0;
  visibility: hidden;
}

Aujourd'hui, je change d'avis, je voudrais tester alors j'ai plusieurs questions :

- Quelle est la taille conseillée pour la bannière ?
- Que faut-il faire pour qu'elle soit responsive ?
- Est-il possible via un script sans doute, de rendre la bannière aléatoire ?

Merci d'avance pour votre réponse.

[Laférosse]

Bonjour, tu peux mettre ce code pour une bannière. Moi, je mets au moins 1600 de largeur, pour la hauteur c'est modulable, tout dépend de ce que tu veux mettre comme style de bannière. Je t'ai mis une bordure (border bottom), c'est supprimable si tu n'en vois pas l'utilité. Background-size pour adapter à toutes les résolutions. Pour le reste de tes demandes, je crois qu'il y a déjà eu des tutos sur FA. Essaye de faire une recherche, je verrai si je tombe dessus aussi de mon côté pour te donner les liens.

Code:

#header-banner {
background-color: #000000 !important;
height: 300px !important;
background-image: url('https://...');
background-position: center;
border-bottom: 0px  solid;
background-repeat: no-repeat;
background-size: auto 100%;
}


J'ai trouvé pour la bannière aléatoire.

https://forum.forumactif.com/t398639-banniere-aleatoire-sur-awesomebb?highlight=banni%C3%A8re+responsive+awesomebb

[Invité]

Alors :

Le script pour les images aléatoire fonctionne bien, merci pour le lien

Par contre, niveau CSS, ce n'est pas du tout ce que je recherche

Les images sont centrés (je souhaite que ça prenne toute la longueur) et surtout, elles ne sont pas responsive. Je vous laisse regarder via mon forum test : https://gemutest.forumactif.com/

[Laférosse]

Pour le placement, de mon côté avec le code que je t'ai donné c'est ok. Image dimension 1600px et le height de 300px. Combien fait ton image ? Quel code as tu mis? Parce que le lien que je t'ai fourni je n'ai pas testé. Tu peux me laisser l url de ton image que je teste ?

Code:

#header-banner {
background-color: #fffff;
height: 300px !important;
background-size: 100% auto;
background-position: center;
background-image: url('https://www.zupimages.net/up/23/05/5f3b.png') !important;
}

edit : sur le forum de Milouze, ceci devrait t'aider pour le responsve.

https://le-site-milouze14.bbactif.com/t32204-awesomebb-rendre-l-image-du-header-cliquable

[Invité]

Mon image fait 1920px de longueur

Voilà un lien pour que tu puisses tester : https://i.servimg.com/u/f40/20/45/55/23/707210.jpg

CSS que j'ai mis :

Code:

#header-banner {
    height: 300px !important;
    background-position: center;
    border-bottom: 0px  solid;
    background-repeat: no-repeat;
    background-size: auto, 100%;
    }

EDIT : je ne veux pas rendre le header cliquable mais responsive, c'est-à-dire que l'image s'adapte à la résolution de l'écran

[Laférosse]

Ton image fait 1024px sur 331 px !! Du  coup je te l'ai redimensionné pour obtenir 1600px proportionnellement l'image est devenue  515 de hauteur.

Il faut ajuster le code ainsi :

Code:

#header-banner {
background-color: #fffff;
height: 515px !important;
background-size: 100% auto;
background-position: center;
background-image: url('https://www.zupimages.net/up/23/05/5f3b.png') !important;
}

Teste cela devrait être bon. Le 1600px de largeur est important sinon ton image sera trop petite pour remplir le bloc.

Le rendu est ok sur toute la largeur sur mon forum test.

[Invité]

Oui excuse moi, je ne sais pas pourquoi mais je n'ai pas mis les bonnes images

Merci.

Par contre, il reste la "responsivité".... Les images ne le sont pas

[Laférosse]

La résolution de l'écran c'est background-size: 100% auto. Sur PC c'est impeccable par contre sur mobile j'ai constaté un espace au dessus de la bannière et un autre en dessous, ceci dès que tu mets un height supérieur à 300px. Tu devrais le constater aussi. Je n'en connais pas la cause, j'allais justement ouvrir un sujet sur ce problème de marge.

[Invité]

J'ai modifié le code :

Code:

#header-banner {
        height: 310px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%; /*enlever auto */
        }

L'image est responsive.... sauf sur la hauteur.... Là je bloque.... :/

[Laférosse]

De mon côté j'ai testé en version web, (sinon c 'est la cata si on coche en version mobile) à activer dans template général. Je ne vois plus de marges. Pour ta hauteur, quel est ton problème ? Les marges comme je l'avais précédemment précisé ? (il faut bien sur activer également le mode version pour ordi..sur son mobile.

Ps : j'ai vu sur ton forum test. L'image que tu choisis doit être proportionnelle à la largeur. Sinon tu as une image étirée, déformée ou encore pixellisée.

[Invité]

De mon côté j'ai testé en version web, (sinon c 'est la cata si on coche en version mobile) à activer dans template général. Je ne vois plus de marges. Pour ta hauteur, quel est ton problème ? Les marges comme je l'avais précédemment précisé ? (il faut bien sur activer également le mode version pour ordi..sur son mobile.

Ps :  j'ai vu sur ton forum test. L'image que tu choisis doit être proportionnelle à la largeur. Sinon tu as une image étirée, déformée ou encore pixellisée.

C'est-a-dire ?

J'ai essayé de mettre height sur auto

Mais ça ne fonctionne pas non plus. Il y a toujours ces écarts en hauteur

[Laférosse]

De mon côté j'ai testé en version web, (sinon c 'est la cata si on coche en version mobile) à activer dans template général. Je ne vois plus de marges. Pour ta hauteur, quel est ton problème ? Les marges comme je l'avais précédemment précisé ? (il faut bien sur activer également le mode version pour ordi..sur son mobile.

Ps :  j'ai vu sur ton forum test. L'image que tu choisis doit être proportionnelle à la largeur. Sinon tu as une image étirée, déformée ou encore pixellisée.

C'est-a-dire ?

J'ai essayé de mettre height sur auto

Mais ça ne fonctionne pas non plus. Il y a toujours ces écarts en hauteur

Le problème ce n'est pas le code puisqu'il met exactement la hauteur et la largeur que tu lui demandes. Le problème c'est ton image. Il faut quelle fasse au minimum 1600px de largeur et selon l'image choisie ou encore la re-dimension de l'image les proportions de base doivent être gardées ou proportionnelles. Je t'ai montré pour l'image que tu m'avais donné. Je te l'ai redimensionné à 1600px puisqu'elle était trop petite. elle s'est également agrandie en hauteur c'est logique.  Si tu mets une image assez grande c'est ok (pas de pixellisation ou de marges gauche droite) mais tu dois prendre aussi sa hauteur de base et l'indiquer comme tel dans ton code.
Donc choisis une image assez large (minimum 1600px idéal sur awesomebb) mais pas trop haute. Voici pour t'aider un site où tu peux re redimensionner tes images facilement. Il va te calculer automatiquement les bonnes dimensions pour ton image. (reste en png c'est mieux et n'oublie pas de cocher "garder les proportions"). Tu n'as plus qu'à ajouter la bonne hauteur de ton image dans ton code.
https://www.iloveimg.com/   aller à resizeimage.

[Invité]

Code:

    #header-banner {
    height: 600px !important;
    background-size: 100%;
    background-position: center;
    background-image: url('https://i.imgur.com/wSodWfz.jpg') !important;
    }

En height, j'ai mis exactement comme l'image pour tester. Mais non, ça ne fonctionne pas. En largeur, pas de problème mais en hauteur :

[Laférosse]

Peux-tu me donner le lien de ton image stp ? c'est bon je l'ai pris dans ton code, je vais tester et je reviens.

[Laférosse]

Ton image n'est pas à la bonne dimension. Elle fait 1920px sur 620px. Re dimensionner à 1600px en largeur ce qui donne en hauteur 515 px. Essaye avec la bonne image dont voici le lien. N'oublie pas de corriger la hauteur dans ton code.

https://zupimages.net/up/23/05/z0k1.jpg

[chattigre]

Bonjour,

Forcément, sur mobile, il faut rogner l'image dans un sens ou dans l'autre, puisque la place disponible n'est pas la même.
Mais je ne vois pas pourquoi il y aurait besoin de CSS supplémentaire : Le CSS par défaut de AwesomeBB fonctionne très bien.
Il suffit de mettre l'image choisie dans le PA / Affichage / Images et couleurs / Gestion des images (mode avancé)
Onglet général / navigation
Image de fond de l'en-tête.

Selon les dimensions de l'image et la résolution de l'écran de l'utilisateur, les proportions de l'image seront respectées et elle sera rognée en largeur si l'écran est petit, et rognée en hauteur si l'écran est plus large.

La hauteur par défaut de la bannière est de 200px.
La largeur, ça dépend de la résolution, je vous conseille une bannière "adaptative", avec différents éléments essentiels au centre que tout le monde verra puis un fond "annexe" qui ne sera visible que sur les écrans les plus grands.

Bonne journée
Cordialement

[Laférosse]

Bonjour,

Forcément, sur mobile, il faut rogner l'image dans un sens ou dans l'autre, puisque la place disponible n'est pas la même.
Mais je ne vois pas pourquoi il y aurait besoin de CSS supplémentaire : Le CSS par défaut de AwesomeBB fonctionne très bien.
Il suffit de mettre l'image choisie dans le PA / Affichage / Images et couleurs / Gestion des images (mode avancé)
Onglet général / navigation
Image de fond de l'en-tête.

Selon les dimensions de l'image et la résolution de l'écran de l'utilisateur, les proportions de l'image seront respectées et elle sera rognée en largeur si l'écran est petit, et rognée en hauteur si l'écran est plus large.

La hauteur par défaut de la bannière est de 200px.
La largeur, ça dépend de la résolution, je vous conseille une bannière "adaptative", avec différents éléments essentiels au centre que tout le monde verra puis un fond "annexe" qui ne sera visible que sur les écrans les plus grands.

Bonne journée
Cordialement

Bonjour Chattigre, oui si on met une bannière à 200px de hauteur, ce qui est très limité en design selon moi. Concernant la largeur en dessous de 1600px il apparait des marges gauche droite ou pire l'image pixellisée si trop petite. Si on veut mettre une bannière plus conséquente comme c'est le cas pour Zlork, un code est nécessaire.

[Invité]

Ton image n'est pas à la bonne dimension. Elle fait 1920px sur 620px. Re dimensionner à 1600px en largeur ce qui donne en hauteur 515 px. Essaye avec la bonne image dont voici le lien. N'oublie pas de corriger la hauteur dans ton code.

https://zupimages.net/up/23/05/z0k1.jpg

Toujours pas

Bonjour,

Forcément, sur mobile, il faut rogner l'image dans un sens ou dans l'autre, puisque la place disponible n'est pas la même.
Mais je ne vois pas pourquoi il y aurait besoin de CSS supplémentaire : Le CSS par défaut de AwesomeBB fonctionne très bien.
Il suffit de mettre l'image choisie dans le PA / Affichage / Images et couleurs / Gestion des images (mode avancé)
Onglet général / navigation
Image de fond de l'en-tête.

Selon les dimensions de l'image et la résolution de l'écran de l'utilisateur, les proportions de l'image seront respectées et elle sera rognée en largeur si l'écran est petit, et rognée en hauteur si l'écran est plus large.

La hauteur par défaut de la bannière est de 200px.
La largeur, ça dépend de la résolution, je vous conseille une bannière "adaptative", avec différents éléments essentiels au centre que tout le monde verra puis un fond "annexe" qui ne sera visible que sur les écrans les plus grands.

Bonne journée
Cordialement

En utilisant cette méthode, ça semble mieux marcher.... Mais en taille normal, la barre de navigation est dessus : https://gemutest.forumactif.com/

[chattigre]

Bonjour,

En utilisant cette méthode, ça semble mieux marcher.... Mais en taille normal, la barre de navigation est dessus : https://gemutest.forumactif.com/

Non, c'est une impression.
Mais ça vient de votre image. Il faut remplir tout l'espace en largeur, donc, l'image est élargie pour tout remplir. Résultat : Sa hauteur augmente proportionnellement, mais l'espace disponible en hauteur, lui, ne change pas. Le haut et le bas de l'image sont donc rognés.

La solution la plus appropriée est de choisir une image qui a des proportions différentes, avec une largeur encore plus importante que la hauteur.
Une bannière en 2000*200, par exemple, serait idéale.
Il y a aussi la solution de ne rogner que le bas de l'image pour afficher systématiquement le haut en intégralité si c'est plus cohérent avec votre image.

Bonne journée
Cordialement

[Laférosse]

J'ai testé sur deux forums différents et le résultat est bon de mon côté. (j'ai ajusté la hauteur à 510px)



Donc soit, tu ne suis pas les consignes données soit tu as des codes qui pourraient faire conflit. Je ne vois pas comment t'aider plus, même en t'indiquant un site pour re-mendisionner les images tes dimensions sont erronées. Je passe la main. Bon dimanche .

[Invité]

Bon, je laisse tomber.

Je vous remercie pour votre temps, pour votre aide. Je passe en résolu car il y a des solutions