[Résolu] Forum sur tablette

[Papy2568]

Hello Fred

Lorsque je visualise le forum sur une tablette, la bannière ne s'affiche pas dans toute sa largeur...

@+

[Fred]

Salut Eric
Mais encore ?
Sur ton forum je vois que tu utilises l'extension Header Banner et cette extension est bien responsive sur l'affichage de la banière, donc tu ne devrais pas avoir ce genre de souci.
Peux-tu me faire une capture d'écran de la page des paramètres de cette extension ?

[Papy2568]

J'ai mis le lien de la bannière pour mobile mais rien n'a changé

fofotab.jpg

[Fred]

Alors la première URL renseignée est celle-ci : https://monsite.com/images/banner.png le site est inaccessible

Tu mélanges l'extension et code au fichier CSS :

Code : Tout sélectionner

.headerbar {
    background-color: #000000;
    background-image: url("./images/banner.png");
    margin-bottom: 4px;
    border-radius: 8px;
    height: 190px;
    width: auto;
}

Donc cela veut dire que l'extension ne te sert à rien, et que ton code CSS n'est pas complet.

L'URL de ta bannière est ici : https://www.forum-modelisme-passion25.f ... banner.png
Si tu utilises l'extension Custom Prosilver en lieu et place d'un style perso c'est par cette extension qu'il faut gérer ta bannière

[Papy2568]

J'ai renseigné le 1er lien et maintenant j'ai bien une bannière plus petite ce serait ok par contre elle s'est superposée sur l'autre bannière plus grosse

[Fred]

Faisons les choses dans l'ordre si tu veux bien !

Pour gérer ta bannière avec Header Banner

Commence par te rendre ici sur le serveur ./images et crée un nouveau dossier banner, dans ce dossier tu places ton fichier image pour la bannière. (banner.png)

Réglage de l'extension :

• Voulez-vous activer l‘extension de bannière d‘en-tête ? OUI

• Voulez-vous masquer la couleur d‘arrière-plan de l‘en-tête ? OUI

• Souhaitez-vous placer le logo du site sur la bannière ? NON

• URL de la bannière d‘en-tête pleine largeur : https://www.forum-modelisme-passion25.fr/images/banner/banner.png

• Largeur de la bannière pleine grandeur. : 1200

• Coins arrondis : Tu peux laisser à zéro

• Où aimeriez-vous que la recherche soit affichée ? Barre de navigation

• Souhaitez-vous avoir une bannière alternative pour les petits écrans ? NON

• URL de la bannière d‘en-tête de l‘appareil mobile : https://www.forum-modelisme-passion25.fr/images/banner/banner.png

• Largeur de la bannière de l‘appareil mobile. : 700 px

Et tu enregistres ces paramètres

Ensuite il faut supprimer tous les codes CSS que tu as placé un peu partout visiblement et vider le cache

[Papy2568]

Ensuite il faut supprimer tous les codes CSS que tu as placé un peu partout visiblement

Alors là je suis paumé, quels codes? j'ai mis ceux que tu m'avais déjà proposer ultérieurement?

[Fred]

Ce n'est pas moi qui gère ton forum alors je ne sais que te dire, mais ce message ci-dessous est la preuve que tu as des codes CSS liés à la class headerbar dans les fichiers CSS

J'ai renseigné le 1er lien et maintenant j'ai bien une bannière plus petite ce serait ok par contre elle s'est superposée sur l'autre bannière plus grosse

Commence par désactiver l'extension Custom Prosilver

[Papy2568]

Et bien avec l'extension désactivée tout est rentré en ordre?

[Fred]

Je pense que c'est normal, comme je te dis plus haut tu avais, en plus de l'extension, du code CSS. En gros tu avais une ceinture et des bretelles pour tenir ton pantalon.

Tu peux me remettre une capture d'écran des nouveaux paramètres de l'extension Header Banner ?

[Papy2568]

fofotab.jpg

A la limite, ce que je peux faire, désinstaller l'extension ( qui est polluée ) et refaire une nouvelle installation

[Fred]

Attends !

Peux-tu mettre ici l'intégralité du fichier CSS de cette extension ?

[Papy2568]

Code : Tout sélectionner

/*  Origin - Custom Prosilver
-------------------------------------------------------------------------------------------
Allows you to easily modify the Prosilver style in CSS, without touching the base files. 
Also eliminates the need to create a custom style.
-------------------------------------------------------------------------------------------
*/


.site_logo {
   background-image: url("./images/site_logo.gif");
   background-repeat: no-repeat;
   display: inline-block;
   width: 149px;
   height: 52px;
}

@media (min-width: 700px) {
.headerbar {
   background-color: #000000;
   background-image: url("./images/banner.png");
   margin-bottom: 4px;
   border-radius: 8px;
   height: 190px;
   width: auto;
}}
@media (max-width: 700px) {
.headerbar {
   background-color: #000000;
   background-image: url("./images/banner.png");
   margin-bottom: 4px;
   border-radius: 8px;
   height: 100px;
   width: auto;
}
.logo {
   display: inline-block;
   width: auto;
   height: auto;
}

.logo:hover {
   text-decoration: none;
}}


/* Icon images
---------------------------------------- */

.contact-icon                       { background-image: url("./images/icons_contact.png"); }

/* Profile & navigation icons */
.pm-icon                            { background-position: 0 0; }
.email-icon                         { background-position: -21px 0; }
.jabber-icon                        { background-position: -80px 0; }
.phpbb_icq-icon                     { background-position: -61px 0 ; }
.phpbb_wlm-icon                     { background-position: -182px 0; }
.phpbb_aol-icon                     { background-position: -244px 0; }
.phpbb_website-icon                 { background-position: -40px 0; }
.phpbb_youtube-icon                 { background-position: -98px 0; }
.phpbb_facebook-icon                { background-position: -119px 0; }
.phpbb_googleplus-icon              { background-position: -140px 0; }
.phpbb_skype-icon                   { background-position: -161px 0; }
.phpbb_twitter-icon                 { background-position: -203px 0; }
.phpbb_yahoo-icon                   { background-position: -224px 0; }

/* Forum icons & Topic icons */
.global_read                        { background-image: url("./images/announce_read.svg"); }
.global_read_mine                   { background-image: url("./images/announce_read_mine.svg"); }
.global_read_locked                 { background-image: url("./images/announce_read_locked.svg"); }
.global_read_locked_mine            { background-image: url(".images/announce_read_locked_mine.svg"); }
.global_unread                      { background-image: url("./images/announce_unread.svg"); }
.global_unread_mine                 { background-image: url("./images/announce_unread_mine.svg"); }
.global_unread_locked               { background-image: url("./images/announce_unread_locked.svg"); }
.global_unread_locked_mine          { background-image: url("./images/announce_unread_locked_mine.svg"); }

.announce_read                      { background-image: url("./images/announce_read.svg"); }
.announce_read_mine                 { background-image: url("./images/announce_read_mine.svg"); }
.announce_read_locked               { background-image: url("./images/announce_read_locked.svg"); }
.announce_read_locked_mine          { background-image: url("./images/announce_read_locked_mine.svg"); }
.announce_unread                    { background-image: url("./images/announce_unread.svg"); }
.announce_unread_mine               { background-image: url("./images/announce_unread_mine.svg"); }
.announce_unread_locked             { background-image: url("./images/announce_unread_locked.svg"); }
.announce_unread_locked_mine        { background-image: url("./images/announce_unread_locked_mine.svg"); }

.forum_link                         { background-image: url("./images/forum_link.svg"); }
.forum_read                         { background-image: url("./images/forum_read.svg"); }
.forum_read_locked                  { background-image: url("./images/forum_read_locked.svg"); }
.forum_read_subforum                { background-image: url("./images/forum_read_subforum.svg"); }
.forum_unread                       { background-image: url("./images/forum_unread.svg"); }
.forum_unread_locked                { background-image: url("./images/forum_unread_locked.svg"); }
.forum_unread_subforum              { background-image: url("./images/forum_unread_subforum.svg"); }

.sticky_read                        { background-image: url("./images/sticky_read.svg"); }
.sticky_read_mine                   { background-image: url("./images/sticky_read_mine.svg"); }
.sticky_read_locked                 { background-image: url("./images/sticky_read_locked.svg"); }
.sticky_read_locked_mine            { background-image: url("./images/sticky_read_locked_mine.svg"); }
.sticky_unread                      { background-image: url("./images/sticky_unread.svg"); }
.sticky_unread_mine                 { background-image: url("./images/sticky_unread_mine.svg"); }
.sticky_unread_locked               { background-image: url("./images/sticky_unread_locked.svg"); }
.sticky_unread_locked_mine          { background-image: url("./images/sticky_unread_locked_mine.svg"); }

.topic_moved                        { background-image: url("./images/topic_moved.svg"); }
.pm_read,
.topic_read                         { background-image: url("./images/topic_read.svg"); }
.topic_read_mine                    { background-image: url("./images/topic_read_mine.svg"); }
.topic_read_hot                     { background-image: url("./images/topic_read_hot.svg"); }
.topic_read_hot_mine                { background-image: url("./images/topic_read_hot_mine.svg"); }
.topic_read_locked                  { background-image: url("./images/topic_read_locked.svg"); }
.topic_read_locked_mine             { background-image: url("./images/topic_read_locked_mine.svg"); }
.pm_unread,
.topic_unread                       { background-image: url("./images/topic_unread.svg"); }
.topic_unread_mine                  { background-image: url("./images/topic_unread_mine.svg"); }
.topic_unread_hot                   { background-image: url("./images/topic_unread_hot.svg"); }
.topic_unread_hot_mine              { background-image: url("./images/topic_unread_hot_mine.svg"); }
.topic_unread_locked                { background-image: url("./images/topic_unread_locked.svg"); }
.topic_unread_locked_mine           { background-image: url("./images/topic_unread_locked_mine.svg"); }

[Fred]

Supprimes ceci :

Code : Tout sélectionner

.site_logo {
   background-image: url("./images/site_logo.gif");
   background-repeat: no-repeat;
   display: inline-block;
   width: 149px;
   height: 52px;
}

@media (min-width: 700px) {
.headerbar {
   background-color: #000000;
   background-image: url("./images/banner.png");
   margin-bottom: 4px;
   border-radius: 8px;
   height: 190px;
   width: auto;
}}
@media (max-width: 700px) {
.headerbar {
   background-color: #000000;
   background-image: url("./images/banner.png");
   margin-bottom: 4px;
   border-radius: 8px;
   height: 100px;
   width: auto;
}
.logo {
   display: inline-block;
   width: auto;
   height: auto;
}

.logo:hover {
   text-decoration: none;
}}

Réactive l'extension et vide le cache

[Papy2568]

Sur le pc

voici l'image, je n'ai plus de barre navigation

fofotab1.jpg

Sur la tablette

J'ai la barre , l'image est ok en largeur et trop petite en hauteur ( écrasée )