[Réglé] Test version mobile ou non (Overall_header.html)

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.1

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !

[Réglé] Test version mobile ou non (Overall_header.html)

Messagepar yves98 » 02 Fév 2017 à 18:15

Bonjour,

Je souhaite tester dans le Overall_header.html via une variable ? si on est en mode mobile, pc ou tablette.
La raison est toute simple : pouvoir afficher un entête différent suivant qu'on est sur smartphone, tablette ou pc.

Merci de m'aider,

Yves. :wink:
yves98
Posteur néophyte
Posteur néophyte
 
Messages: 6
Enregistré le: 02 Fév 2017 à 18:09

Re: Test version mobile ou non (Overall_header.html)

Messagepar cabot » 02 Fév 2017 à 19:18

Hello,

Tu peux utiliser les medias queries pour définir les éléments à afficher selon la résolution.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26797
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Test version mobile ou non (Overall_header.html)

Messagepar yves98 » 02 Fév 2017 à 19:20

Peux-tu m'en dire plus car je n'y connais rien...
:?
Modifié en dernier par Steph le 02 Fév 2017 à 19:20, modifié 1 fois.
Raison: Suppression de la citation inutile du précedent message en entier
yves98
Posteur néophyte
Posteur néophyte
 
Messages: 6
Enregistré le: 02 Fév 2017 à 18:09

Re: Test version mobile ou non (Overall_header.html)

Messagepar cabot » 02 Fév 2017 à 19:25

Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26797
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Test version mobile ou non (Overall_header.html)

Messagepar yves98 » 02 Fév 2017 à 21:01

Merci mais ca ne me dit pas comment je dois coder dans le fichier Overall_header.html...
J'ai besoin d'une solution clé en main.
:?
yves98
Posteur néophyte
Posteur néophyte
 
Messages: 6
Enregistré le: 02 Fév 2017 à 18:09

Re: Test version mobile ou non (Overall_header.html)

Messagepar cabot » 03 Fév 2017 à 10:00

Il n'y a pas de solution clé en main mais si tu expliquais un peu plus précisément ce que tu veux faire, on devrait pouvoir te guider.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26797
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Test version mobile ou non (Overall_header.html)

Messagepar yves98 » 03 Fév 2017 à 18:02

Bonjour,
Je souhaite simplement pouvoir afficher un entête différent suivant que l'on est sur smartphone, tablette ou pc.
Je pensais pouvoir tester une variable mais laquelle ? Existe-t-elle ?
Si quelqu'un a une expérience... je suis sûr que cela intéresse pas mal de personnes.
:wink:
yves98
Posteur néophyte
Posteur néophyte
 
Messages: 6
Enregistré le: 02 Fév 2017 à 18:09

Re: Test version mobile ou non (Overall_header.html)

Messagepar cabot » 03 Fév 2017 à 18:27

Quel entête ? En HTML, l'entête est la partie située au tout début du document et n'est pas affichée à l'écran.
Quant au bloc contenant les éléments en haut de page (bannière/logo, titre, recherche, etc.), son contenu est déjà affiché différemment d'une résolution à l'autre.

Si tu ne fais l'effort de préciser ce que tu veux, on ne peut pas le faire pour toi, et tu ne trouveras certainement pas de solution clé en main pour quelque chose d'aussi vague. La seule solution qui corresponde à une telle demande est indiquée dans mon premier message.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26797
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Test version mobile ou non (Overall_header.html)

Messagepar yves98 » 03 Fév 2017 à 20:22

Bonjour,

Toutes les personnes qui utilisent un forum PHPBB savent que l'on peut personnaliser l'entête via le fichier Overall_header.html. Il suffit de rajouter un bloc de codes Html pour qu'il s'affiche en haut du forum.
Je souhaite donc simplement diffuser tel ou tel bloc de codes suivent que l'on est en version mobile ou non.
Je ne peux pas mieux m'exprimer.

Code actuel :
Code: Tout sélectionner
</head>
<body background="/images/back.gif" id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">

<table width="100%">
  <tr>
    <td width="70%">
      <div align="left"><img src="//www.monsite.net/images/Newban_2008_go.gif">
      </div><br>
      <div align="center">
      <FONT FACE="Times New Roman" SIZE="2"><font color="#000000"><i>Une initiative de M. Diux</i></font><br><br>
      "Sur les blancs nenuphars, l'oiseau ployant ses ailes, Buvait de son bec rose en ce bassin charmant."
      </FONT>
      </div>
    </td>
    <td width="30%">
	<!-- Ads here Aquaj_forum_336x280 -->
    </td>
</tr>
</table>


L'idée serait de coder en testant une variable <!-- IF not S_RESPONSIVE --> ... <!-- ELSE --> ... <!-- ENDIF --> :
Code: Tout sélectionner
</head>
<body background="/images/back.gif" id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">

<!-- IF not S_RESPONSIVE -->
<table width="100%">
  <tr>
    <td width="70%">
      <div align="left"><img src="//www.monsite.net/images/Newban_2008_go.gif">
      </div><br>
      <div align="center">
      <FONT FACE="Times New Roman" SIZE="2"><font color="#000000"><i>Une initiative de M. Diux</i></font><br><br>
      "Sur les blancs nenuphars, l'oiseau ployant ses ailes, Buvait de son bec rose en ce bassin charmant."
      </FONT>
      </div>
    </td>
    <td width="30%">
	<!-- Ads here Aquaj_forum_336x280 -->
    </td>
</tr>
</table>
<!-- ELSE -->
<table width="100%">
  <tr>
    <td width="100%">
      <div align="left"><img src="//www.monsite.net/images/Newban_2017_go.gif">
      </div><br>
      <div align="center">
      <FONT FACE="Times New Roman" SIZE="2"><font color="#000000"><i>Une initiative de M. Diux</i></font><br><br>
      "Sur les blancs nenuphars, l'oiseau ployant ses ailes, Buvait de son bec rose en ce bassin charmant."
      </FONT>
      </div>
    </td>
</tr>
</table>
<!-- ENDIF -->


:wink:
yves98
Posteur néophyte
Posteur néophyte
 
Messages: 6
Enregistré le: 02 Fév 2017 à 18:09

Re: Test version mobile ou non (Overall_header.html)

Messagepar pierredu » 03 Fév 2017 à 22:18

Pour te faire une idée de tout ce qui se passe quand on réduit ou augmente la surface d'affichage, essaye l'option Outils / Développement web / Vue adaptative dans Firefox (les autres navigateurs ont des options similaires). Tu verras ainsi comment tu peux placer ton projet en fonction des éléments indiqués par Cabot.
Avatar de l’utilisateur
pierredu
Resp. Extensions
Resp. Extensions
 
Messages: 1071
Enregistré le: 29 Mai 2011 à 06:49
Localisation: Paris

Re: Test version mobile ou non (Overall_header.html)

Messagepar cabot » 04 Fév 2017 à 09:53

Votre sujet a été déplacé par un membre de l'équipe.
Origine : utilisation

Code: Tout sélectionner
<div class="responsive-hide">bloc non affiché sur réso ⩽ 700px</div> 
<div class="responsive-show" style="display: none;">bloc affiché uniquement sur réso ⩽ 700px</div>
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26797
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Test version mobile ou non (Overall_header.html)

Messagepar yves98 » 04 Fév 2017 à 12:06

Bonjour,

Super, c'est la solution que je voulais.
Ca fonctionne à merveille !
Grand merci Cabot.
:D
yves98
Posteur néophyte
Posteur néophyte
 
Messages: 6
Enregistré le: 02 Fév 2017 à 18:09

Re: Test version mobile ou non (Overall_header.html)

Messagepar cabot » 04 Fév 2017 à 12:52

Si vous considérez votre requête comme résolue, merci d'ajouter l'attribut de sujet [Réglé]
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26797
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque


Retourner vers [3.1.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité