Adapter son site Xoops aux telephones mobiles

Avelo.net - Juste fait le!
Adapter son site Xoops aux telephones mobiles
XOOPS
Posté par: avelo
Publiée le : 31/01/2013 14:50:00
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 :
( Pour que ces deux lignes soient fonctionnelles, il faut enlever les espaces avant et après 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
http://www.avelo.net
15/02/2017 01:21:18 - 1
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;
http://www.avelo.net
15/02/2017 01:21:18 - 2
}
#xo-topblocks{
display: none;
}
#xo-canvas-leftcolumn{
display: none;
}
Et voici ce que ca donne sur un Galaxy S2
En version verticale.
http://www.avelo.net
15/02/2017 01:21:19 - 3
300) this.width=300" />
Et en version horizontale.
300) this.width=300" />
http://www.avelo.net
15/02/2017 01:21:19 - 4