Mettre à jour son thème 3.0 en 4.0Wiki

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

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.