[AwesomeBB] Questions sur bannière
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
[AwesomeBB] Questions sur bannière
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 à tousActuellement, 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.
Invité- Invité
Re: [AwesomeBB] Questions sur bannière
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.
J'ai trouvé pour la bannière aléatoire.
https://forum.forumactif.com/t398639-banniere-aleatoire-sur-awesomebb?highlight=banni%C3%A8re+responsive+awesomebb
- 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
Re: [AwesomeBB] Questions sur bannière
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/
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/
Invité- Invité
Re: [AwesomeBB] Questions sur bannière
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 ?
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
- 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
Re: [AwesomeBB] Questions sur bannière
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 :
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
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
Invité- Invité
Re: [AwesomeBB] Questions sur bannière
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 :
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.
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.
Re: [AwesomeBB] Questions sur bannière
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
Merci.
Par contre, il reste la "responsivité".... Les images ne le sont pas
Invité- Invité
Re: [AwesomeBB] Questions sur bannière
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.
Re: [AwesomeBB] Questions sur bannière
J'ai modifié le code :
L'image est responsive.... sauf sur la hauteur.... Là je bloque.... :/
- 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.... :/
Invité- Invité
Re: [AwesomeBB] Questions sur bannière
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.
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.
Re: [AwesomeBB] Questions sur bannière
crocnana a écrit: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
Invité- Invité
Re: [AwesomeBB] Questions sur bannière
Zlork a écrit:crocnana a écrit: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.
Re: [AwesomeBB] Questions sur bannière
- 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 :
Invité- Invité
Re: [AwesomeBB] Questions sur bannière
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.
Re: [AwesomeBB] Questions sur bannière
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
https://zupimages.net/up/23/05/z0k1.jpg
Re: [AwesomeBB] Questions sur bannière
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
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
Re: [AwesomeBB] Questions sur bannière
chattigre a écrit: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.
Re: [AwesomeBB] Questions sur bannière
crocnana a écrit: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
chattigre a écrit: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/
Invité- Invité
Re: [AwesomeBB] Questions sur bannière
Bonjour,
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
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
Re: [AwesomeBB] Questions sur bannière
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 .
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 .
Re: [AwesomeBB] Questions sur bannière
Bon, je laisse tomber.
Je vous remercie pour votre temps, pour votre aide. Je passe en résolu car il y a des solutions
Je vous remercie pour votre temps, pour votre aide. Je passe en résolu car il y a des solutions
Invité- Invité
Sujets similaires
» Bannière fixe problème barre de navigation qui descend et catégorie qui empiète sur bannière
» Bannière AwesomeBB
» Bannière aléatoire sur AwesomeBB
» Mettre la barre de liens en dessus du menu burger ou de la bannière awesomeBB
» Remplacer une bannière en .gif par une Bannière Flash
» Bannière AwesomeBB
» Bannière aléatoire sur AwesomeBB
» Mettre la barre de liens en dessus du menu burger ou de la bannière awesomeBB
» Remplacer une bannière en .gif par une Bannière Flash
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