Annexe topic 188406

Infos diverses en ANNEXE DU SUJET "Personnaliser la version mobile"

Ce document est modifiable tout en étant hébergé et son adresse internet reste fixe
Prévu ici avec l'idée de tester une utilisation visant à compléter ou préciser un sujet,
même si des commentaires sont postés en dessous.
A suivre ...

Pour illustration n°1

12 juin 2018
Il s'agit pour exemple d'un menu à placer en haut d'une page pour remplacer ceux de la version standard
Cliquer ICI
(Fichier txt avec affichage probable en page web)

Pour illustration n°2

14 juin 2019
Il s'agit dans cet exemple d'un bouton "Menu" placé en bas de l'écran sur toutes les pages de la version mobile (+ un autre bouton dans la barre titre pour revenir à l'accueil)
Cliquer ICI

Bon à savoir

13 juin 2018

- en version standard : presque tous les blocs html sont regroupés dans un
bloc div identifié "background" (cet identifiant n'existe pas en version mobile)

- en version mobile, le thème css du blog est ignoré

A PROPOS DU CODAGE

16 juin 2018

Rappel : Les deux principes d'action par CSS sont exprimés ici par MOB (Aff. Mobile) et STD (Aff. Standard)

Les exemples indiqués sur le forum utilisent des sélecteurs élémentaires ciblant un identifiant id (# en css) ou un nom de class ( . en css), mais les autres sont possibles.

Pour affichage MOBILE uniquement > En version mobile le thème du blog standard n'est pas utilisé. On déclare donc dans le CSS du thème standard, le non affichage du ou des élements réservés pour la version Mobile

Pour affichage STANDARD uniquement > Le seul emplacement permanent pour MOB et STD ou l'on peut placer le css est la zone de script, (entre des balises <style><!-- et --></style>).
Ce CSS à deux instructions. La première ne sera retenue par le navigateur que si la seconde n'est pas réalisable (en version Mobile le id="background" n'existe pas)

En résumé, selon le besoin :

(revoir dans le sujet du forum des exemples de codage)

POUR AFFICHER UNIQUEMENT EN VERSION MOBILE (MOB)

CSS à ajouter dans le thème du blog (cas des exemples 1 et 3 sur le forum)
         SelecteurPourMOB {display: none;}

POUR AFFICHER UNIQUEMENT EN VERSION STANDARD (STD)

CSS à ajouter dans la zone de script (cas des exemples 2 et 4 sur le forum)
         <style><!--
         SelecteurPourSTD {display: none;}
         #background SelecteurPourSTD {display: block;}
         --></style>

POUR AFFICHER UNE PARTIE DU CONTENU EN (MOB), L'AUTRE EN (STD)

Utiliser simultanément les deux situations ci-dessus
(pour une page présentée de façons différentes, chaque moitié de page devra être identifiable pour un type d'affichage)

ASTUCE DANS L'ASTUCE

Commencer par inscrire les css utiles pour ne plus avoir à s'en préoccuper ensuite

1) Ajouter ce code css dans le thème:
/* pour affichage STD ou MOB seulement */
#mobileseul , .mobileseul {display: none;}

2) Ajouter ce code css dans "zone de script":
<style><!--
/* pour affichage STD ou MOB seulement */
#mobileseul , .standardseul {display: none;}
#background .mobileseul , #background .standardseul {display: block;}
--></style>

Et utiliser les id=" " ou class=" " avec les noms "mobileseul" ou "standardseul" selon les besoins dans vos contenus sans vous préoccuper des css à ajouter ou non.

Rappel > les noms "mobileseul" et "standardseul" peuvent être remplacés par d'autres.

-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-

Ci-dessous, un tutoriel pour transformer une page d'accueil existante en deux versions possibles (affichage selon la version mobile/standard utilisée)

26 juin 2018

1) Ajouter ce css dans le thème : (Apparence > Modifier le thème > Ajouter du css)
#accueil-mobile {display: none;}

2) Ajouter ce css dans la zone de script : (Apparence > Zone de script)
<style><!--
#accueil-standard {display: none;}
#background #accueil-standard {display: block;}
--></style>

3) Éditer la page, puis dans le code source (icône < >), encadrer le code html actuel entre <div id="accueil-standard"> et </div>

4) ajouter en dessous du </div> une balise<p></p> pour permettre d'ajouter du contenu en clair hors de ce bloc div

5) dans l'onglet contenu (cas d'une page simple), ajouter à la suite de l'existant le contenu à afficher en version mobile

6) retourner dans le code source de la page (icône < >), encadrer le code html de ce qui a été ajouté, entre <div id="accueil-mobile"> et </div>

Remarque : concernant le point n°4, le contenu placé entre ces balises <div> et </div> sera affiché en standard et en mobile. On peut ainsi placer une balise <hr /> pour exemple qui affiche un trait

Dans le code source ça ressemblera à ceci :

<p></p>
<div id="accueil-standard">
ici le CONTENU actuel de la version STANDARD
(qui sera donc affiché uniquement en version standard)
</div>
<hr /> facultatif, mais pratique en mode Édition pour tracer un trait entre les deux parties
<p></p>
<div id="accueil-mobile">
ici le CONTENU qui sera affiché uniquement en version MOBILE (avec
par exemple les liens qui manquent dans cette version pour accéder
à tout le blog)
</div>
<p></p>