Voici une adaptation pour iPhone/iPod touch des thèmes par défaut PunBB version 1.2.
Demo live
Code à intégrer dans header.php, après la ligne 80 :
<link rel="stylesheet" href="style/iphone.css" media="only screen and (max-device-width: 480px)" type="text/css"/>
<meta name = "Viewport" content = "maximum-scale=1.6,width=device-width" />
On peut éventuellement ajouter une icône associée au site, qui permettra de créer un raccourci sur le bureau de l’iPhone. Elle doit être au format .png et de dimension 57×57.
Le code à intégrer dans header.php (suite au précédent code) :
<link rel="apple-touch-icon" href="myiphone_icon.png"/>
Créer un fichier iphone.css et mettre tout ce code CSS 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;
}
Enregistrer votre fichier iphone.css et l’uploader dans le dossier /style de votre forum.
Demo live
Screenshots (à gauche, sans la modification, à droite, avec):
Homepage :


Interface de catégories :


Interface de post :

