Archives FluxBB.fr

Les archives de FluxBB.fr

Recherche rapide

Vous n'êtes pas identifié(e).

Version 1.4.13 : [.tar.gz][.zip] (maj 20/10/2014)
Pack langue française pour 1.4.x : [.zip] (maj 06/01/2012)

Branche 1.5.x : fluxbb.org

Version 1.2.24 fr (entièrement en français) : [.zip] (maj 26/08/2011)
Pack langue française pour 1.2.x : [.zip] [.rar] (maj 15/10/2006)

Vous avez un problème ?
Avant de poser votre question sur les forums d'entraide nous vous invitons à consulter :

#1 23-09-2008 23:09:36

Clayton
Nouveau Membre

Adaptation pour iPhone/iPod touch

Voici une adaptation du design classique PunBB pour iPhone/iPod touch. Afin d'éviter de se casser l'index et perdre du temps à force de zoomer sur le texte.

Cette adaptation fonctionne avec les thèmes par défaut en respectant leurs couleurs et particularités.

J'ai fait sauter pas mal d'informations afin d'épurer la présentation - dans si peu de place c'est nécessaire, considérant que la lecture de forum sur iPhone n'est qu'accessoire à celle sur moniteur classique.

Bien sûr cette petite réalisation, seulement un fichier CSS, est une base de travail que vous pouvez améliorer, j'ai juste voulu partager ce petit code qui ne doit sûrement pas être exempt de défauts...

Code à intégrer dans header.php, après la ligne 80 :

<link rel="stylesheet" href="iphone.css" media="only screen and (max-device-width: 480px)" type="text/css"/>
<meta name = "Viewport" content = "maximum-scale=1.6,width=device-width" >

Eventuellement on peut ajouter une icône pour pouvoir ensuite enregistrer le lien du forum dans la Home de l'iPhone. L'icône doit être au format png et de dimension 57x57.
Le code à intégrer dans header.php (suite au précédent code)  :

<link rel="apple-touch-icon" href="myiphone_icon.png"/>

Le code CSS, enfin :

html,body {
width:320px;
display:block;
margin:0!important;
padding:0!important;
}

div.box #brdtitle {
background-image:url(iphone.jpg);
height:40px;
border-bottom:0;
}

#brdheader div.box {
border-width:0;
}

#punwrap {
width:320px;
display:block;
max-width:320px;
min-width:320px;
text-align:left;
border-width:0;
margin:0;
padding:0;
}

.tcl {
width:50%;
}

#punindex {
width:320px;
display:block;
}

#brdmenu li {
margin-right:2px;
padding-left:2px;
line-height:20px;
}

.pun h1 {
background-repeat:no-repeat;
display:block;
height:20px;
position:relative;
top:2px;
left:0;
}

.pun #brdtitle p{
height:20px;
}

.pun #brdmenu {
background-image:none;
padding:0;
}

div.linkst .conl,div.linksb .conl,div.postlinksb .conl {
width:12em;
}

div.linkst .conr,div.linksb .conr,div.postlinksb .conr {
width:14em;
}

.linkst ul,.linksb ul,.postlinksb ul {
margin-left:0;
clear:left;
}

div.icon {
margin-left:.1em;
}

td div.tclcon {
margin-left:1.6em;
}

div.postleft,div.postfootleft {
width:100%;
float:none;
clear:both;
}

div.postleft {
padding-bottom:5px;
}

div.postright,div.postfootright {
border-left-width:0;
border-left-style:solid;
}

div.postright {
padding-top:5px;
padding-bottom:5px;
}

div.block2col div.blockform,div.block2col div.block,#viewprofile dd {
margin-left:0;
}

#searchform .conl input {
width:150px;
}

#searchform input {
width:70%;
}

.blockform .rbox input {
width:25px;
}

.tc2,.tc3,.tcmod,.tcl td,#brdstats .conr,#brdwelcome .conl,div.postleft dd,div.postfootleft,.postavatar {
display:none;
}

#brdstats .conl,#brdfooter .conl {
width:25em;
}

.conr,div.blockmenu,#viewprofile dt {
width:100%;
}

div.txtarea,.blockform input {
width:95%;
}

#searchform div.infldset,#searchform .inform fieldset {
width:250px;
}

Vous pouvez ajouter une bannière de 320px de large, pour la hauteur à vous de voir, il faudra seulement faire des ajustements nécessaires dans le CSS.

Voilà, il ne manquerait plus qu'éventuellement ajouter un script de redimensionnement d'images en JS.

Dernière modification par Clayton (23-09-2008 23:17:11)

Hors ligne

#2 24-09-2008 09:12:33

Mpok
Néo Admin

Re : Adaptation pour iPhone/iPod touch

Pas testé... mais excellente initiative ! smile
En attente des avis de ceux qui auront testé.


Life is a struggle, programming is a suffer.

Hors ligne

#3 13-07-2009 20:46:35

Maxtrucs
Membre

Re : Adaptation pour iPhone/iPod touch

j'ai tester, mais je n'arrive pa a trouver la ligne 80
j'ai compté 80 ligne depuis le début du fichier, et paf marche pas
je remet le fichier d'origine, et recommence en comptant a partir du début du code, et marche toujour pas
si vous pouviez me donner le code qu'il y a juste avant ce que je doit ajouter ?

Hors ligne

#4 19-07-2009 19:21:17

Maxtrucs
Membre

Re : Adaptation pour iPhone/iPod touch

up
toujour pas de réponse ?
aussi, il faut le mettre ou le code css ?

Dernière modification par Maxtrucs (19-07-2009 19:29:06)

Hors ligne

#5 19-09-2009 16:00:16

NoX09
Habitué actif

Re : Adaptation pour iPhone/iPod touch

@maxtrucs :
Cherchez dans header.php (vers ligne 80) :

<title><?php echo $page_title ?></title>
<link rel="stylesheet" type="text/css" href="style/<?php echo $pun_user['style'].'.css' ?>" />

Puis rajouter:
j'ai modifié href="iphone.css" par href="style/mobile.css"

<link rel="stylesheet" href="style/mobile.css" media="only screen and (max-device-width: 480px)" type="text/css"/>
<meta name = "Viewport" content = "maximum-scale=1.6,width=device-width" >

Enregistrez et uploadez header.php à la racine de votre forum.

Ensuite créer un fichier mobile.css et mettre tout ce code dedans :

html,body {
width:320px;
display:block;
margin:0!important;
padding:0!important;
}

div.box #brdtitle {
background-image:url('./img/iphone.jpg');
height:40px;
border-bottom:0;
}

#brdheader div.box {
border-width:0;
}

#punwrap {
width:320px;
display:block;
max-width:320px;
min-width:320px;
text-align:left;
border-width:0;
margin:0;
padding:0;
}

.tcl {
width:50%;
}

#punindex {
width:320px;
display:block;
}

#brdmenu li {
margin-right:2px;
padding-left:2px;
line-height:20px;
}

.pun h1 {
background-repeat:no-repeat;
display:block;
height:20px;
position:relative;
top:2px;
left:0;
}

.pun #brdtitle p{
height:20px;
}

.pun #brdmenu {
background-image:none;
padding:0;
}

div.linkst .conl,div.linksb .conl,div.postlinksb .conl {
width:12em;
}

div.linkst .conr,div.linksb .conr,div.postlinksb .conr {
width:14em;
}

.linkst ul,.linksb ul,.postlinksb ul {
margin-left:0;
clear:left;
}

div.icon {
margin-left:.1em;
}

td div.tclcon {
margin-left:1.6em;
}

div.postleft,div.postfootleft {
width:100%;
float:none;
clear:both;
}

div.postleft {
padding-bottom:5px;
}

div.postright,div.postfootright {
border-left-width:0;
border-left-style:solid;
}

div.postright {
padding-top:5px;
padding-bottom:5px;
}

div.block2col div.blockform,div.block2col div.block,#viewprofile dd {
margin-left:0;
}

#searchform .conl input {
width:150px;
}

#searchform input {
width:70%;
}

.blockform .rbox input {
width:25px;
}

.tc2,.tc3,.tcmod,.tcl td,#brdstats .conr,#brdwelcome .conl,div.postleft dd,div.postfootleft,.postavatar {
display:none;
}

#brdstats .conl,#brdfooter .conl {
width:25em;
}

.conr,div.blockmenu,#viewprofile dt {
width:100%;
}

div.txtarea,.blockform input {
width:95%;
}

#searchform div.infldset,#searchform .inform fieldset {
width:250px;
}

Pensez à adapter à votre image :

div.box #brdtitle {
background-image:url('./img/iphone.jpg');

Enregistrer votre fichier mobile.css et uploader le dans le dossier style de votre forum => forum/style/mobile.css

Dernière modification par NoX09 (19-09-2009 16:01:57)


Utiliser : FAQ - AIDE - RECHERCHE

Hors ligne

#6 01-10-2009 19:49:49

stubborn
Membre

Re : Adaptation pour iPhone/iPod touch

Le site iphon.fr utilise cette modification non ?

Hors ligne

#7 11-11-2009 19:42:29

Clayton
Nouveau Membre

Re : Adaptation pour iPhone/iPod touch

stubborn a écrit :

Le site iphon.fr utilise cette modification non ?

Oui, apparemment ! smile

Hors ligne

#8 14-12-2009 05:54:41

x3dt
Membre

Re : Adaptation pour iPhone/iPod touch

Merci j'ai installer sa sur mon forum smile

Hors ligne

#9 14-12-2009 18:29:39

KzL31
Régulier

Re : Adaptation pour iPhone/iPod touch

un feedback pour savoir si c'est vraiment positif svp smile ?

Hors ligne

#10 08-01-2010 20:36:19

monspica
Nouveau Membre

Re : Adaptation pour iPhone/iPod touch

Bonsoir,
Voila j'ai effectuer les modification sauf que je rencontres un bogue!
Enfaite le header de mon forum actuel apparait en plus du header spécialement fait pour ce style.
Mon forum: MonSpica

Merci pour votre aide

Hors ligne

#11 19-01-2010 00:53:11

ekta
Membre

Re : Adaptation pour iPhone/iPod touch

Salut.
Malheureusement incompatible avec les css de la 1.3 !
Quelqu'un l'a-t-il traduit ? roll

Hors ligne

#12 19-01-2010 14:03:41

Kramer
Membre

Re : Adaptation pour iPhone/iPod touch

Je testerais a l'occasion smile

Hors ligne

#13 16-02-2010 18:22:08

musicman63
Membre

Re : Adaptation pour iPhone/iPod touch

Bonjour, je voudrais savoir s'il y a eu une nouvelle version de ce code pour 1.3 ou si quelqu'un avait l'intention de le faire. Merci d'avance pour votre reponse !

Hors ligne

#14 18-02-2010 19:45:41

NoX09
Habitué actif

Re : Adaptation pour iPhone/iPod touch

Je l'ai installé sur mon forum puis j'ai testé avec mon HTC HERO iphone killer.

La page d'accueil du forum est bien redimensionnée, par contre j'ai l'impression que toutes les autres pages (viewforum.php, viewtopic.php) ne chargent pas le fichier CSS gérant la largeur maximum de la page pour les petites résolutions et donc ne réduit pas la largeur du site. Pourtant le fichier CSS est bien présent dans le header.php, qui est appelé sur toutes les pages ...
Je dois vérifier pour confirmer mes dires, j'ai un petit doute ...

Dernière modification par NoX09 (18-02-2010 19:46:22)


Utiliser : FAQ - AIDE - RECHERCHE

Hors ligne

Pied de page des forums