Migrer un thème vers une nouvelle version

Mettre à jour son thème 3.0 en 4.0

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




    <span class="message-helper notice">



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



    Code INI :
    header,sub_header,top_central,bottom_central,top_footer,footer,left,right
    </span>
  • 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








<span class="message-helper notice">N'oubliez pas d'éditer les config.ini de chaque dossier langue de votre thème.</span>







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.







<span class="message-helper notice">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.</span>







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 :








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{








<span class="message-helper notice">vers les lignes 150</span>







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.







<span class="message-helper success">Vous pouvez maintenant importer le thème modifié dans votre installation PHPBoost version 4 !</span>







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 5970 fois
Annonces