Modifier le menu de la version mobile

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modifier le menu de la version mobile

Message par horusbk le Mer 17 Juin 2015 - 15:53

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


Dernière édition par 1baptiste le Jeu 25 Juin 2015 - 7:57, édité 1 fois

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par horusbk le Jeu 18 Juin 2015 - 17:30

up !

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par kiwi14637 le Ven 19 Juin 2015 - 14:45

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 !


Dernière édition par kiwi14637 le Ven 19 Juin 2015 - 18:57, édité 1 fois

kiwi14637
# Tropactif #

Masculin
Messages : 1388
Inscrit(e) le : 19/05/2010

kiwi14637 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par horusbk le Ven 19 Juin 2015 - 18:03

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

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par kiwi14637 le Ven 19 Juin 2015 - 19:01

Je viens de me rendre compte que j'avais oublié de fermer } à chaque fois et que comme l'image est un sprite http://illiweb.com/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://illiweb.com/fa/i/mobileNavbar/sprite.png'); background-position:-160px 0; }a#mToggleArrow.shownBar { background-image:url('http://illiweb.com/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://illiweb.com/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://illiweb.com/fa/i/mobileNavbar/ico_page001.png') no-repeat scroll left center; display:inline-block; line-height:30px; padding-left: 25px; font-size: 0.9em; }

kiwi14637
# Tropactif #

Masculin
Messages : 1388
Inscrit(e) le : 19/05/2010

kiwi14637 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Modifier le menu de la version mobile

Message par no_way le Ven 19 Juin 2015 - 19:04

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 Wink


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

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par horusbk le Ven 19 Juin 2015 - 19:09

Bonjour @no_way et @kiwi14637

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

1baptiste

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par no_way le Ven 19 Juin 2015 - 19:11

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 Wink )

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Modifier le menu de la version mobile

Message par kiwi14637 le Ven 19 Juin 2015 - 19:16

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 : http://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/


Dernière édition par kiwi14637 le Ven 19 Juin 2015 - 19:20, édité 1 fois

kiwi14637
# Tropactif #

Masculin
Messages : 1388
Inscrit(e) le : 19/05/2010

kiwi14637 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par horusbk le Ven 19 Juin 2015 - 19:19

Merci pour cette réponse rapide thumleft
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

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par kiwi14637 le Ven 19 Juin 2015 - 19:24

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.

kiwi14637
# Tropactif #

Masculin
Messages : 1388
Inscrit(e) le : 19/05/2010

kiwi14637 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par no_way le Ven 19 Juin 2015 - 19:31

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 Smile

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par horusbk le Ven 19 Juin 2015 - 19:42

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 ?

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Modifier le menu de la version mobile

Message par no_way le Ven 19 Juin 2015 - 19:43

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

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par horusbk le Sam 20 Juin 2015 - 20:08

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. Wink
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

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par kiwi14637 le Dim 21 Juin 2015 - 14:00

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. Wink

Bonne journée !

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

kiwi14637
# Tropactif #

Masculin
Messages : 1388
Inscrit(e) le : 19/05/2010

kiwi14637 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par horusbk le Dim 21 Juin 2015 - 14:23

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
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par horusbk le Mar 23 Juin 2015 - 18:11

up

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le menu de la version mobile

Message par horusbk le Mer 24 Juin 2015 - 19:35

up

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Modifier le menu de la version mobile

Message par horusbk le Jeu 25 Juin 2015 - 7:57

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

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum