[h]Comment intégrer les chartes graphiques de cmsmadesimple dans fluxbb[/h]
Petit point explication : comment vais-je procéder ?
je vais créer un gabarit dans cmsmadesimple que je personnaliserais. Ce gabarit n'a pas à être valide HTML ou quoi que ce soit, ici on utilise juste la puissance des templates smarty pour nos besoins. Il est habituel de prendre comme modèle un gabarit existant, après tout on est ici pour uniformiser son site
Je vais créer également des feuilles de style dans cmsmadesimple. Je peux également utiliser celles qui existent déjà et ajouter une Nième qui comportera uniquement les surcharges inhérente à l'adaptation pour Fluxbb.
Je vais créer une page dans cmsmadesimple, une page cachée, qui sera la seule à être liée à mon gabarit
Je vais créer un fichier en pur php, externe à Cmsms, externe à fluxbb, qui aura pour les missions suivantes
- Appeler ma page cachée
- Parser son contenu et extraire les informations liées aux feuilles de style
- Mettre en cache la page (+ 2/3 modif)
- Mettre en cache le CSS
- Retourner le cache à l'appelant sous la forme d'une liste au même format que ceux utilisés par Fluxbb
Évidement, si le cache existe, seul le dernier point est exécuté. C'est d'ailleurs une différence capitale entre ma méthode proposée sur phpBB et celui ci sur fluxBB : la vitesse d’exécution est odieusement rapide, la bande passante consommée négligeable.
Je vais modifier 1 seul fichier dans fluxbb qui aura pour mission d'appeler le précédent.
Je vais modifier les templates de fluxbb afin de profiter des nouvelles données issues de CmsMadeSimple.
Je vais modifier 2-3 lignes dans le css de FluxBB
Fin de l'explication générale.
Créer son gabarit
C'est certainement la partie la plus complexe ! alors attention. L'idée est de créer un gabarit "au plus proche" de votre modèle habituel, et d'inclure un tag à l'intérieur afin de poser des bornes. le tag est
<CMSMS> dans notre cas, un choix purement arbitraire car on aurait pu choisir <!-- QUELQUECHOSE --> pour ne pas péter la validation xHTML.
Ces bornes sont utilisées plus loin afin de découper le gabarit en différentes sections, cela facilite deux choses :
- Je pourrais virer post-traitement des portions de code du gabarit que je n'ai pas besoin dans fluxBB
- Par extension, mon gabarit peut rester TRÈS proche de l'original, ce qui limite les soucis de report de modifications entre les gabarits d'origine et ceux destinés au forum.
Donc nouveau gabarit nommé simplement "forum"
Citation :{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
{if isset($canonical)}<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}<link rel="canonical" href="{$content_obj->GetURL()}" />{/if}
<title>{sitename} - {title}</title>
<CMSMS>
{global_content name='javascript_header'}
<script type="text/javascript" src="{root_url}/uploads/lib/formToWizard.js"></script>
<script type="text/javascript" src="{root_url}/uploads/lib/niceforms.js"></script>
<script type="text/javascript" src="{root_url}/uploads/lib/other.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="{root_url}/uploads/lib/niceforms-default.css" />
<script type="text/javascript">
{literal}
$(document).ready(function() {
init();
existingLoadEvent();
NFInit();
$("#myform").formToWizard({ submitButton: 'close' });
$('.NFSelectOptions').click(function(){verif();});
$('#close2').click(function(){close();});
$('#close').click(function(){cac();});
if(uniquePage){
$('#step0commands').css('display','none');
}
/* Récupère la bannière*/
$.ajax({
url: "{/literal}{root_url}{literal}/index.php?page=bann_forum",
cache: false,
success: function(html){
$("#ban_target").append(html);
}
});
});{/literal}
</script>
{metadata}
{cms_stylesheet}
<CMSMS>
</head>
<CMSMS>
<body class="subf">
<div id="calc"></div>
<div id="popup">
<form id='myform' action="" class="niceform">
<fieldset>
<legend id='firstTitre'></legend>
<div id='firstMessage'></div>
<div id='close2wrap'><input id="close2" type="button" value="Fermer cette fenêtre"/></div>
</fieldset>
<fieldset>
<legend>Informations Générales</legend>
<dl>
<dt><label for="versionCmsms">Votre version :</label></dt>
<dd>
<select size="1" name="versionCmsms" id="versionCmsms">
<option value='#1.11.1'># 1.11.1</option>
<option value='-1.11.0'> 1.11.0</option>
<option value='-1.10.x'> 1.10.x</option>
<option value='-1.9.4.3'> 1.9.4.3</option>
<option value='!1.9.x'> 1.9.x</option>
<option value='!1.8.x'> 1.8.x</option>
<option value='!1.7.x'> 1.7.x</option>
<option value='#1.6.10'># 1.6.10</option>
<option value='!1.6.x'> 1.6.9 et moins</option>
<option value='?'> Je ne connais pas ma version</option>
</select>
</dd>
</dl>
<dl>
<dt></dt>
<dd>
<span id='versionFaille' class="explication err">Votre version possède une faille de sécurité connue. Mettez vous à jour impérativement dans les plus bref délais<a href='{root_url}/documentation-cms' target='_blank' title="Regarder l'aide">
<img src="data:image/gif,GIF89a%10%00%10%00%C4%1D%00%00%00%00%D0%D4%DA%C4%C9%D1%C9%CE%D5%D6%D9%DF%BF%C5%CE%E3%E5%E8%DD%E0%E3%F7%F7%F7%EF%F0%F1%F4%F4%F4%EA%EB%ED%04%04%04%01%01%01%02%02%02%BC%C2%CB%03%03%03%08%08%08%0A%0A%0A%11%11%11%09%09%09%06%06%06%0E%0E%0E%05%05%05%07%07%07%0D%0D%0D%13%13%13%15%15%15%0B%0B%0B%FF%FF%FF%00%00%00%00%00%00!%F9%04%01%00%00%1D%00%2C%00%00%00%00%10%00%10%00%00%05t%60%D7%01%91%04%5C%00%04%AC%18%20%8EH%2C%CFq6*8%BE%02%5B%AE3%89%60b%15%B4%00%84%C3%C6b%B9%80p%96%00%07s%B12X%AF%06%40%03kp0%0E%E0p4%1Cf4%08%E8%B46%AD%06%04%DE%F0x%1C%E2%18%D8%EF%AB%3B%1E%20%E8%FBW~%7F%23%05%84%85%86%84%13%2F%00%0F%0F%0C%26%14%0D%00%1A%0C.%2F%11%0F%95%2F%9A%9A%24%9B%9E%2F%15%9F%9E!%00%3B" width="16" height="16" alt="besoin d'aide ?" />
</a></span>
<span id='versionObsolete' class="explication warn">Vous utilisez une version obsolète qui n'est plus supportée. Mettez vous à jour pour obtenir l'aide de la communauté<a href='{root_url}/documentation-cms' target='_blank' title="Regarder l'aide">
<img src="data:image/gif,GIF89a%10%00%10%00%C4%1D%00%00%00%00%D0%D4%DA%C4%C9%D1%C9%CE%D5%D6%D9%DF%BF%C5%CE%E3%E5%E8%DD%E0%E3%F7%F7%F7%EF%F0%F1%F4%F4%F4%EA%EB%ED%04%04%04%01%01%01%02%02%02%BC%C2%CB%03%03%03%08%08%08%0A%0A%0A%11%11%11%09%09%09%06%06%06%0E%0E%0E%05%05%05%07%07%07%0D%0D%0D%13%13%13%15%15%15%0B%0B%0B%FF%FF%FF%00%00%00%00%00%00!%F9%04%01%00%00%1D%00%2C%00%00%00%00%10%00%10%00%00%05t%60%D7%01%91%04%5C%00%04%AC%18%20%8EH%2C%CFq6*8%BE%02%5B%AE3%89%60b%15%B4%00%84%C3%C6b%B9%80p%96%00%07s%B12X%AF%06%40%03kp0%0E%E0p4%1Cf4%08%E8%B46%AD%06%04%DE%F0x%1C%E2%18%D8%EF%AB%3B%1E%20%E8%FBW~%7F%23%05%84%85%86%84%13%2F%00%0F%0F%0C%26%14%0D%00%1A%0C.%2F%11%0F%95%2F%9A%9A%24%9B%9E%2F%15%9F%9E!%00%3B" width="16" height="16" alt="besoin d'aide ?" />
</a></span>
<span id='versionInconnue' class="explication warn">Si vous ne connaissez pas votre version, renseignez impérativement les informations systèmes dans la prochaine page afin vérifier ensemble si votre installation est à jour.</span>
</dd>
</dl>
<dl>
<dt><label for="urlCmsms">Url du site :</label></dt>
<dd>
<input type='text' id ='urlCmsms' size='30'/>
</dd>
</dl>
<dl><dt></dt><dd><span class="explication">Très utile pour constater nous même les anomalies, notamment les erreurs de design</span></dd></dl>
<dl>
<dt><label for="hebergeurCmsms">Nom Hébergeur / Serveur :</label></dt>
<dd>
<input type='text' id ='hebergeurCmsms' size='30'/>
</dd>
</dl>
<dl><dt></dt><dd><span class="explication">Nous préciser le nom de l'hébergeur ou le logiciel sur votre PC (wampserver, easyphp, ...) permettra imédiatement de cibler certains problèmes récurrants sur nos forums</span></dd></dl>
</fieldset>
<fieldset>
<legend>Informations Système</legend>
<dl>
<dt>
<label for="moduleCmsms">Ajoutez les informations systèmes:</label>
<a href='http://www.furie.be/wink/redigez-votre-question/redigez-votre-question.htm' target='_blank' title="Regarder l'aide">
<img src="data:image/gif,GIF89a%10%00%10%00%C4%1D%00%00%00%00%D0%D4%DA%C4%C9%D1%C9%CE%D5%D6%D9%DF%BF%C5%CE%E3%E5%E8%DD%E0%E3%F7%F7%F7%EF%F0%F1%F4%F4%F4%EA%EB%ED%04%04%04%01%01%01%02%02%02%BC%C2%CB%03%03%03%08%08%08%0A%0A%0A%11%11%11%09%09%09%06%06%06%0E%0E%0E%05%05%05%07%07%07%0D%0D%0D%13%13%13%15%15%15%0B%0B%0B%FF%FF%FF%00%00%00%00%00%00!%F9%04%01%00%00%1D%00%2C%00%00%00%00%10%00%10%00%00%05t%60%D7%01%91%04%5C%00%04%AC%18%20%8EH%2C%CFq6*8%BE%02%5B%AE3%89%60b%15%B4%00%84%C3%C6b%B9%80p%96%00%07s%B12X%AF%06%40%03kp0%0E%E0p4%1Cf4%08%E8%B46%AD%06%04%DE%F0x%1C%E2%18%D8%EF%AB%3B%1E%20%E8%FBW~%7F%23%05%84%85%86%84%13%2F%00%0F%0F%0C%26%14%0D%00%1A%0C.%2F%11%0F%95%2F%9A%9A%24%9B%9E%2F%15%9F%9E!%00%3B" width="16" height="16" alt="besoin d'aide ?" />
</a>
</dt>
<dd>
<textarea id='moduleCmsms' cols='70' rows='7' ></textarea>
</dd>
</dl>
<dl><dt></dt><dd><span class="explication">Ne négligez jamais cette partie, elle nous permet de résoudre un nombre très important de questions en une seule réponse.</span></dd></dl>
</fieldset>
<fieldset>
<legend>Merci pour votre participation</legend>
<p>
A la fin de la discussion, ajoutez dans le début du titre le terme <span class='important'>[Résolu]</span> entre crochet.
</p>
<p>
Cette simple manipulation nous aide à conserver le forum bien organisé. Merci de penser à nos pauvres modérateurs, mais également aux prochains visiteurs 
</p>
<input id="close" type="button" value="Valider ce premier formulaire"/>
</fieldset>
</form></div>
<div id="page">
<div id="pagewrapper">
<div id="langlog">
<div id="login">
{global_content name='social'}
</div>
<div id="lang">
{global_content name='langs'}
</div>
</div>
<!-- start menu -->
<div id="menusearch">
{* <div id="search">
{search}
</div> *}
<div id="menu_vert">
{menu template="corporate_top"}
</div>
</div>
<!-- end menu -->
<!-- start header -->
<div id="header">
<ul id='headlist'>
<li>
<span class='btn_donnate'>{cms_selflink page='participez-cms' text='Donation'}</span>
</li>
<li>
<span class='btn_down'>{global_content name='telecharger'}</span>
</li>
</ul>
<h1><a href="{root_url}">{sitename}</a></h1>
</div>
<!-- end header -->
<!-- start content -->
<div id="content">
<CMSMS>
<CMSMS>
{content}
<CMSMS>
<div class='clearb'></div>
<div class='forumpun'><div class='forumban'><div id='ban_target' class='ban'>{*Sera remplis par Ajax*}</div></div></div>
</div>
<!-- end content -->
</div>
<div id="foot">
<div id="footer">
{menu template="accessible_simple_navigation" number_of_levels="2"}
<div class="clearb"></div>
{global_content name='footer'}
<div class='clearboth'> </div>
</div>
</div>
</div>
<div id="follow">
{global_content name='follow'}
</div>
{global_content name='GA'} {global_content name='popup_content'}
<CMSMS>
</body>
</html>
Ce qui donne de manière synthétique :
Citation :1 - les headers : doctypes, ...
<CMSMS>
2 -le javascript
<CMSMS>
3 -la balise </head>
<CMSMS>
4 -le début du body (notez, la classe body est personnalisée, j'utilise cette classe dans mes fichiers css habituels)
<CMSMS>
5 - du vide (oups, un oublis sans doute...)
<CMSMS>
6 - la balise {content}, bien connue.
<CMSMS>
7 - la fin de page / fin du body + GoogleAnalytics + ...
<CMSMS>
8 - les balises de fin : </body> et </html>
Qu'aurons nous besoin dans fluxBB : le javascript du header, le début du body, la fin du body et c'est tout. Soit respectivement les parties
2-4-7 de notre découpage.
Notez que j'ai également ajouté un peu de code que je sais nécessaire dans fluxbb : mon formulaire de renseignement lors de la création d'un nouveau topic, ce n'est pas un code nécessaire pour vous. De manière plus générale
n'utilisez pas cet exemple en l'état ! si vous réfléchissez 2,5 secondes, vous comprendrez que c'est MON gabarit, il ne marchera jamais chez vous
Créer ses feuilles de styles
Personnellement je n'ai pas créé de css en plus. J'ai déporté les surcharges de css directement dans fluxbb. Mais vous pouvez choisir de créer une feuille de style dédiée à cette surchage.
J'ai rattaché 3 feuilles existantes au gabarit : Corporate (la principale), ie pour notre ami de toujours et popup pour la popup d'arrivée.
Aucune modification particulière, y compris dans les urls ou le code smarty.
Créer une page cachée
J'ai créé une bête page de contenu avec un contenu "à la con" et à laquelle j'ai donné une url "à la con" afin de m'assurer qu'elle ne soit pas indéxée. Vous pouvez d'ailleurs la voir en action sur le .fr en tapant dans l'url "/xsa/plu". Dans le code source de cette page html, vous pourrez retrouver nos fameuses balises
<CMSMS>
Créer le fichier pur PHP
Créez dans votre répertoire du forum un sous répertoire nommé "tplcmsms"
Créez dedans un fichier vide index.html pour éviter de se faire indexer le contenu du répertoire.
Créez dedans un fichier "tpl.php" qui contient ce code
Citation :<?php
$config = array();
include_once(PUN_ROOT.'../config.php');
$cmsms = array();
//Lecture du fichier de cache
$root_url = "http: //www.votresite.fr";
$filename = PUN_ROOT."tplcmsms/cache.php";
unset($config);
//echo '<!--'.$filename .'-->';
if(is_file($filename) && false)
{
require($filename);
$cmsms = $cmsarr;
} else
{
$cms = file_get_contents("$root_url/xsa/plu");
$cms = str_replace('<base href="'.$root_url.'/" />','',$cms);
$searchD = '<link rel="stylesheet" type="text/css" href="'.$root_url.'/tmp/cache/';
$searchF = '.css"';
$posD = stripos($cms, $searchD);
$arrayOldCss = array();
$arrayNewCss = array();
while($posD !== FALSE)
{
$posF = stripos($cms, $searchF, $posD);
$mycss = substr($cms, $posD + 45, $posF - $posD - 45 + 4);
$mycssContent = file_get_contents($mycss);
$mynewcss = str_replace('/tmp/cache/', '/forum/tplcmsms/', $mycss);
$filenamecss = "./tplcmsms/".substr($mynewcss, stripos($mynewcss, '/forum/tplcmsms/') + strlen('/forum/tplcmsms/'));
//creation du fichier de cache pour css
$handle = @fopen($filenamecss , "w");
if (fwrite($handle, $mycssContent) === FALSE) {
echo "Impossible d'ecrire dans le fichier ($filenamecss)";
exit;
}
fclose($handle);
$arrayOldCss[] = $mycss;
$arrayNewCss[] = $mynewcss;
$posD = stripos($cms, $searchD, $posF);
}
for($i = 0; $i < count($arrayOldCss); $i++)
{
$cms = str_replace($arrayOldCss[$i], $arrayNewCss[$i],$cms);
}
$cms = explode('<CMSMS>',$cms);
$cmsms = array();
// $cmsms['<http>'] = $cms[0];
$cmsms['<CMS_header_content>'] = $cms[1];
//$cmsms['</head>'] = $cms[2];
$cmsms['<CMS_body_haut>'] = $cms[3];
//$cmsms['<CMS_js>'] = $cms[4];
//$cmsms['<body_centre>'] = $cms[5];
$cmsms['<CMS_body_bas>'] = $cms[6];
//$cmsms['</body>'] = $cms[7];
//creation du fichier de cache
$handle = @fopen($filename, "w");
if (fwrite($handle, print_out($cmsms)) === FALSE) {
echo "Impossible d'ecrire dans le fichier ($filename)";
exit;
}
fclose($handle);
}
$tpl_main = str_replace('<CMS_header_content>', $cmsms['<CMS_header_content>'], $tpl_main);
$tpl_main = str_replace('<CMS_body_haut>', $cmsms['<CMS_body_haut>'], $tpl_main);
$tpl_main = str_replace('<CMS_body_bas>', $cmsms['<CMS_body_bas>'], $tpl_main);
function print_out($cmsms)
{
$buffer = '<?php
$cmsarr = array();
';
foreach($cmsms as $key => $value)
{
$buffer .= '$cmsarr["'.$key.'"] =
<<<\'TEXT\'
'.$value.'
TEXT;
';
}
$buffer .= '
?>';
return $buffer;
}
?>
J'ai personnellement ajouté d'autre code propre à notre installation cmsmadesimple.fr mais qui n'a pas besoin d'être montré ici.
En
vert on retrouve l'url de la page cachée : à personnaliser si vous n'avez pas la même url que dans mon tuto.
En
bleu on récupère nos parties
2-4-7 (oubliez pas que php fait commencer les indexes d'un tabeau à zéro et non à 1, cela explique mon décalage)
Que faisons nous des autres parties ? on les jette
En
orange on affecte à des balises purement fluxbb le contenu de nos parties
2-4-7 (pour rappel : parties issues de cmsmadesimple)
Notez : Si ici j'ai choisit d'utiliser les même chaines de bout en bout (ex : <CMS_body_haut>), sachez que ce n'est pas obligatoire. par habitude, FluxBB travaille avec des balises entre < et >. On pourrait avoir donc :
Citation :$cmsms['##oooo'] = $cms[6];
puis
Citation :$tpl_main = str_replace('<Une_Balise_8_Au_HasarD>', $cmsms['##oooo'], $tpl_main);
la balise
<Une_Balise_8_Au_HasarD> devient alors disponible dans tous les templates de fluxBB.
Ce que fait ce programme en dehors des points déjà décrits plus haut :
Il fait du changement d'url pour adapter les bases et conserver des images accessible
Il fait une copie des fichiers css compilées de cmsms
Il créé un fichier php de cache qui contiendra les contenus des parties
2-4-7
Modifier Fluxbb
Comme j'ai pu le dire, cette version du tuto est très light en terme de modifications de fichier source. Néanmoins pensez à renouveler cette partie à chaque fois que vous ferrez une mise à jour de fluxBB !
Moi ça se passe ligne 290 dans le fichier header.php
après
Citation :$tpl_main = str_replace('<pun_status>', $tpl_temp, $tpl_main);
// END SUBST - <pun_status>
Ajouter simplement (oui oui, restons simple)
Citation ://CMS
include_once('tplcmsms/tpl.php');
finit
Modifier les templates de Fluxbb
Je pars du principe que vous travaillez avec le gabarit par défaut : Air. Les fichiers à modifiés sont dans le répertoire /include/templates de l'installation de votre forum.
Les modifications sont toujours les mêmes, je vous donne donc un exemple avec help.tpl
Avant :
Citation :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<pun_language>" lang="<pun_language>" dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<pun_head>
</head>
<body>
<div id="punhelp" class="pun">
<div class="top-box"><div><!-- Top Corners --></div></div>
<div class="punwrap">
<div id="brdmain">
<pun_main>
</div>
</div>
<div class="end-box"><div><!-- Bottom Corners --></div></div>
</div>
</body>
</html>
après
Citation :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<pun_language>" lang="<pun_language>" dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<pun_head>
<CMS_header_content>
</head>
<body> <--- J'ai supprimé cette ligne
<CMS_body_haut>
<div id="punhelp" class="pun">
<div class="top-box"><div><!-- Top Corners --></div></div>
<div class="punwrap">
<div id="brdmain">
<pun_main>
</div>
</div>
<div class="end-box"><div><!-- Bottom Corners --></div></div>
</div>
<CMS_body_bas>
</body>
</html>
Très simplement j'y inclus les balises contenant les désormais fameuses parties
2-4-7
J'ai également supprimé la ligne <body> au profit de mon code perso de cmsms qui donnera un truc du style <body class=....> pour m'aider dans la création de règles css spécifiques au forum.
Modifier le css de Fluxbb
Très simple, toujours partant du principe que vous avez le gabarit par défaut : Air, ça se passe dans le fichier /style/Air.css de l'installation de votre forum.
Re-Notez que vous avez la possibilité de déporter ces modifs dans CmsMadeSimple avec une feuille de style dédiée.
== fin de cette partie ==
A ce stade du tuto, votre forum est capable d'afficher un design de type CmsMadeSimple.
.