Migrer un thème vers une nouvelle version

Mettre à jour son thème 3.0 en 4.0

Dernière mise à jour : 15/07/2014 à 06h25
Table des matières
  1. Le fichier config.ini
  2. Le header.tpl
    1. Le Cache CSS
    2. Les fichiers CSS des modules
    3. Le favicon
    4. Javascript
    5. TinyMCE
    6. Le logo
    7. Code de la maintenance
  3. Le content.css
  4. Fichiers images à déplacer et créer
  5. La preview du thème
  6. Fichiers CSS devenus inutiles
Nous allons voir au fil de cet article la manière de modifier un thème 3.0 afin de pouvoir l'utiliser sur la version 4.0 de PHPBoost.















Le fichier config.ini

















Le fichier config.ini a été modifié afin de permettre aux graphistes de paramétrer leurs thèmes en fonction des besoins.















Modifications apportées :















  • 'left_column' et 'right_column' laissent place à 'columns_disabled', qui définit les emplacements de menu à désactiver à l'installation du thème.















    Par exemple, pour désactiver la colonne gauche et le sous entête, on entrera ceci :







    Code INI : 
    columns_disabled=left,sub_header
















    Pour info, voilà les différentes valeurs possibles :







    Code INI : 
    header,sub_header,top_central,bottom_central,top_footer,footer,left,right
  • L'adresse de l'image de prévisualisation est maintenant indiquée dans le config.ini . On rétrograde me direz-vous ? Que nenni ! L'avantage est qu'il est maintenant possible d'afficher plusieurs images de prévisualisation, et en taille réelle s'il vous plaît :)







    Par exemple, pour définir 2 images de prévisualisation du thème, nous écrirons :







    Code INI : 
    pictures="theme/images/theme.jpg,theme/images/apercu2.png"
























Bien entendu, n'oubliez pas de changer la version de compatibilité du thème :







Code INI : 
compatibility=4.0
















N'oubliez pas d'éditer les config.ini de chaque dossier langue de votre thème.















Le header.tpl

















Le header.tpl a été repensé afin de gagner en visibilité et de profiter des nombreuses améliorations apportées sur le noyau.















Les explications données ci-dessous s'appliquent à la majorité des thèmes. Il se peut que le contenu de votre fichier soit différent des exemples affichés. Lisez bien toutes les consignes afin d'éviter toute erreur.















Le Cache CSS

















PHPBoost V4 permet de mettre les fichiers CSS en cache afin de gagner en rapidité d'execution.















Remplacer :
Code TPL : 
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/generic.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/bbcode.css" type="text/css" media="screen, print, handheld" />








par :
Code TPL : 
<!-- Theme CSS -->
# IF C_CSS_CACHE_ENABLED #
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/css_cache.php?name=theme-{THEME}&files=
/templates/{THEME}/theme/design.css;
/templates/{THEME}/theme/global.css;
/templates/{THEME}/theme/generic.css;
/templates/{THEME}/theme/content.css" type="text/css" media="screen, print, handheld" />
# ELSE #
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/generic.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print, handheld" />
# ENDIF #
















Les fichiers CSS des modules

















La variable des fichiers CSS associés aux modules change.















Remplacez
Code TPL : 
{ALTERNATIVE_CSS}








par
Code TPL : 
{MODULES_CSS}
















Le favicon

















La favicon est maintenant paramétrable depuis le panneau d'administration.















Remplaçez
Code TPL : 
<link rel="shortcut icon" href="{PATH_TO_ROOT}/favicon.ico" type="image/x-icon" />








par
Code TPL : 
    # IF C_FAVICON #
    <link rel="shortcut icon" href="{FAVICON}" type="{FAVICON_TYPE}" />
    # ENDIF #
















Javascript

















Deux variables supplémentaires sont nécessaire pour le Javascript.















Ajouter
Code TPL : 
var THEME = "{THEME}";
var LANG = "{LANG}";








en dessous de
Code TPL : 
var TOKEN = "{TOKEN}";
















Remplacez :















Code TPL : 
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/prototype.js"></script>
        <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/scriptaculous.js"></script>
        <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/global.js"></script>
















Par :















Code TPL : 
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/lib/js/scriptaculous/prototype.js"></script>
        <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/lib/js/scriptaculous/scriptaculous.js"></script>
        <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/lib/js/phpboost/global.js"></script>
        <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/lib/js/lightbox/lightbox.js"></script>
















TinyMCE

















TinyMCE est maintenant géré comme un module.















Supprimer
Code TPL : 
# IF C_BBCODE_TINYMCE_MODE # <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/content/tinymce/tiny_mce.js"></script> # ENDIF #
































Le logo est maintenant modifiable dans le panneau d'administration.















Ajouter
Code TPL : 
# IF C_HEADER_LOGO #
    <style type="text/css">
        div#header_container {
               background: url('{HEADER_LOGO}') no-repeat;
        }
    </style>
# ENDIF #
 








en dessous de la balise
Code TPL : 
<body>
















Code de la maintenance

















La maintenance est maintenant externalisée.















Remplacez
Code TPL : 
# IF C_MAINTAIN_DELAY #
# IF C_ALERT_MAINTAIN #
<div style="position:absolute;top:5px;width:99%;">
    <div style="position:relative;width:400px;margin:auto;margin-top:30px;" class="warning">
        {L_MAINTAIN_DELAY}
        <br /><br />
        <script type="text/javascript">
            document.write('<div id="release">{L_LOADING}...</div>');
        </script>
        <noscript>
            <strong>{DELAY}</strong>
        </noscript>
    </div>
</div>
# ENDIF #
 
<script type="text/javascript">
<!--
var release_timeout_seconds = 0;
function release(year, month, day, hour, minute, second)
{
    if (document.getElementById('release'))
    {
        var sp_day = 86400;
        var sp_hour = 3600;
        var sp_minute = 60;
 
        now = new Date({MAINTAIN_NOW_FORMAT}+release_timeout_seconds++);
        end = new Date(year, month, day, hour, minute, second);
        release_time = (end.getTime() - now.getTime())/1000;
 
        if( release_time <= 0 )
        {
            document.location.reload();
            release_time = '0';
        }
        else
            timeout = setTimeout('release('+year+', '+month+', '+day+', '+hour+', '+minute+', '+second+')', 1000);
 
        release_days = Math.floor(release_time/sp_day);
        release_time -= (release_days * sp_day);
 
        release_hours = Math.floor(release_time/sp_hour);
        release_time -= (release_hours * sp_hour);
 
        release_minutes = Math.floor(release_time/sp_minute);
        release_time -= (release_minutes * sp_minute);
 
        release_seconds = Math.floor(release_time);
        release_seconds = (release_seconds < 10) ? '0' + release_seconds : release_seconds;
 
        document.getElementById('release').innerHTML = '<strong>' + release_days + '</strong> {L_DAYS} <strong>' + release_hours + '</strong> {L_HOURS} <strong>' + release_minutes + '</strong> {L_MIN} <strong>' + release_seconds + '</strong> {L_SEC}';
    }
}
if ({UNSPECIFIED})
    release({MAINTAIN_RELEASE_FORMAT});
else
{
    if (document.getElementById('release'))
        document.getElementById('release').innerHTML = '<strong>{DELAY}</strong>';
}
-->
</script>
# ENDIF #








par
Code TPL : 
    # INCLUDE  MAINTAIN #
























Le content.css

















PHPBoost utilise en plus de la balise "input", la balise "button".















remplacez :
Code CSS : 
input.submit{
input.submit:hover{
input.reset{
input.reset:hover{








respectivement par :
Code CSS : 
input.submit, button.submit{
input.submit:hover, button.submit:hover{
input.reset, button.reset{
input.reset:hover, button.reset:hover{
















vers les lignes 150















Ajouter dans votre fichier :















Code CSS : 
/* Commentaires */
.comment {
    width:98%;
    margin-bottom:20px;
    overflow:auto;
}
 
.comment-date {
    margin-left: 10px;
}
 
.comment-user_infos {
    text-align:center;
    width:150px;
    float:left;
}
 
.comment-content {
    margin-left:180px;
}
 
.view-topic {
    margin-top: 10px;
}
 
.comment-message {
    position: relative;
    padding: 15px;
    margin-top: 5px;
    border: 1px solid #D6DEE7;
    color: #333;
    background:#ECEFFA;
    min-height: 80px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.comment-message::before {
    content: "";
    top: 15px;
    bottom: auto;
    left: -25px;
    position: absolute;
    border-width: 15px 25px 15px 0;
    border-color: transparent #D6DEE7;    
    border-style: solid;
    display: block;
    width: 0;
}
 
.comment-message::after {
    content: "";
    top: 16px;
    bottom: auto;
    left: -24px;
    position: absolute;
    border-width: 14px 24px 14px 0;
    border-color: transparent #ECEFFA;    
    border-style: solid;
    display: block;
    width: 0;
}
 
.comment-avatar{
    width:80px;
}
 
.message-containt{
    overflow:auto;    
}
 
div#comment-pseudo a {}
 
.comment-user_infos img{
    padding:10px 0px;    
}
 
.comment-moderate{
    background:#ECEFFA;
    border: 1px solid #D6DEE7;
    border-radius:4px;
    padding-top:4px;
    width: 98%;
    text-align:center;
    vertical-align:middle;
}
.comment-moderate a{
    vertical-align:top;
}
















Mais aussi :















Code CSS : 
.module_top_title {
    float:left;
    font-size:12px;
    margin-left:3px;
    font-weight:bold;
}
 
.module_top_title img {
    margin-top:-2px;
}
 
.module_top_com {
    float:right;
}
 
.module_actions {
    float:right;
    margin:0 10px 15px;
    margin-top:-25px;
}
























Fichiers images à déplacer et créer

















Les fichiers suivants ont été déplacé et crées :







Copiez l'image 
"com_mini.png"
dans le repertoire 
"templates\{VotreTheme}\images"
.























La preview du thème

















Là où il n'y avait possibilité de ne présenter qu'une image de 240 pixels de large, la version 4 nous laisse maintenant en afficher plusieurs en taille réelle.







Je vous laisse donc créer autant de preview que vous voulez, et stockez les où vous le souhaitez (dans le dossier du thème bien sûr).







Notez tout de même leurs emplacements, car il faudra par la suite indiquer à PHPBoost où sont stockées ces images.















Seule recommandation : Les images doivent faire 1024 pixels de large.















Vous pouvez maintenant importer le thème modifié dans votre installation PHPBoost version 4 !















Fichiers CSS devenus inutiles

















Vous pouvez également supprimer les fichiers bbcode.css et tinymce présents dans votre thème qui sont maintenant devenus inutiles.
Cette page a été vue 7757 fois