Recherche sur le site

Qui est en ligne

1 utilisateur(s) en ligne (1 membre(s) connecté(s) sur Articles)

Membre(s): 0
Invité(s): 1

Plus ...
Vous étes ici » Accueil » Articles » Adapter son site Xoops aux telephones mobiles - XOOPS - Articles
XOOPS : Adapter son site Xoops aux telephones mobiles
Posté par avelo le 31/01/2013 14:50:00 (1164 lectures) Articles du même auteur
XOOPS

Avec l'explosion des smartphones et des tablettes il parait presque indispensable d'adapter son site à ces nouvelles
méthodes de surf, au moins par respect pour les personnes qui passent pas là...




Je n'ai pas vraiment trouvé mon bonheur en cherchant chez xoops quelque chose de simple à appliquer , j'ai donc fouillé
un peu partout
pour avoir quelque chose de "valable" et de pas trop compliqué à mettre en œuvre .

L'idée de base étant de faire fonctionner le site sur une seule colonne , quand le téléphone est en position verticale
et d'avoir le site entier quand il est horizontal .

Il faut donc modifier le site par le"style.css" en rajoutant un fichier "stylemobile.css" dans le dossier /css/ à la racine du site:

Avant toute chose il faut rajouter ces deux lignes au tout début de la balise " head " du theme.html dans /themes/votretheme/theme.html.

Citation :
< head >< meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
< link href="css/stylemobile.css" rel="stylesheet" media="screen" type="text/css" / >

( Pour que ces deux lignes soient fonctionnelles, il faut enlever les espaces avant et après les < et les > , la sécurité de Xoops bloque la possibilité de les mettre normalement )

Ensuite dans stylemobile.css il faut indiquer de modifier l'affichage avec cette ligne Citation :
@media (max-width: 640px)
,
tous les autres paramètres seront à mettre sous cette ligne.

Ensuite il faut trouver les éléments à cacher par le stylemobile.css .
On va se servir de Firefox et de la fonction "developeur web", menu
outil "examiner" , et passer la souris sur son site sur la partie à cacher généralement des "tables" .

Pour l'exemple le nom de la table à cacher se nomme " outer ".

Dans le stylemobile.css il faudra cacher cette table avec ce code
.outer{
display: none;
}
Normalement les plus courants sont , colonne de gauche de droite et les blocs qui rendent souvent le site indigeste avec un smartphone
Il faut donc cacher xo-canvas-rightcolumn , xo-topblocks , itemInfo , #xo-breadcrumbs , xo-canvas-leftcolumn.

Quand il s'agit d'un " div " il faut mettre # devant le nom quand c'est une table il faut mettre un " . " (un point quoi).
Ce qui donne un fichier stylemobile.css comme ceci :
Citation :

@media (max-width: 640px) {

/* Passer les éléments de largeur fixe en largeur automatique */
body, element1, element2 {
width: auto !important;
margin: auto !important;
padding: auto !important;
}

/* Fixer une largeur maximale de 100 % aux éléments potentiellement problématiques */
img, table, td, blockquote, code, pre, textarea, input, object, embed, video {
max-width: 100% !important;
}

/* gestion des mots longs */
textarea, table, td, th, code, pre, samp {
word-wrap: break-word; /* césure forcée */
white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */
}

/* Passer le site à une seule colonne */
element1, element2 {
float: none !important;
width: auto !important
}

/* masquer les éléments superflus */
.hide_mobile {
display: none !important;
}

/* Votre message personnalisé en haut avant la pub */
body:before {
content: " Avelo.net Mobile ";
display: block;
color: #777;
text-align: center;
font-style: italic;
#xo-canvas-rightcolumn{
display: none;
}
#xo-topblocks{
display: none;
}
#xo-canvas-leftcolumn{
display: none;
}


Et voici ce que ca donne sur un Galaxy S2
En version verticale.
Open in new window


Et en version horizontale.
Open in new window


Note: 0.00 (0 votes) - Noter cet article -

Tags: Android   Smartphone   site   Tablette   xoops   Adapter   Mobiles   Téléphones  

Signets Sociaux

                     

Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Auteur Conversation

Connexion

Identifiant :

Mot de passe :

Se souvenir de moi



Mot de passe perdu ?

Inscrivez-vous maintenant !