Migrer un thème vers une nouvelle version

Mettre à jour son thème 5.0 en 5.1

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 19/02/2017 à 00h30
Table des matières
  1. Avant de commencer
  2. Le fichier de configuration
  3. L'UTF8
    1. L'encodage des fichiers
    2. Le fichier frame.tpl
      1. charset
      2. viewport
      3. La lightcase
  4. Le fichier body.tpl
    1. Le code du compteur de visite
    2. la position du compteur de visite
    3. Le code HTML du scroll to top
  5. Les fichiers CSS
    1. Le fichier design.css
    2. Le fichier global.css
    3. Le fichier form.css
    4. Le fichier content.css
    5. login.css
# ARTICLE EN COURS - DÉVELOPPEMENT DE LA V5.1 EN COURS #

## Cet article n'est pas complet, il sera actualisé pour la sortie des différentes pré-versions ##

Nous allons voir au fil de cet article la manière de modifier un thème 5.0 afin de pouvoir l'utiliser sur la version 5.1 de PHPBoost.

Avant de commencer


La mise à jour 5.1 de PHPBoost est une mise à jour avec peu d'impact sur les thèmes.

Le travail de la version 5.0 porte ses fruits puisque cette nouvelle version ira très vite en conversion.

Les modifications présentées dans cet article n'intègrent pas les différents éléments que vous auriez pu ajouter ou modifier dans vos fichiers

Le fichier de configuration


La première étape pour rendre le thème compatible est de modifier la compatibilité dans le fichier config.ini.

Remplacer la ligne "
compatibility=5.0
" par "
compatibility=5.1
"

A partir de cette étape, le thème peut être installé via le panneau d'administration. Il sera presque entièrement fonctionnel

L'UTF8


L'encodage des fichiers


C'est peut être la partie la plus compliqué pour qui ne sait pas comment si prendre. Avec le passage de PHPBoost en UTF8, il est important de convertir tous les fichiers qui contiennent du texte (notamment avec des accents) en UTF8 (sans BOM). Pour cela il faudra utiliser les fonctions de conversion de votre outils de développement (notepad++, sublimeText, etc...)

La conversion des fichiers sans accents n'est pas obligatoire mais vous pouvez le réaliser aussi pour être tranquille.

Voici les fichiers qu'il faut absolument convertir :
  • lang/french/desc.ini
  • lang/english/desc.ini
  • config.ini



Si vous avez des commentaires, il sera conseillé de convertir aussi les fichiers :
  • body.tpl
  • frame.tpl
  • les fichiers css



Le fichier frame.tpl


charset


Il faut changer le meta du fichier frame.tpl

Remplacer la ligne 5 
<meta charset="windows-1252" />
par 
<meta charset="UTF-8" />
.

Si la ligne ci-dessous existe, il faudra la supprimer : 
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>


viewport


Pour respecter le W3C, modifier le meta viewport en 
<meta name="viewport" content="width=device-width, initial-scale=1.0">


La lightcase


Le CSS de la lightcase ayant été déplacé dans le noyau, il faut réaliser un appel du fichier lightcase.css.

- Ajouter /kernel/lib/js/lightcase/css/lightcase.css; juste après l'appel font-awesome.css; dans la partie CACHE

- Ajouter 
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/js/lightcase/css/lightcase.css" />
dans la partie sans CACHE.

Cela donne :
Code CSS : 
# IF C_CSS_CACHE_ENABLED #
<link rel="stylesheet" href="${CSSCacheManager::get_css_path('/templates/default/theme/default.css;/kernel/lib/css/font-awesome/css/font-awesome.css;/kernel/lib/js/lightcase/css/lightcase.css;/templates/{THEME}/theme/design.css;/templates/{THEME}/theme/content.css;/templates/{THEME}/theme/table.css;/templates/{THEME}/theme/form.css;/templates/{THEME}/theme/global.css;/templates/{THEME}/theme/cssmenu.css')}" type="text/css" media="screen, print" />
# ELSE #
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/js/lightcase/css/lightcase.css" />
<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/content.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/table.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/form.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/cssmenu.css" type="text/css" media="screen" />
# ENDIF #


Le fichier body.tpl


Le code du compteur de visite


Pour permettre une personnalisation plus facile du compteur de visite, nous avons ajouté des classes CSS à celui-ci.

Remplacer le code :
Code TPL : 
# IF C_COMPTEUR #
<div id="compteur">
<span class="text-strong">{L_VISIT} : </span>{COMPTEUR_TOTAL}
<br />
<span class="text-strong">{L_TODAY} : </span>{COMPTEUR_DAY}
</div>
# ENDIF #


par celui-ci :
Code TPL : 
# IF C_COMPTEUR #
<div id="compteur" class="hidden-small-screens">
<div class="compteur-total">
<span class="text-strong">{L_VISIT} : </span>
{COMPTEUR_TOTAL}
</div>
<div class="compteur-today">
<span class="text-strong">{L_TODAY} : </span>
{COMPTEUR_DAY}
</div>
</div>
# ENDIF #


la position du compteur de visite


Le compteur se positionnant n'importe comment en mobile, nous avons ajuster son positionnement. Déplacer le code ci-dessus à la fin du 
#top-header
et avant le 
#sub-header
.

Vous pouvez aussi remplacer le code du 
<header>
par celui-ci :
Code TPL : 
<header id="header">
<div id="top-header">
<div id="site-infos">
<div id="site-logo" # IF C_HEADER_LOGO #style="background-image: url('{HEADER_LOGO}');"# ENDIF #></div>
<div id="site-name-container">
<a id="site-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a>
<span id="site-slogan">{SITE_SLOGAN}</span>
</div>
</div>
<div id="top-header-content">
# IF C_MENUS_HEADER_CONTENT #
# START menus_header #
{menus_header.MENU}
# END menus_header #
# ENDIF #
</div>
# IF C_COMPTEUR #
<div id="compteur" class="hidden-small-screens">
<div class="compteur-total">
<span class="text-strong">{L_VISIT} : </span>
{COMPTEUR_TOTAL}
</div>
<div class="compteur-today">
<span class="text-strong">{L_TODAY} : </span>
{COMPTEUR_DAY}
</div>
</div>
# ENDIF #
</div>
<div id="sub-header">
<div id="sub-header-content">
# IF C_MENUS_SUB_HEADER_CONTENT #
# START menus_sub_header #
{menus_sub_header.MENU}
# END menus_sub_header #
# ENDIF #
</div>
<div class="spacer"></div>
</div>
<div class="spacer"></div>
</header>


Le code HTML du scroll to top


Pour permettre d'afficher le bouton "scroll to top", il est nécessaire d'ajouter en fin de fichier (après le 
</footer>
), le code suivant :
Code TPL : 
<a id="scroll-to-top" class="scroll-to" href="#"><i class="fa fa-chevron-up"></i></a>


Les fichiers CSS


Même si les modifications CSS sont mineurs, il y en a quelques unes.

Le fichier design.css


- Ajouter l'attribut 
position: relative;
à la classe 
div#top-header
.

- Remplacer le code du compteur
Code CSS : 
div#compteur {
position: absolute;
right: 0;
margin-right: 15px;
font-size: 0.9em;
color: #E9ECD9;
text-align: right;
}
@media (min-width: 769px) {
div#compteur {
top: 100px;
}
}
par celui-ci :
Code CSS : 
div#compteur {
position: absolute;
right: 0;
bottom : 1em;
margin-right: 10px;
font-size: 0.9em;
color: #F9FCFF;
text-align: right;
}


- Ajouter le code CSS du scroll to top en fin de fichier :
Code CSS : 
/* --- Scroll to Top --- */
.scroll-to {
position: fixed;
z-index: 10;
display: none;
background-color: rgba(15, 15, 16, 0.8);
}
#scroll-to-top {
right: 25px;
bottom: 25px;
padding: 9px 11px 11px 10px;
}
.scroll-to i {
font-size: 2em;
color: rgba(255, 255, 255, 0.8);
transition: 0.2s;
}
.scroll-to:hover i {
color: rgba(255, 255, 255, 1);
transition: 0.5s;
}


Le fichier global.css


Nous avons rendu la personnalisation de certains blocs du bbcode beaucoup plus facile.

Remplacer le code
Code CSS : 
/* --- les blocs de quote, de code ou caches --- */
.formatter-hide,
.formatter-code,
.formatter-blockquote {
display: block;
margin: auto;
padding: 2px 0;
width: 93%;
font-weight: bold;
}
.hide,
.code,
.blockquote {
margin: 0 25px;
padding: 8px;
max-height: 500px;
background-color: #FAFAFA;
border: 1px solid #DDDDDD;
border-radius: 3px;
overflow: auto;
color: #444444;
}
.hide {
height: 10px;
overflow: hidden;
cursor: pointer;
}
.hide2 {
visibility: hidden;
overflow: auto;
}
par celui-ci :
Code CSS : 
/* --- les blocs de quote, de code ou caches --- */
.formatter-container {
position: relative;
display: block;
margin: auto;
width: 93%;
color: #444444;
}
.formatter-content-title {
font-weight: bold;
}
.formatter-content {
margin: 0;
padding: 8px;
max-height: 500px;
background-color: #FAFAFA;
border: 1px solid #DDDDDD;
overflow: auto;
}
.formatter-hide .formatter-content {
height: 10px;
overflow: hidden;
visibility: hidden;
}
.formatter-show .formatter-content {
height: auto;
overflow: auto;
visibility: visible;
}
.formatter-hide .hide-message {
display: block;
font-style: italic;
font-weight: normal;
font-size: 0.8em;
color: #BBBBBB;
padding: 4px 8px;
width: 100%;
margin: -20px auto 0 auto;
background-color: #FDFDFD;
border: 1px solid #EEEEEE;
}
.formatter-show .hide-message {
display: none;
}
.copy-code {
float: right;
padding: 4px 4px;
color: #999999;
cursor: copy;
}


Le fichier form.css


- Remplacer le 
display: inline-table;
par un 
display: inline-block;
dans le déclaration suivante :
Code CSS : 
.horizontal-fieldset-desc,
.horizontal-fieldset-element  {
display: inline-table;
vertical-align: middle;
}


-Ajouter à la suite du code ci-dessous le code suivant:
Code CSS : 
.horizontal-fieldset-desc + .horizontal-fieldset-element {
max-width: 100%;
}


- Modifier le code
Code CSS : 
.form-element-preview {
    margin: 5px auto 0 auto;
    text-align: center;
}
en
Code CSS : 
.form-element-preview, .form-element-reset {
    margin: 5px auto 0 auto;
    text-align: center;
    display: inline;
}


- Ajuster le 
width: 144px;
à 
width: auto;
pour les propriétés 
.advanced-auth-input




- Ajuster le 
right: -10px;
à 
right: -16px;
pour les propriétés 
.form-field-radio-button.field-required:after, .form-field-multiple-checkbox.field-required:after


Le fichier content.css


Une partie du code a été transféré dans un nouveau fichier user.css contenu dans le répertoire user/templates.

Supprimer les codes suivants du fichier content.css :
Code CSS : 
/* -- Profile User -- */
/* ------------------ */
ul#profile-container {
margin: 30px auto;
width: 99%;
list-style-type: none;
}
ul#profile-container li {
margin-right: 2px;
padding: 10px;
text-align: center;
}
.preview-img {
max-height: 180px;
vertical-align: top;
}
.user-agreement {
width: 90%;
max-width: none;
max-height: 250px;
overflow-y: auto !important;
}


Code CSS : 
/* -- Contribution -- */ 
/* ------------------ */
#module-user-contribution-list hr {
margin: 20px 0;
}
.module-contribution-element {
float: left;
margin: 20px 0;
text-align: center;
}
.unprocessed-contribution {
margin: auto;
width: 300px;
overflow: hidden;
text-align: center;
}
.unprocessed-contribution div {
float: left;
width: 50%;
}
#module-user-moderation-panel .content {
padding-bottom: 75px;
}
#module-user-moderation-panel .bt td:before {
display: none;
}
#module-user-moderation-panel .bt-content {
display: block;
width: 100%;
text-align: center;
}
.contribution-module-container {
float: left;
margin: 20px 0;
text-align: center;
}
.convers-announce {
padding-right: 0;
}
.convers-title {
width: 50%;
text-align: left;
}
table.announce-legend td {
width: 33%;
}
@media (min-width: 769px) {
.post-pm {
margin: auto;
width: 80%;
}
}
.available-modules-msg {
margin-bottom: 15px;
text-align: center;
}


Code CSS : 
/* -- Error 403/404 -- */ 
/* ------------------- */
#module-user-error-403 .content,
#module-user-error-404 .content {
text-align: center;
font-size: 1.5em;
}
#module-user-error-403 .fa-warning:before,
#module-user-error-404 .fa-warning:before {
content: "\f071"; 
}
#module-user-error-403 .fa-warning,
#module-user-error-404 .fa-warning {
display: block;
margin: 40px auto 20px auto;
color: #C19954;
}
#module-user-error-403 .message-error,
#module-user-error-404 .message-error {
padding: 20px 0;
}
#module-user-error-403 .type-error,
#module-user-error-404 .type-error {
padding: 10px 0;
}


- Modifier les appels 
section header h1 a:hover
en 
section header a:hover


- Ajouter les classes friends

Code CSS : 
/* ---- Friends content ---- */
.content-friends {
    border-width: 7px 1px 1px 1px;
    border-top-color: #103B67;
}
.content-privileged-friends {
    border-width: 7px 1px 1px 1px;
    border-top-color: #E2BE47;
}


- Le design du système de drag&drop a été épuré. Vous pouvez le remplacer par le code suivant si vous le désirez :
Code CSS : 
/* --- Systeme de drag&Drop --- */
.sortable-block .sortable-element > .sortable-block {
    margin-left: 30px;
}
.sortable-block {
    margin: 0;
    padding: 0;
    min-height: 24px;
    list-style-type: none;
    list-style-position: outside;
    color: #777777;
}
.sortable-block .sortable-element {
    display: table;
    margin-bottom: 6px;
    padding: 0;
    width: 100%;
    border-color: #517BA6;
    border-style: solid;
    border-width: 0 0 0 3px;
    transition: all 0.2s;    
}
.sortable-block .sortable-element:hover {
    border-color: #366493;
    transition: all 0.2s;
}
@media (min-width:769px){ 
    .sortable-block .sortable-element .sortable-selector {
        display: table-cell;
        position: relative;
        width: 20px;
        opacity: 0.2;
        transition: opacity 0.3s;
        cursor: move;
    }
 
    .sortable-selector:after {
        position: absolute;
        content: "\f047";
        top: 34%;
        left: 4px;
        color: #517BA6;
        font-family: fontawesome;
    }
}
.sortable-block .sortable-element:hover .sortable-actions {
    opacity: 1;
    transition: opacity 0.3s;
}
.sortable-block .sortable-element:hover .sortable-selector {
    opacity: 1;
    transition: opacity 0.3s;
}
.sortable-block .sortable-title {
    padding: 8px 5px 5px 10px;
}
.sortable-block .sortable-title:hover {
    background-color: #FAFAFA;
    transition: all 0.2s linear;
}
.sortable-block .sortable-title > span {
    font-size: 1.5em;
    font-weight: bold;
}
.sortable-block .sortable-title a {
    color: #555555;
}
.sortable-block .sortable-title span.cat-desc {
    font-size: 0.8em;
    font-weight: normal;
    font-style: italic;
}
.sortable-block .sortable-title img {
    cursor: move;
}
.sortable-block fieldset {
    padding: 0 30px;
}
.sortable-block .sortable-actions {
    float: right;
    padding: 3px 3px;
    opacity: 0.2;
    transition: opacity 0.2s;
}
.sortable-block .sortable-element hr {
    margin-top: 5px;
    background-color: #999999;
}
.sortable-block .sortable-element label {
    margin-left: 14px;
    color: #1F507F;
}
.sortable-block .sortable-actions img,
.sortable-block .sortable-element:hover label,
.sortable-block .sortable-element .fa:hover {
    cursor: pointer;
}
.dragged {
    position: absolute;
    opacity: 0.9;
    z-index: 2000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
body.dragging,
body.dragging * {
    cursor: move !important;
}
.dropzone {
    margin: 10px 0;
    padding-top: 5px;
    height: 30px;
    opacity: 0.6;
    border: 1px dashed #AAAAAA;
    text-align: center;
    color: #AAAAAA;
}
.preview img {
    overflow: hidden;
}


login.css


Afin de coller la cookie-bar en haut de la page sur le menu de connexion, ajouter à la fin du fichier le code suivant : 


.cookiebar-container {

position: fixed;

}