Thème Mobile

Archives Thèmes » Thèmes PHPBoost V3 - V4 Thème Mobile Theme qui s'adapte automatiquement sur tablettes smartphones et ordinateurs

Bidi

EDN actif(ve)

Rang

Inscrit le : 27/01/2013 à 09h27

Messages: 16

Le 05/02/2013 à 10h26

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

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 05/02/2013 à 11h31

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.

swan_signature

Site web

Bidi

EDN actif(ve)

Rang

Inscrit le : 27/01/2013 à 09h27

Messages: 16

Le 05/02/2013 à 11h36

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

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 05/02/2013 à 12h21

Re,

Citation:

J'espere que certains reprendront le code afin de proposer par la suite des themes Auto-Ajustables....

Ce serait sympas oui !

Pour la mise en dl, je te remercie

swan_signature

Site web

Visiteur

EDN Helpers

Rang

Message : 0

Le 05/02/2013 à 13h57

Bonjour,

Et si parcontre on utilise un thème qui n'est pas le thème, si l'on veut qu'il s'adapte à la taille de l'écran, est-ce la même opération que décrite ci-dessus ?

Je suis en V3.

Cordialement.

Bidi

EDN actif(ve)

Rang

Inscrit le : 27/01/2013 à 09h27

Messages: 16

Le 05/02/2013 à 13h59

Oui sch,

je me suis peut etre mal exprimé.

Mais la modifi du dessus permet d'etre mise sur n'importe quel theme. (a partir de Modifications sur vos propres themes.)

Visiteur

EDN Helpers

Rang

Message : 0

Le 05/02/2013 à 16h31

Ah bien

Maintenant est-ce que je vais être capable de mettre les mains dans le code pour le faire, ça c'est moins sûr. Mais j'aimerais bien y parvenir pour que les gens puissent consulter ma WR via leur tél. ou leur tablette.

Bidi

EDN actif(ve)

Rang

Inscrit le : 27/01/2013 à 09h27

Messages: 16

Le 05/02/2013 à 16h35

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

Visiteur

EDN Helpers

Rang

Message : 0

Le 05/02/2013 à 19h12

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 ?

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 05/02/2013 à 19h25

Hello ..

Démo ou preview ?

planet-truck.fr

Site web

Bidi

EDN actif(ve)

Rang

Inscrit le : 27/01/2013 à 09h27

Messages: 16

Le 06/02/2013 à 13h54

voici http://phpboost.cetruc.com/

Attention a selectionner le bon theme dans le menu deroulant

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 07/02/2013 à 17h15

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

planet-truck.fr

Site web

Bidi

EDN actif(ve)

Rang

Inscrit le : 27/01/2013 à 09h27

Messages: 16

Le 07/02/2013 à 19h21

ha embetant :-)

Tu as quoi comme telephone? (pour connaitre ta resolution)

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 07/02/2013 à 20h08

Iphone 5

Je dis ça en tant que "testeur"

planet-truck.fr

Site web

samghami officielle

EDN Curieux(se)

Rang

Inscrit le : 22/02/2013 à 23h16

Messages: 36

Le 16/03/2013 à 11h21

Ta une erreur dans tes CSS.

#navigation{
display:none;
}
}

A remplacé par:

#navigation{
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

Site web

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

Les 10 derniers messages du forum...

Le theme: