Modifier le menu de la version mobile

[horusbk]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://themazerunner-forum.fr/

Description du problème

Bonjour,

Je souhaiteriez savoir s'il était possible de modifier le menu de la version mobile :

Je souhaiterais savoir si la la petite flèche pouvez être changée (pour les positions haut et bas) et si les images et textes de Accueil / Connexion / Déconnexion / Version web l'était également.

J'imagines qu'il faut passer par du CSS ? Car sur le tutoriel qui traitait de modifier la version mobile avec du CSS il ne faisait pas mention de ce que je demande plus haut.

Cordialement et merci,
1baptiste

[horusbk]

up !

[kiwi14637]

Bonjour,

Ce sont en fait des sprites.
Sinon, pour les modifier, je suppose qu'on peut faire :

Code:

a#mToggleArrow.hiddenBar { background-image:url('URL') !important;}
a#mToggleArrow.shownBar { background-image:url('URL') !important;}

Les autres icones, c'est plus compliqué

Bonne journée !

[horusbk]

Bonjour @kiwi14637

En effet ça fonctionne pour ces deux flèches merci beaucoup.
Un problème de résolu.

Je laisse le sujet pour les icônes de cette fameuse barre de navigation ...

Merci et cordialement,
1baptiste

[kiwi14637]

Je viens de me rendre compte que j'avais oublié de fermer } à chaque fois et que comme l'image est un sprite https://2img.net/i/fa/i/mobileNavbar/sprite.png il y a un background-position.
Le meilleur moyen serait de refaire un sprite, si possible de même largeur.
La structure de la barre de navigation est ainsi en fait :

Code:

#HTML
<div id="mToggleContainer"><a href="#" class="hiddenBar" id="mToggleArrow">&nbsp;</a><ul id="mNavbar"><li><a href="/forum" class="navElement"><span class="navBtnIcon" style="background-position:-32px 0;">&nbsp;</span><br><span class="navBtnLabel">Accueil</span></a></li><li><a href="/login?logout=1" class="navElement"><span class="navBtnIcon" style="background-position:-96px 0;">&nbsp;</span><br><span class="navBtnLabel">Déconnexion</span></a></li><li><a href="index.forum?mobile&amp;redirect=%2Ft379220-modifier-le-menu-de-la-version-mobile" class="navElement"><span class="navBtnIcon" style="background-position:0 0;">&nbsp;</span><br><span class="navBtnLabel">Version web</span></a></li></ul></div>

Code:

#CSS
/* NAVIGATION BAR */div#mToggleContainer { float:right; margin:0; padding:0; height:33px; margin-top:-2px; width:30px; background-color:#333333; background-image:none; background-repeat:no-repeat; background-position:center center; }a#mToggleArrow { background-color:rgb(51, 51, 51); display:block; width:30px; height:33px; margin:0; padding:0; text-decoration:none; border:none; }a#mToggleArrow.hiddenBar { background-image:url('http://2img.net/i/fa/i/mobileNavbar/sprite.png'); background-position:-160px 0; }a#mToggleArrow.shownBar { background-image:url('http://2img.net/i/fa/i/mobileNavbar/sprite.png'); background-position:-192px 0; }ul#mNavbar { display:none; background-color:rgb(51, 51, 51); height:50px; position:absolute; left:0; width:100%; text-align:center; }ul#mNavbar li { display:inline-block; padding:0 10px; height:100%; min-width:50px; text-align:center; }a.navElement { text-decoration:none; border:none; display:block; }a.navElement span.navBtnIcon { display:inline-block; width:32px; height:32px; background:transparent url('http://2img.net/i/fa/i/mobileNavbar/sprite.png') no-repeat -224px 0; }a.navElement span.navBtnLabel { display:inline-block; color:#FFFFFF; font-weight:bold; white-space:nowrap; }/* ACTION BAR */#mobileActionBar { text-align:center; height:30px; line-height:30px; padding:0; margin:0; background-color:#333333; width:100%; position:fixed; bottom:0; }#mobileActionBar a.navbar { text-decoration: none; display: inline-block; height: 30px; line-height: 30px; margin: 0px; padding: 0px; color:#FFFFFF; white-space:nowrap; }#mobileActionBar .mobileActionLabel { background: transparent url('http://2img.net/i/fa/i/mobileNavbar/ico_page001.png') no-repeat scroll left center; display:inline-block; line-height:30px; padding-left: 25px; font-size: 0.9em; }

[no_way]

Bonjour la version mobile utilise ce sprite, à vous de modifier le sprite et de déclarer son usage via le code CSS suivant:

Code:

a.navElement span.navBtnIcon{
background:url(url de votre sprite);
}

Il est important que vous mainteniez les même dimensions pour les icônes


Edit: kiwi14637 a été plus rapide que moi ^^

[horusbk]

Bonjour @no_way et @kiwi14637

Je vais essayer vos solutions et je vous tiens au courant.
Cependant, vous pouvez m'expliquer ce qu'est "un sprite" j'ai pas vraiment compris... On peut en trouver sur le web ?
Merci,

1baptiste

[no_way]

Un sprite est une image contenant plusieurs images pour éviter des requêtes inutiles et consommer moins de ressources ( très utilisé sur les très vielles consoles 8 bits )

[kiwi14637]

Mais pas les notifications qui bugguent bien ...
Un sprite, c'est une sorte d'image composite qui permet de charger 1 seule image au lieu de plusieurs autres.
Le serveur est ainsi moins sollicité et on gagne un petit peu de place.
Il faut ensuite décomposer l'image.
Facebook les utilise, ainsi que Google, par exemple : https://fbstatic-a.akamaihd.net/rsrc.php/v2/y8/r/OJSx-Cy-_ZW.png (bon, c'est pas vraiment celle à laquelle je pensais mais bon ...)
Demeter1 avait également proposé de les utiliser pour nos forums : https://forum.forumactif.com/t368634-administration-installation-de-sprite-sur-les-zones-contenant-des-images
http://www.alsacreations.com/actu/lire/693-css-sprites-generator-creator.html

En parlant d'optimisation et quelque peu HS mais bon, kraken.io est un excellent site pour compresser les images. "Lossless" est très bon et permet de conserver la qualité.

Edit : no_way a été cette fois plus rapide
Edit2 : Les images map permettent un concept assez similaire : une image où l'on découpe des zones cliquables : http://formation.upyupy.fr/html-xhtml/images-map/

[horusbk]

Merci pour cette réponse rapide
Je suis allé voir si il existait des sprite prêt à l'emploi ou des générateurs. Choses que j'ai fini par trouver après avoir passé toutes les pub pour la boisson du même nom...

Mais ma question est la suivante, si je crée un sprite, comment la version mobile sera quel icône affecter à quelle partie du menu de la version mobile.

Cordialement,
1baptiste

[kiwi14637]

Je laisse @no_way répondre mais je pense que le mieux serait de prendre des icones de même longueur et de les mettre dans le même ordre.
On demande après dans le CSS d'afficher ce sprite et non l'autre.

[no_way]

Comme l'a indiqué kiwi14637, le plus simple est de respecter scrupuleusement les dimensions et l'ordre des images dans le sprite et d'utiliser le code CSS fourni plus haut

[horusbk]

Merci pour toutes vos réponses.
Donc si je récapitule, grâce au générateur de sprite que j'ai trouvé, je mets les images dans le même ordre que le sprite actuel puis, j'utilise le code de @no_way que j'insère dans mon CSS.

Exact ?

[no_way]

Vous avez bien compris, c'est tout à fait l'idée.

[horusbk]

Merci beaucoup @no_way, je viens d'essayer et ça fonctionne. Il ne reste plus qu'à trouver les bonnes tailles d'images pour que se soit parfait.
Je me posais également la question pour le nom de mon forum en version mobile. Est-ce que sans passer par l'onglet Général de mon panneau d'administration (là où on gère le nom du site), il était possible via CSS de modifier le titre de l'en-tête.

Dans le cas présent, passer de Maze Runner - Forum France [test] à Version Mobile (par exemple).

Cordialement,
1baptiste

[kiwi14637]

Bonjour,

On peut sans doute avec :after ... mais ça serait peut-être plus simple de le modifier directement dans le template ou à la limite, en passant par du javascript.

Bonne journée !

Edit : Le modifier sur toutes les pages ? A la place du nom de la page ?

[horusbk]

Bonjour @kiwi14637

Merci. Oui je souhaiterais modifier le titre sur toutes les pages de la version mobile.

Cordialement, bonne fête des pères, bonne fête de la musique et bon dimanche,
1baptiste

[horusbk]

up

[horusbk]

up

[horusbk]

C'est bon j'ai trouvé.
Merci à tous ceux qui m'ont aidé.