Archives Thèmes » Thèmes PHPBoost V3 - V4 Thème Mobile Theme qui s'adapte automatiquement sur tablettes smartphones et ordinateurs
Le theme:
Voici le thème Base adapté par mes soins de manière à ce qu'automatiquement il s'adapte au type d’écran du visiteur.
De ce fait, si vous naviguez avec un Smartphone, le contenu est automatiquement adapté.
Si votre visiteur surf via son smartphone, les menus de gauches et droites sont automatiquement masqués, le texte est adapté à la resolution de l'ecran.
Les bords des menus sont également arrondis sur cette version.
basemobile.zip
N'hesitez pas à tester, modifier, commenter
ceci est la 1ere version.
Modifications sur vos propres themes.
Vous pouvez très facilement porter cette modification sur n'importe quel theme, en modifiant
le fichier header.tpl de votre theme
le fichier design.css de votre theme
header.tpl
Trouvez
Code TPL :
<meta http-equiv="Content-Language" content="{L_XML_LANGUAGE}" />
et ajoutez juste après:
Code TPL :
<meta name="viewport" content="width=device-width, user-scalable=yes" />
design.css
ajouter ceci (cette partie modifiera le design selon la resolution)
Code CSS :
@media (max-width: 859px) { /* votre code ici, pour les écrans de taille < 859 px */ div#links{ display:none; } div#right_menu { display:none; } #navigation{ display:none; } } #left_menu{ display:none; } #sub_header{ display:none; } #toph{ display:none; } div#global { width:99%; max-width:859px; margin:auto; } } @media (min-width: 860px) and (max-width: 999px) { /* votre code ici, pour les écrans de taille comprise entre 700 et 999 px */ div#global { width:97%; max-width:999px; margin:auto; } div#right_menu { display:none; } ul.menu_link{ top:145px; left:10px; position: absolute; } ul.menu_link li{ display: inline; border-bottom:2px solid #353535; -webkit-transition: border 1s ease-out; -moz-transition: border 1s ease-out; -o-transition: border 1s ease-out; transition: border 1s ease-out; } ul.menu_link li a{ height: 15px; } ul.menu_link li a.title{ color:#cccccc; font-size:17px; font-family:"Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif; text-decoration:none; font-weight: normal; } ul.menu_link li a.title:hover{ color:#FFFFFF; transition: color 0.3s ease-out; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; -o-transition: color 0.3s ease-out; } ul.menu_link li.current, ul.menu_link li.current:hover{ border-bottom:2px solid #8f0000; } ul.menu_link li.current a{ color:#ebebeb; } ul.menu_link li:hover{ border-bottom:2px solid #336397; -webkit-transition: border 0.3s ease-out; -moz-transition: border 0.3s ease-out; -o-transition: border 0.3s ease-out; transition: border 0.3s ease-out; } #sub_header{ display:none; } } @media (min-width: 1000px) and (max-width: 1229px) { /* votre code ici, pour les écrans de taille comprise entre 1000 et 1229 px */ div#global { width:99%; max-width:100%; margin:auto; } } @media (min-width: 1230px) and (max-width: 1399px) { /* votre code ici, pour les écrans de taille supérieure à 1230 et inf a 1399 px */ div#global { width:89%; max-width:90; margin:auto; } } @media (min-width: 1400px) { /* votre code ici, pour les écrans de taille supérieure à 1400 px */ div#global { width:69%; max-width:70; margin:auto; } }
Vous devrez également modifier les eventuelles valeurs de div_main, footer, qui seraient exprimées en px, modifiez les en 99%. Edité par Bidi Le 05/02/2013 à 11h37
Bonjour Bidi ,
Je te remarci de partager ce thème , mais j'ai une question tout de même, il me semble que tu l'es fais pour la V4, est -il aussi d'actualité sous la V3 ? Je le placerais dans les Dl si tu m'en donnes la permission.
En tout cas, merci pour le partage
@imablement Swan.
Je te remarci de partager ce thème , mais j'ai une question tout de même, il me semble que tu l'es fais pour la V4, est -il aussi d'actualité sous la V3 ? Je le placerais dans les Dl si tu m'en donnes la permission.
En tout cas, merci pour le partage
@imablement Swan.
Hello Swan,
Effectivement le theme est compatible V4.
Pour la V3, il faudra modifier en reprenant els explications du post.
J'espere que certains reprendront le code afin de proposer par la suite des themes Auto-Ajustables....
Tu peux tout a fait le mettre en telechargement!
Bien à toi! Edité par Bidi Le 05/02/2013 à 11h37
Effectivement le theme est compatible V4.
Pour la V3, il faudra modifier en reprenant els explications du post.
J'espere que certains reprendront le code afin de proposer par la suite des themes Auto-Ajustables....
Tu peux tout a fait le mettre en telechargement!
Bien à toi! Edité par Bidi Le 05/02/2013 à 11h37
Attention qu'ici ce n'est qu'une premiere version.
par exemple quand je regarde ton site, il faudra modifier un peu plus pour que les images se retraicissent aussi (celle ci par exemple http://www.pornicradio.com/templates/around_the_world/js/images/1.png )
et le mouse over (avec ton menu deroulant) n'existe pas sur tablettes/smartphone
par exemple quand je regarde ton site, il faudra modifier un peu plus pour que les images se retraicissent aussi (celle ci par exemple http://www.pornicradio.com/templates/around_the_world/js/images/1.png )
et le mouse over (avec ton menu deroulant) n'existe pas sur tablettes/smartphone
Visiteur
EDN Helpers
Message : 0
Ah bien.
Pour le menu déroulant, on pourrait envisager autre chose, un autre type de menu.
Sinon, n'y aurait-il pas moyen que l'internaute choisisse un thème selon qu'il est sur un appareil mobile ou sur une tablette. Des thèmes ont-ils été développés en PBT V3 pour ce genre d'appareil ?
Pour le menu déroulant, on pourrait envisager autre chose, un autre type de menu.
Sinon, n'y aurait-il pas moyen que l'internaute choisisse un thème selon qu'il est sur un appareil mobile ou sur une tablette. Des thèmes ont-ils été développés en PBT V3 pour ce genre d'appareil ?
Pas mal du tout beau travail.
Sur mobile, sur safari, j'ai un défaut d'affichage .. le "test zone" est sous la barre noire, et le texte "menu" est sous la barre de recherche
Sur mobile, sur safari, j'ai un défaut d'affichage .. le "test zone" est sous la barre noire, et le texte "menu" est sous la barre de recherche
samghami officielle
Membre non connecté
EDN Curieux(se)
Inscrit le : 22/02/2013 à 23h16
Messages: 36
Ta une erreur dans tes CSS.
#navigation{
display:none;
}
}
A remplacé par:
#navigation{
display:none;
}
}
A remplacé par:
#navigation{
display:none;
}
display:none;
}
Code CSS :
@media (max-width: 859px) { /* votre code ici, pour les écrans de taille < 859 px */ div#links{ display:none; } div#right_menu { display:none; } #navigation{ display:none; } #left_menu{ display:none; } #sub_header{ display:none; } #toph{ display:none; } div#global { width:99%; max-width:859px; margin:auto; } } @media (min-width: 860px) and (max-width: 999px) { /* votre code ici, pour les écrans de taille comprise entre 700 et 999 px */ div#global { width:97%; max-width:999px; margin:auto; } div#right_menu { display:none; } ul.menu_link{ top:145px; left:10px; position: absolute; } ul.menu_link li{ display: inline; border-bottom:2px solid #353535; -webkit-transition: border 1s ease-out; -moz-transition: border 1s ease-out; -o-transition: border 1s ease-out; transition: border 1s ease-out; } ul.menu_link li a{ height: 15px; } ul.menu_link li a.title{ color:#cccccc; font-size:17px; font-family:"Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif; text-decoration:none; font-weight: normal; } ul.menu_link li a.title:hover{ color:#FFFFFF; transition: color 0.3s ease-out; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; -o-transition: color 0.3s ease-out; } ul.menu_link li.current, ul.menu_link li.current:hover{ border-bottom:2px solid #8f0000; } ul.menu_link li.current a{ color:#ebebeb; } ul.menu_link li:hover{ border-bottom:2px solid #336397; -webkit-transition: border 0.3s ease-out; -moz-transition: border 0.3s ease-out; -o-transition: border 0.3s ease-out; transition: border 0.3s ease-out; } #sub_header{ display:none; } } @media (min-width: 1000px) and (max-width: 1229px) { /* votre code ici, pour les écrans de taille comprise entre 1000 et 1229 px */ div#global { width:99%; max-width:100%; margin:auto; } } @media (min-width: 1230px) and (max-width: 1399px) { /* votre code ici, pour les écrans de taille supérieure à 1230 et inf a 1399 px */ div#global { width:89%; max-width:90; margin:auto; } } @media (min-width: 1400px) { /* votre code ici, pour les écrans de taille supérieure à 1400 px */ div#global { width:69%; max-width:70; margin:auto; } }
Version Phpboost : V4
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie