Wiki

Mettre à jour son thème 5.2 en 6.0

Thu, 30 Dec 2021 08:42:39 +0100

Introduction

Si vous voulez convertir vous même le thème que vous utilisez alors que son auteur ne l'a pas (encore) fait, certains thèmes pouvant être soumis à une licence protégeant les droits d'auteurs, veuillez vérifier que vous avez les autorisations nécessaires avant de les modifier.
La structure des thèmes a radicalement changé avec la version 6.0 de PHPBoost, cependant nous avons essayé, dans la mesure du possible, de conserver la rétrocompatibilité des anciens thèmes et les quelques modifications suivantes permettront de les utiliser.

config.ini

la date de création

date="01/01/1970"

est séparée en 2 afin d'ajouter une date de mise à jour:

creation_date = "1970/01/01"

last_update = "2021/01/01"

frame.tpl

supprimer les appels de fichiers css déplacés du dossier
kernel
vers le dossier
templates
Remplacer l'appel du fichier default.css par l'appel d'un fichier @import.css placé dans le dossier
theme
du thème
ajouter le html pour les options du nouveau type de menu
Menu Push
et donc déplacer la flexbox intialement déclarée sur la balise

Appel des fichiers css dans /templates/{THEME}/frame.tpl

Remplacer

Code HTML :

<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/css/font-awesome-animation/css/font-awesome-animation.css" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/js/lightcase/css/lightcase.css" />

Par

Code HTML :

<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/@import.css" type="text/css" media="screen, print" />

Ainsi que dans la partie cache

Code HTML :

# 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/css/font-awesome-animation/css/font-awesome-animation.css;/kernel/lib/js/lightcase/css/lightcase.css;...)}" type="text/css" media="screen, print" />
        # ELSE #...

par

Code HTML :

# IF C_CSS_CACHE_ENABLED #
        <link rel="stylesheet" href="${CSSCacheManager::get_css_path('/templates/{THEME}/theme/@import.css;...)}" type="text/css" media="screen, print" />
        # ELSE #...;

Il est impératif que le nom du fichier soit

@import.css

pour que la liste des appels de fichiers qu'il contient soit prise en compte dans le cache

Contenu du @import.css

A minima le fichier @import.css doit contenir les appels des fichiers correspondants aux nouvelles classes du framework

Code CSS :

@import url('../../__default__/theme/default.css') screen, print;
@import url('../../__default__/theme/font-awesome/css/all.css');
@import url('../../__default__/theme/font-awesome-animation.css');
@import url('../../__default__/theme/lightcase.css') screen;
@import url('../../__default__/theme/pushmenu.css') screen;
@import url('../../__default__/theme/plugins.css') screen;
@import url('../../__default__/theme/message_helper.css') screen;
@import url('../../__default__/theme/global.css') screen;
@import url('../../__default__/theme/messages.css') screen;
@import url('../../__default__/theme/cell.css') screen;
@import url('../../__default__/theme/cell_layout.css') screen;

Cette pratique permet de ne plus avoir à déclarer qu'une seule fois l'adresse des fichiers CSS. Le moteur de rendu n'utilise pas directement @import url(), il récupère la liste des adresses des fichiers pour les mettre en cache.

À ce stade votre thème est fonctionnel à 80%

Ajustement des détails

Vous allez devoir maintenant ajuster votre thème aux nouvelles classes css.

Soit vous modifiez les anciens fichiers de votre thème, ce qui peut être suffisant pour les classes qui ont seulement changé de nom, des classes manquantes ou des classes qui ont changé de fonctionnement

.thumbnail-item
=>
.item-thumbnail

.actions
=>
.controls

.message-user-infos
,
.form-field-textarea
soit vous pouvez créer de nouveaux fichiers pour y "surcharger" les nouvelles classes, essentiellement au niveau des couleurs de texte ou des couleurs de fond, mais pas que.

HTML autour du contenu

Code HTML :

# INCLUDE BODY #

devient

Code HTML :

<div id="push-container" class="body-wrapper">
    # INCLUDE BODY #
</div>

Supprimer la flexbox du selecteur body et l'ajouter à la nouvelle classe dans un des fichiers css

Code CSS :

.body-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

l'identifiant

push-container

est utilisé pour les options du nouveau type de menu de liens, "pushmenu", ajouté à ceux existant et permet, si l'option est choisie, de décaler le contenu lors de l'ouverture du menu.

body.tpl

Tous les

title=""

sont remplacés par

aria-label=""

Dans ce fichier, aucun élément n'a été modifié. Vérifiez cependant que toutes les variables ({NOM_DE_VARIABLE}, # IF VARIABLE_DE_CONDITION #, etc) soient bien nommées en comparant avec le thème

Base

Les modules

les fichiers tpl

Tous les

title=""

sont remplacés par

aria-label=""

Vérifiez que toutes les variables ({NOM_DE_VARIABLE}, # IF VARIABLE_DE_CONDITION #, etc) soient bien nommées en comparant avec les tpl des modules auxquels ils se réfèrent.
Les noms des fichiers tpl de certains modules ont été modifiés.

les fichiers css

la structure des modules est maintenant régie par le framework , sauf exception, leurs fichiers css serviront plus à une personnalisation qu'à une adaptation au thème.

Mettre à jour son thème 5.1 en 5.2

Mon, 11 Feb 2019 07:05:17 +0100

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

Avant de commencer

La mise à jour 5.2 de PHPBoost est une mise à jour ayant peu d'impact sur les thèmes mais il y a quand même quelques ajouts et modifications à faire pour permettre au thème de garder son aspect esthétique.

Lorsque la modification n'est pas obligatoire pour le fonctionnement du thème, elle sera indiquée "optionnel" dans le titre.
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.1"

par

compatibility="5.2"

.
A partir de cette étape, le thème peut être installé via le panneau d'administration. Il sera presque entièrement fonctionnel.
Vous pouvez en profiter pour modifier la

version

et la

date

Intégration de FontAwesome 5

L'intégration de la version 5 de FontAwesome nécessite quelques adaptations, les icônes sont maintenant séparées dans plusieurs fichiers.
Afin de définir le bon fichier lors de l'appel, le terme "fa" devient "fas", "far" ou "fab" en fonction des besoins (par défaut "fa" = "fas"). Ce point étant contraignant dans notre cas, nous avons créé un patch pour toutes les icônes utilisées de base dans PHPBoost. L'ensemble du code n'ayant pas besoin d’évolution, il a été ajouté dans le fichier default.css
Pour vos modifications personnelles, il faudra certainement compléter les patchs correctifs ou utiliser le patch complet, maintenant disponible sur le site de FontAwesome.

Remplacer tous les appels du type

font: normal normal normal 14px/1 FontAwesome;

font: FontAwesome;

par le code suivant :

Code CSS :

font-family: 'Font Awesome 5 Free';
font-weight: 900;

L'attribut

font-weight: 900;

permet de préciser que l'on veut le style standard ("solid" / "fas").
S'il y a des attributs

font-style: normal;

font-weight: normal;

associés, il est préférable de les supprimer.
Vous trouverez notamment des appels dans les fichiers cssmenu.css, global.css, content.css, form.css.

Dans quelque cas, notamment les réseaux sociaux, il faudra faire le changement avec le bon fichier fonts

font-family: 'Font Awesome 5 Brands';

Les fichers HTML

Meta OPENGRAPH (optionnel)

Nous avons ajouté des méta données OPENGRAPH pour améliorer le référencement du site web dans les moteurs de recherche.
Les modifications suivantes doivent être réalisées dans le fichier frame.tpl
- Ajouter dans la balise

<html lang="{L_XML_LANGUAGE}">

les éléments suivants :

frame.tpl :

# IF C_OPENGRAPH # prefix="og: http://ogp.me/ns#"# ENDIF #

Rendu :

<html lang="{L_XML_LANGUAGE}"# IF C_OPENGRAPH # prefix="og: http://ogp.me/ns#"# ENDIF #>

- Ajouter les éléments suivants juste avant les appels des fichiers CSS

frame.tpl :

# IF C_OPENGRAPH #
    <meta property="og:site_name" content="{SITE_NAME}" />
    <meta property="og:locale" content="{L_XML_LANGUAGE}" />
    <meta property="og:title" content="{PAGE_TITLE}" />
    <meta property="og:type" content="{PAGE_TYPE}" />
    # IF C_DESCRIPTION #<meta property="og:description" content="{SITE_DESCRIPTION}" /># ENDIF #    
    # IF C_CANONICAL_URL #<meta property="og:url" content="{U_CANONICAL}" /># ENDIF #
    # IF C_PICTURE_URL #<meta property="og:image" content="{U_PICTURE}" /># ENDIF #
    # START og_additionnal_properties #
    <meta property="{og_additionnal_properties.ID}" content="{og_additionnal_properties.VALUE}" />
    # END og_additionnal_properties #
# ENDIF #

Le scroll-to-top (optionnel)

Le bouton "scroll-to-top" était réalisé avec une balise ne comportant pas de lien. N'étant pas conforme aux règles d'accessibilité, nous avons modifié le code existant par celui ci-dessous.
Remplacer le code associé au "scroll-to-top" existant à la fin du fichier body.tpl par le code suivant :

<a id="scroll-to-top" class="scroll-to" href="#" title="${LangLoader::get_message('scroll-to.top', 'user-common')}"><i class="fa fa-chevron-up"></i></a>

role (optionnel)

Vous pourrez constater que des attributs HTML 'role' ont été ajoutés dans le fichier body.tpl. Il ne s'agit que d'une amélioration d'accessibilité qui ne nécessite pas forcement d'intégration dans votre thème.

aria (optionnel)

Vous pourrez constater que des attributs HTML 'aria' ont été ajoutés dans de nombreux fichiers HTML. Il ne s'agit que d'une amélioration d'accessibilité qui ne nécessite pas forcement d'intégration dans votre thème.

Les fichiers .css

Seules les modifications très impactantes seront listées ci-dessous. Les petits ajustements CSS réalisés ne sont pas listés car ils dépendent fortement de chaque thème.

Nouveaux fichiers .css

Vous pourrez constater que sur la version 5.2, il existe des fichiers .css supplémentaires : color.css et shape.css.
Nous avons choisi de séparer certains éléments pour faciliter les modifications.
Dans la suite des explications, les ajouts ne tiennent pas compte de cette modification pour ne pas vous imposer ce nouveau découpage.

px vs em (optionnel)

Pour avoir un design encore plus "adaptatif", nous avons converti la quasi-totalité des unités de px en unité em.
Dans la suite des explications, les ajouts tiennent compte de ce changement. Les proportions ayant été conservées, le changement de px en em est normalement sans impact visuel.

design.css (optionnel)

Dans le cas ou vous utilisez des images pour la partie breadcrumb, il est nécessaire d'ajouter le code suivant:

design.css :

nav#breadcrumb img {
    vertical-align: middle;
}

form.css

Pour renforcer le référencement, nous avons ajouté la balise h1 dans certains en-tête de formulaire. Juste après la déclaration de la balise

legend

, ajouter le code suivant pour ne pas prendre en compte la taille h1 standard:

form.css :

legend > h1 { font-size: inherit; }

A la fin du fichier, ajouter le code suivant pour

form.css :

.auth-setter {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

Une petite erreur existe dans le code de la 5.1.
Rechercher le code :

form.css :

 
form input:focus:invalid,
form textarea:focus:invalid,
form .constraint-status-right input,
form .constraint-status-right textarea

remplacer le par le code suivant :

form.css :

 
form input:focus:invalid,
form textarea:focus:invalid,
form .constraint-status-error input,
form .constraint-status-error textarea

Les formulaires de date avec heures/minutes (optionnel)
Ajoutez simplement dans le fichier :

form.css :

 
.form-field-datetime .label-time {
    width: 18%;
    position: relative;
    display: inline-block;
}
.form-field-datetime .label-time input {
    padding: 0.309em;
    width: 100%;
}
.label-time:after {
    position: absolute;
    bottom: 18%;
    left: 103%;
    content: attr(data-time);
}

Pour l'intégration de FontAwesome 5, voir le chapitre "Intégration de FontAwesome 5".

global.css

Les éléments "social connect" peuvent être supprimés de ce fichier car ils ont été déplacés dans le fichier socialnetwork.css du module SocialNetwork

Le système de notation a été revu avec la nouvelle version de FontAwesome. De ce fait, le code CSS précédent doit être modifié par celui-ci:

global.css :

/* --- Le systeme de notation --- */
.notation,
.static-notation {
    display: inline-block;
}
.notation .star,
.static-notation .star {
    position: relative;
    font-size: 1.5rem;
    text-decoration: none;
    color: #E3CF7A;
}
.notation .star-width {
    position: absolute;
    display: inline-block;
    top:0;
    left:0;
}
.notation .star-width:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #E3CF7A;
    left: 0;
    top:0;
    content:"\f005";
    display:block;
    overflow:hidden;
}
.star-width-0   { width: 0%;   }
.star-width-10  { width: 30%;  }
.star-width-25  { width: 41%;  }
.star-width-50  { width: 50%;  }
.star-width-75  { width: 65%;  }
.star-width-90  { width: 78%;  }
.star-width-100 { width: 100%; }

Pour faciliter la personnalisation, nous avons ajouté la classe message-helper en plus des classe error, notice, etc...
Modifier les appels

global.css :

.error,
.notice,
.warning,
.success,
.question,
.message-helper

par

.message-helper

global.css :

.error:before,
.notice:before,
.warning:before,
.success:before,
.question:before,
.message-helper:before

par

.message-helper:before

En revanche, pour les icônes fa, il est nécessaire d'ajouter la classe message-helper.

.error:before { content : "\f00d"; }

devient

.message-helper.error:before { content : "\f00d"; }

procédez de même pour notice, warning, etc...

La notion de message "flottant/éphémère" a été intégrée dans le code CSS pour permettre d'adapter le code selon les cas. Il est donc nécessaire de modifier le code existant. Les couleurs ont été séparées pour vous permettre un ajustement rapide.

global.css :

.message-helper-small {
    width: 50%;
}
.message-helper {
    position: relative;
    display: block;
    margin: 5px auto 15px auto;
    padding: 10px 10px 10px 40px;
    height: auto;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    line-height: 20px;
    text-align: left;
    overflow: hidden;
}
.message-helper:before {
    position: absolute;
    left: 6px;
    top: 7px;
    width: 28px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    line-height: 1;
    font-size: 2em;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.message-helper.error:before       { content: "\f00d"; }
.message-helper.notice:before      { content: "\f12a"; }
.message-helper.warning:before     { content: "\f071"; }
.message-helper.success:before     { content: "\f00c"; }
.message-helper.question:before    { content: "\f128"; }
.message-helper.member-only:before { content: "\f070"; }
.message-helper.modo-only:before   { content: "\f070"; }
.message-helper.admin-only:before  { content: "\f070"; }
.error, .error:before               { color: #BA4B49; }
.notice, .notice:before             { color: #888888; }
.warning, .warning:before           { color: #C19954; }
.success, .success:before           { color: #478948; }
.question, .question:before         { color: #3B88AE; }
.member-only, .member-only:before   { color: #C19954; }
.modo-only, .modo-only:before       { color: #C19954; }
.admin-only, .admin-only:before     { color: #C19954; }
.error        { background-color: #F3DFDF; border-color: #ECCDD2; }
.notice       { background-color: #F0F0F0; border-color: #E2E2E2; }
.warning      { background-color: #FDF9E4; border-color: #FBECCD; }
.success      { background-color: #E0F1D9; border-color: #D7EAC7; }
.question     { background-color: #DAEEF8; border-color: #BDE9F2; }
.member-only  { background-color: #FDF9E4; border-color: #FBECCD; }
.modo-only    { background-color: #FDF9E4; border-color: #FBECCD; }
.admin-only   { background-color: #FDF9E4; border-color: #FBECCD; }
.floating-message-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    top: 0.456em;
}
.floating-message-container.active {
    z-index: 100;
}
.floating-message-container .message-helper {
    overflow: visible;
    opacity: 0;
}
@media (max-width: 768px) {
    .floating-message-container {
        width: 100%;
        top: 1em;
    }
    .floating-message-container .message-helper {
        max-width: 90%;
        padding: 10px 10px 10px 50px;
    }
}
.floating-message-container .fa-close-message {
    position: absolute;
    z-index: 1;
    top: -6px;
    right: -6px;
    font-size: 1.5em;
}
.floating-message-container .fa-close-message:before {
    content: "\f057";
}
.floating-message-container .message-helper > a {
    color: inherit;
    cursor: pointer;
}
.floating-message-container .message-helper {
    background-color: rgba(235, 239, 244, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.floating-message-container .error          { background-color: rgba(249, 218, 219, 1); }
.floating-message-container .notice         { background-color: rgba(215, 215, 215, 1); }
.floating-message-container .warning        { background-color: rgba(248, 229, 218, 1); }
.floating-message-container .success        { background-color: rgba(217, 240, 219, 1); }
.floating-message-container .question       { background-color: rgba(215, 224, 233, 1); }
.floating-message-container .member-only    { background-color: rgba(223, 216, 234, 1); }
.floating-message-container .modo-only      { background-color: rgba(223, 216, 234, 1); }
.floating-message-container .admin-only     { background-color: rgba(223, 216, 234, 1); }

afin de permettre l'utilisation des icônes d'annonce du forum dans d'autres modules, nous les avons déplacées dans le global.css
Ajouter les élements suivants à la fin du global.css

global.css :

/* --- Icones d'annonces --- */
.fa-announce:before,
.fa-announce-new:before         { content: "\f075"; } /* copy comment */
.fa-announce-hot:before,
.fa-announce-new-hot:before     { content: "\f086"; } /* copy comments */
.fa-announce-lock:before,
.fa-announce-new-lock:before     { content: "\f023"; } /* copy lock */
.fa-announce-post:before,
.fa-announce-new-post:before     { content: "\f071"; } /* copy exclamation-triangle */
.fa-announce-top:before,
.fa-announce-new-top:before     { content: "\f06a"; } /* copy exclamation-circle */
/* --- Icones de messagerie --- */
.fa-msg-display:before             { content: "\f00c"; } /* copy check */
.fa-msg-not-display:before         { content: "\f00d"; } /* copy times */
.fa-msg-track:before             { content: "\f004"; } /* copy heart */
.fa-msg-not-track:before         { content: "\f004"; } /* copy heart */
.fa-pm-track:before             { content: "\f27a"; } /* copy comment-alt */
.fa-pm-not-track:before         { content: "\f27a"; } /* copy comment-alt */
.fa-mail-track:before             { content: "\f0e0"; } /* copy envelope */
.fa-mail-not-track:before         { content: "\f0e0"; } /* copy envelope */
.fa-lastview:before             { content: "\f017"; } /* copy clock-o */
.fa-notread:before                 { content: "\f15c"; } /* copy file-alt, regular fonts */
.fa-showmymsg:before             { content: "\f4ad"; } /* copy comments-dots, regular fonts*/
.fa-notread,
.fa-lastview,
.fa-showmymsg {
    font-weight: 200;
}
.fa-announce:before,
.fa-announce-hot:before     { color: #81A4C8; }
.fa-announce-new:before,
.fa-announce-new-hot:before { color: #40b73a; }
.fa-msg-display:before      { color: #40b73a; }
.fa-msg-not-display:before     { color: #E0464A; }
.fa-msg-track:before        { color: #E0464A; }
.fa-msg-not-track:before    { color: #212121; }
.fa-pm-track:before         { color: #517BA6; }
.fa-pm-not-track:before     { color: #212121; }
.fa-mail-track:before       { color: #517BA6; }
.fa-mail-not-track:before   { color: #212121; }
.fa-lastview:before         { color: #353535; }
.fa-notread:before          { color: #353535; }
.fa-showmymsg:before        { color: #353535; }

Pour certains modules, nous avons ajouté des couleurs génériques :
Ajouter les éléments suivants à la fin du global.css. Dans certains cas il faudra ajuster les couleurs.

global.css :

.bkgd-main  { background-color: #FFFFFF; }
.bkgd-sub   { background-color: #E1E1E1; }
.bkgd-title { background-color: #afceed; }
/* -- Editor color Container -- */
/* ---------------------------- */
.bdr-color-op20 { border-color: rgba(54, 100, 147, 0.2); }
.constraint-status-error .bdr-color-op20 {  border-color: rgba(196, 60, 43, 1); }
.constraint-status-right .bdr-color-op20 {  border-color: rgba(71, 137, 72, 1); }
.bkgd-color-op10 { background-color: rgba(54, 100, 147, 0.1); }
.bkgd-color-op20 { background-color: rgba(54, 100, 147, 0.2); }
.bkgd-color-op40 { background-color: rgba(54, 100, 147, 0.4); }
@media (max-width: 768px) {
    .bkgd-color-op10-sc { background-color: rgba(54, 100, 147, 0.1); }
    .bkgd-color-op20-sc { background-color: rgba(54, 100, 147, 0.2); }
    .bkgd-color-op40-sc { background-color: rgba(54, 100, 147, 0.4); }
}
.bkgd-color-op20-hover li:hover,
.bkgd-color-op20-hover a:hover { background-color: rgba(54, 100, 147, 0.2); }
@media (min-width: 769px) {
    .dlt-color-op20-after:after { background-color: rgba(54, 100, 147, 0.2); }
}
.block-submenu-color {
    background-color: #FFFFFF;
    box-shadow: 0 0 0.618em rgba(0, 0, 0, 0.2);
}
@media (min-width: 769px) {
    .arrow-submenu-color:after {
        border-color: transparent;
        border-bottom-color: #FFFFFF;
    }
}

content.css

Dans certains modules nous avons ajoutés un menu déroulant pour les éléments d'actions. Le code suivant permet d'en personnaliser l'affichage.
Ajouter le code suivant à la suite du paragraphe

/* --- Icones actions (edition, suppression, etc) --- */

content.css :

.actions {
    float: right;
}
.actions a {
    display: inline-block;
    padding: 0 0.456em;
}
@media (max-width: 768px) {
    .actions a {
        padding: 0 0.809em;
    }
}
header h2 .actions {
    font-size: 0.456em;
}
.actions-menu {
    position: relative;
}
.actions-title {
    position: relative;
    display: block;
    padding: 0.309em 0.456em;
}
@media (max-width: 768px) {
    .actions-title {
        position: relative;
        display: block;
        padding: 1em 1.309em;
    }
}
.actions-menu.opened .fa-actions-menu:before {
    content: "\f00d";
}
.actions-submenu {
    position: absolute;
    list-style: none;
    padding: 0;
    top: 25px;
    left: -9999px;
    width: 250px;
    z-index: 1;
}
@media (max-width: 768px) {
    .actions-submenu {
        top: 45px;
    }
}
.opened .actions-submenu {
    left: auto;
    right: 0;
}
.actions-title { }
.action {
    font-size: 1.5rem;
    padding: 0.309em 0.456em;
}
@media (max-width: 768px) {
    .action {
        padding: 1em 0.618em;
    }
}
.action i {
    text-align: center;
    width: 20px;
}
.actions-menu.opened .actions-title {
    background-color: #FFFFFF;
    box-shadow: 0 0 5px rgba(54, 100, 147, 0.2);
}
.actions-submenu {
    background-color: #FFFFFF;
    box-shadow: 0 4px 5px rgba(54, 100, 147, 0.2);
}
.action:hover {
    background-color: rgba(54, 100, 147, 0.2);
}

Plusieurs classes CSS ont été ajoutées pour gérer certains médias. Ajouter le code suivant après le paragraphe

/* Gestion en ligne pour petit écran */

content.css :

/* --- Gestion des media --- */
.thumbnail-item {
    padding: 0.309em 0;
    display: block;
}
@media (min-width: 769px) {
    .thumbnail-item {
        max-width: 38%;
        float: left;
        padding: 0.309em 0.618em 0.309em 0;
    }
    .columns-3 .thumbnail-item,
    .columns-4 .thumbnail-item,
    .columns-5 .thumbnail-item,
    .columns-6 .thumbnail-item,
    .columns-7 .thumbnail-item {
        float: none;
        max-width: 100%;
        padding: 0.309em 0;
    }
}
@media (max-width: 768px) {
    .media-content {
        clear: both;
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
    }
    .media-content object,
    .media-content embed,
    .media-content video,
    .media-content iframe,
    .media-content .video-player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
@media (min-width:769px) {
    .media-content embed,
    .media-content iframe {
        width: auto;
        height: auto;
    }
}

Le code du système drag&drop a été converti en flexbox pour avoir un rendu plus propre dans les différents cas.
Effectuer les remplacements suivants :

content.css :

.sortable-block .sortable-element > .sortable-block {
    flex: 1 0 calc(100% - 0.618em);
    -ms-flex: 1 0 calc(100% - 0.618em);
    -webkit-flex: 1 0 calc(100% - 0.618em);
    margin: 0 0 0 0.618em;
}
.sortable-block {
    margin: 0;
    padding: 0;
    min-height: 24px;
    list-style-type: none;
    list-style-position: outside;
    color: #777777;
}
.sortable-block .sortable-element {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-content: center;
    -webkit-align-content: center;
    -ms-align-content: center;
    flex-wrap: wrap;
    -webkit-flex-wrap: center;
    -ms-flex-wrap: center;
    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 {
        flex: 0 0 1.309em;
        -ms-flex: 0 0 1.309em;
        -webkit-flex: 0 0 1.309em;
        opacity: 0.2;
        transition: opacity 0.3s;
        cursor: move;
    }
 
    .sortable-selector:after {
        content: "\f0b2";
        color: #517BA6;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
    }
}
.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 {
    flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    padding: 0.618em;
    max-width: calc(100% - 5.2em)
}
.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 fieldset {
    padding: 0 30px;
}
.sortable-block .sortable-actions {
    flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    padding: 0.1618em;
    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;
}

Avec l'arrivée du module SocialNetwork, la partie partage a été revue. Ajouter à la fin du fichier le code suivant :

content.css :

/* -- Elements .more d'un contenu -- */
/* --------------------------------- */
/* General */
.more {
    padding: 0.618em 0.618em 1.618em;
    font-size: 0.809em;
    font-size: 0.809em;
    font-style: italic;
}
/* --- Sharing items
----------------------------------------------------------------------------- */
.more-element-sharing {
    position: relative;
    margin: 0.309em 0 0 0;
    padding: 0;
}
@media (min-width: 769px) {
    .more-element-sharing {
        margin: 1.309em 0 0.309em 0;
    }
}
.sharing-button {
    display: none;
}
.sharing-elements-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    text-align: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
@media (min-width: 769px) {
    .sharing-elements-list {
        justify-content: flex-start;
        -ms-flex-pack: flex-start;
        -webkit-justify-content: flex-start;
    }
}
.sharing-element {
    flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
}
@media (min-width: 769px) {
    .sharing-element {
        margin: 0 0.309em 0.309em 0;
    }
}
.sharing-element a {
    display: block;
    padding: 0.618em 1.228em;
    display: block;
    margin: 0 0.1em 0.309em 0;
}
.sharing-element > a {
    font-weight: normal;
    color: #FFFFFF;
}
.sharing-element-comments > a { background-color: #CDCDCD; }
.sharing-element-mail > a     { background-color: #366393; }
.sharing-element-print > a    { background-color: #999999; }
.sharing-element-sms > a      { background-color: #999999; }

Dans certains cas, nous avons détecté que l'utilisation de l'attribut

font-size:12

dans les classes

section header h2, article header h2

avait un rendu visuellement très petit. Vous pouvez le supprimer ou l'adapter.

table.css

Pas de modification impactante

Pas de modification impactante

cssmenu.css

Pas de modification impactante hormis l'intégration de FontAwesome 5 indiquée dans le chapitre "Intégration de FontAwesome 5".

Les modifications HTML et CSS des modules

Les modifications HTML et CSS dans les modules étant assez nombreuses mais potentiellement inutiles (sauf si vous faites votre propre thème), nous avons choisi de les présenter majoritairement en utilisant un système de différences entre la version V5.1 et V5.2 (www.diffchecker.com)
Les éléments les plus impactants sont présentés ci-dessous.

bbcode.css

Suite au passage a font-awesome 5, des icônes ont changé de code.
Remplacer la partie du fichier bbcode.css avec le code suivant :

bbcode.css :

.bbcode-icon-anchor:before      { content: "\f13d"; }
.bbcode-icon-bold:before        { content: "\f032"; }
.bbcode-icon-italic:before      { content: "\f033"; }
.bbcode-icon-underline:before   { content: "\f0cd"; }
.bbcode-icon-strike:before      { content: "\f0cc"; }
.bbcode-icon-smileys:before     { content: "\f118"; }
.bbcode-icon-title:before       { content: "\f022"; }
.bbcode-icon-subtitle:before    { content: "\f0c8"; }
.bbcode-icon-style:before       { content: "\f071"; }
.bbcode-icon-url:before         { content: "\f0ac"; }
.bbcode-icon-image:before       { content: "\f03e"; }
.bbcode-icon-lightbox:before    { content: "\f030"; }
.bbcode-icon-quote:before       { content: "\f10d"; }
.bbcode-icon-hide:before        { content: "\f070"; }
.bbcode-icon-list:before        { content: "\f03a"; }
.bbcode-icon-color:before       { content: "\f043"; }
.bbcode-icon-size:before        { content: "\f034"; }
.bbcode-icon-font:before        { content: "\f031"; }
.bbcode-icon-minus:before       { content: "\f068"; }
.bbcode-icon-plus:before        { content: "\f067"; }
.bbcode-icon-more:before        { content: "\f0dc"; }
.bbcode-icon-left:before        { content: "\f036"; }
.bbcode-icon-center:before      { content: "\f037"; }
.bbcode-icon-right:before       { content: "\f038"; }
.bbcode-icon-justify:before     { content: "\f039"; }
.bbcode-icon-float-left:before  { content: "\f048"; }
.bbcode-icon-float-right:before { content: "\f051"; }
.bbcode-icon-sup:before         { content: "\f12b"; }
.bbcode-icon-sub:before         { content: "\f12c"; }
.bbcode-icon-indent:before      { content: "\f03c"; }
.bbcode-icon-table:before       { content: "\f0ce"; }
.bbcode-icon-flash:before       { content: "\f144"; }
.bbcode-icon-movie:before       { content: "\f008"; }
.bbcode-icon-youtube:before     { content: "\f167"; }
.bbcode-icon-sound:before       { content: "\f001"; }
.bbcode-icon-code:before        { content: "\f121"; }
.bbcode-icon-math:before        { content: "\f136"; }
.bbcode-icon-html:before        { content: "\f13b"; }
.bbcode-icon-help:before        { content: "\f059"; }
.bbcode-icon-upload:before      { content: "\f382"; }
.bbcode-icon-fa:before          { content: "\f425"; }
.bbcode-icon-mail:before        { content: "\f0e0"; }
.bbcode-icon-feed:before        { content: "\f09e"; }
.bbcode-icon-bgcolor:before     { content: "\f1fc"; }
.bbcode-icon-flash,
.bbcode-icon-image,
.bbcode-icon-title,
.bbcode-icon-smileys,
.bbcode-icon-subtitle {
    font-weight: 400;
}

calendar.css

Si vous utilisez le calendrier, il manquera probablement le code suivant pour un rendu optimal:

calendar.css :

calendar {
    with: 100%;
}

forum.css

Vu que nous avons déplacé la partie .fa-announce dans le global.css, vous pouvez la supprimer du fichier forum.css
En fonction de vos modifications, il est probable que le texte des menus du forum soit trop petit.
Recherchez le code suivant:

forum.css :

.cssmenu.cssmenu-group > ul > li > .cssmenu-title {
    font-size: 1.2rem;
}

et remplacez la valeur 1.2 par 1.4.

article.css

Suite au passage a font-awesome 5, des icônes ont changés de code.
Remplacer l'icône de fa-pagebreak par le code suivant :

.fa-pagebreak:before { content: "\f477"; }

connect-mini.tpl

Avec l'arrivée du nouveau module des réseaux sociaux, il est nécessaire de remplacer la partie connexion Facebook et google du module connect.
Remplacer le code suivant :

connect-mini.tpl :

# IF C_FB_AUTH_ENABLED #
<a class="social-connect fb" href="${relative_url(UserUrlBuilder::connect('fb'))}">
    <i class="fa fa-facebook"></i><span>${LangLoader::get_message('facebook-connect', 'user-common')}</span>
</a>
# ENDIF #
# IF C_GOOGLE_AUTH_ENABLED #
<a class="social-connect google" href="${relative_url(UserUrlBuilder::connect('google'))}">
    <i class="fa fa-google-plus"></i><span>${LangLoader::get_message('google-connect', 'user-common')}</span>
</a>
# ENDIF #

par :

connect-mini.tpl :

# START external_auth #
    <a class="{external_auth.CSS_CLASS}" href="{external_auth.U_CONNECT}" title="{external_auth.NAME}">{external_auth.IMAGE_HTML}</a>
# END external_auth #

Boutons de partage Réseaux sociaux

Pour les modules suivant : articles/download/news/media/pages/web/wiki il est possible d’ajouter les boutons de partage sur l’affichage d'un élément unique.
Il faut ajouter dans le fichier tpl le code suivant :

${ContentSharingActionsMenuService::display()}

L'accessibilité

Afin d'augmenter l'accessibilité de PHPBoost, nous avons ajouté un certain nombre d'attributs aria.
Par exemple, pour les icones FA d'édition ou de suppression, nous avons ajouté l'attribut

Code TPL :

aria-hidden="true"

pour préciser que l'icone n'était pas utile en revue d'écran et l'attribut

Code TPL :

aria-label="editer"

pour indiquer en revue d'écran à quoi sert le lien.

Diffchecker

L'utilitaire diffchecker (www.diffchecker.com) permet de lister les différences entre la version 5.1 et la 5.2. Il vous suffit de suivre les liens proposés sur les fichiers pour avoir un état comparatif des modifications apportées.

Module articles

Nom du fichier	Url Diffchecker
articles.css	https://www.diffchecker.com/Mbv3Y0Zo
ArticlesDisplayArticlesController.tpl	https://www.diffchecker.com/aG9fAkn7
ArticlesDisplaySeveralArticlesController.tpl	https://www.diffchecker.com/MjONqHmk

Module BBCode

Nom du fichier	Url Diffchecker
bbcode.js	https://www.diffchecker.com/pcA3ks82
bbcode.css	https://www.diffchecker.com/duWAJ4TG
bbcode_editor.tpl	https://www.diffchecker.com/pfeVRYik

Module bugtracker

Nom du fichier	Url Diffchecker
bugtracker.css	https://www.diffchecker.com/Otx840RX
BugtrackerBody.tpl	https://www.diffchecker.com/b24caoJq
BugtrackerDetailController.tpl	https://www.diffchecker.com/fDpaBi21
BugtrackerFilter.tpl	https://www.diffchecker.com/5MS77Rwo
BugtrackerHistoryListController.tpl	https://www.diffchecker.com/M2DfpdWQ
BugtrackerListController.tpl	https://www.diffchecker.com/btk0iXtk
BugtrackerRoadmapListController.tpl	https://www.diffchecker.com/GxHfHQez
BugtrackerStatsListController.tpl	https://www.diffchecker.com/Gk5dB2au

Module calendar

Nom du fichier	Url Diffchecker
calendar.css	https://www.diffchecker.com/zrWI1Iwg
CalendarAjaxCalendarController.tpl	https://www.diffchecker.com/TtrPLOp3
CalendarAjaxEventsController.tpl	https://www.diffchecker.com/mXf31oZl
CalendarDisplayEventController.tpl	https://www.diffchecker.com/wxTaIowQ
CalendarDisplaySeveralEventsController.tpl	https://www.diffchecker.com/qPU7NdPh

Module connect

Nom du fichier	Url Diffchecker
connect_mini.css	https://www.diffchecker.com/UlGCWq6i
connect_mini.tpl	https://www.diffchecker.com/hF99egwj

Module contact

Nom du fichier	Url Diffchecker
contact.css	https://www.diffchecker.com/2GP0GCXX
ContactFormFieldObjectPossibleValues.tpl	https://www.diffchecker.com/xRS8Zi5n
ContactFormFieldRecipientsPossibleValues.tpl	https://www.diffchecker.com/QUyoJabs

Module download

Nom du fichier	Url Diffchecker
download.css	https://www.diffchecker.com/K3fQYCiq
download_mini.css	https://www.diffchecker.com/J9rprpDV
DownloadDisplayDownloadFileController.tpl	https://www.diffchecker.com/HdH3MMcv
DownloadDisplaySeveralDownloadFilesController.tpl	https://www.diffchecker.com/IzBU9ODV
DownloadModuleMiniMenu.tpl	https://www.diffchecker.com/YiXaNvnJ

Module faq

Nom du fichier	Url Diffchecker
faq-mini.css	https://www.diffchecker.com/mRg3ZiSE
faq.css	https://www.diffchecker.com/DEoQ7LRN
FaqDisplaySeveralFaqQuestionsController.tpl	https://www.diffchecker.com/uq40yJrh

Module forum

Nom du fichier	Url Diffchecker
forum.css	https://www.diffchecker.com/lJI5eK91
forum_alert.tpl	https://www.diffchecker.com/gybtIIke
forum_bottom.tpl	https://www.diffchecker.com/zX0t750M
forum_edit_msg.tpl	https://www.diffchecker.com/SDpcsF4l
forum_forum.tpl	https://www.diffchecker.com/KQ0UoeKq
forum_generic_results.tpl	https://www.diffchecker.com/zVCUctSk
forum_index.tpl	https://www.diffchecker.com/lnP8mPbN
forum_membermsg.tpl	https://www.diffchecker.com/yWOntWMN
forum_moderation_panel.tpl	https://www.diffchecker.com/0FZpzAl3
forum_move.tpl	https://www.diffchecker.com/lHXdMajJ
forum_post.tpl	https://www.diffchecker.com/w82qs1V6
forum_stats.tpl	https://www.diffchecker.com/KxBv7p51
forum_top.tpl	https://www.diffchecker.com/d2hYToei
forum_topic.tpl	https://www.diffchecker.com/aayAKY2Y
forum_track.tpl	https://www.diffchecker.com/KsLP4pEq

Module gallery

Nom du fichier	Url Diffchecker
gallery.css	https://www.diffchecker.com/v60VMyrS
gallery.tpl	https://www.diffchecker.com/KeF3gQza
gallery_add.tpl	https://www.diffchecker.com/erYuze7E
gallery_mini.tpl	https://www.diffchecker.com/l4mzSt4g

Module GoogleMaps

Nom du fichier	Url Diffchecker
GoogleMaps.css	https://www.diffchecker.com/XELEuZLA
GoogleMapsFormFieldMultipleMarkers.tpl	https://www.diffchecker.com/QjlcytPU

Module guestbook

Nom du fichier	Url Diffchecker
guestbook.css	https://www.diffchecker.com/01Qs0hxk
GuestbookController.tpl	https://www.diffchecker.com/HN3SFPE7

Module LangsSwitcher

Nom du fichier	Url Diffchecker
langsswitcher.css	https://www.diffchecker.com/vdDeJ5iQ
langswitcher.tpl	https://www.diffchecker.com/zZzctbVi

Module media

Nom du fichier	Url Diffchecker
media.css	https://www.diffchecker.com/TShXsw1d
media.tpl	https://www.diffchecker.com/jfpQcnzC
media_action.tpl	https://www.diffchecker.com/2XZCteaz
moderation_media.tpl	https://www.diffchecker.com/ySG5JahQ

Module news

Nom du fichier	Url Diffchecker
news.css	https://www.diffchecker.com/mrjiElZ5
NewsDisplayNewsController.tpl	https://www.diffchecker.com/9vz0h1Rv
NewsDisplaySeveralNewsController.tpl	https://www.diffchecker.com/R6blynif

Nom du fichier	Url Diffchecker
newsletter_mini.css	https://www.diffchecker.com/iXRb75Jy
newsletter_mini.tpl	https://www.diffchecker.com/GOwZ5hss
NewsletterArchivesController.tpl	https://www.diffchecker.com/VjWoUKFT
NewsletterHomeController.tpl	https://www.diffchecker.com/VO7sPH9A
NewsletterSubscribersListController.tpl	https://www.diffchecker.com/IAExSwfr

Module online

Nom du fichier	Url Diffchecker
online.css	https://www.diffchecker.com/YoNjkxnS
OnlineHomeController.tpl	https://www.diffchecker.com/IRE1kN2E
OnlineModuleMiniMenu.tpl	https://www.diffchecker.com/jQohVYYj

Module pages

Nom du fichier	Url Diffchecker
action.tpl	https://www.diffchecker.com/UNjxU8UT
com.tpl	https://www.diffchecker.com/U9B8OoQi
explorer.tpl	https://www.diffchecker.com/tQw4eCGH
index.tpl	https://www.diffchecker.com/EQslkJEU
page.tpl	https://www.diffchecker.com/0yzsdMYY
pages.css	https://www.diffchecker.com/ObzL9Y1y
post.tpl	https://www.diffchecker.com/xY6nQpGM

Module poll

Nom du fichier	Url Diffchecker
poll.css	https://www.diffchecker.com/AKgwIri2
poll.tpl	https://www.diffchecker.com/BOBnGqUf
poll_mini.css	https://www.diffchecker.com/jTLKx7sO
poll_mini.tpl	https://www.diffchecker.com/VbdZXJ8F

Module QuestionCaptcha

Nom du fichier	Url Diffchecker
QuestionCaptcha.css	https://www.diffchecker.com/XEBx0Yuw
QuestionCaptchaFormFieldQuestions.tpl	https://www.diffchecker.com/w61C0gdY

Module ReCaptcha

Nom du fichier	Url Diffchecker
ReCaptcha.css	https://www.diffchecker.com/LfbLsQkL
ReCaptcha.tpl	https://www.diffchecker.com/cwIXO2nG

Module search

Nom du fichier	Url Diffchecker
search.css	https://www.diffchecker.com/yAm2GfU6
search_mini.css	https://www.diffchecker.com/f0ITHJNT
search_mini.tpl	https://www.diffchecker.com/GtkIRebe

Module shoutbox

Nom du fichier	Url Diffchecker
shoutbox.css	https://www.diffchecker.com/FGPiDQCj
shoutbox_mini.css	https://www.diffchecker.com/fYySkuHN
ShoutboxAjaxMessagesBoxController.tpl	https://www.diffchecker.com/kjRk80nX
ShoutboxHomeController.tpl	https://www.diffchecker.com/qKdppxeZ
ShoutboxModuleMiniMenu.tpl	https://www.diffchecker.com/Q6BisnHb

Module sitemap

Nom du fichier	Url Diffchecker
GenerateXMLSitemapController.tpl	https://www.diffchecker.com/FSNHZx0q
sitemap.css	https://www.diffchecker.com/elrwzTYw

Module stats

Nom du fichier	Url Diffchecker
stats.css	https://www.diffchecker.com/eURDxO9W
stats.tpl	https://www.diffchecker.com/Lg7m7ISt
stats_mini.tpl	https://www.diffchecker.com/j1Bh7xI9
stats_tables.tpl	https://www.diffchecker.com/9xYdsmWB

Module templates

Nom du fichier	Url Diffchecker
content.css	https://www.diffchecker.com/LamWVWQv
cssmenu.css	https://www.diffchecker.com/0JrNhiMj
design.css	https://www.diffchecker.com/nD0b65lv
form.css	https://www.diffchecker.com/PIpN2cCx
global.css	https://www.diffchecker.com/gV5wLwWM
login.css	https://www.diffchecker.com/7BkG6KYU
table.css	https://www.diffchecker.com/zqQ8KNWf
body.tpl	https://www.diffchecker.com/v061SqXm
frame.tpl	https://www.diffchecker.com/4uCdrgMd

Module ThemesSwitcher

Nom du fichier	Url Diffchecker
themeswitcher.css	https://www.diffchecker.com/WeoJEIhy

Module TinyMCE

Nom du fichier	Url Diffchecker
tinymce.css	https://www.diffchecker.com/TvywVzJr

Module user

Nom du fichier	Url Diffchecker
contribution_panel.tpl	https://www.diffchecker.com/qKjFajwY
moderation_panel.tpl	https://www.diffchecker.com/oEepOIsX
pm.tpl	https://www.diffchecker.com/W8c1ET32
upload.tpl	https://www.diffchecker.com/pjHjJPhR
upload_move.tpl	https://www.diffchecker.com/soCw5dQq
user.css	https://www.diffchecker.com/iEvpTAqO
UserExploreGroupsController.tpl	https://www.diffchecker.com/3isR3CK1
UserHomeProfileController.tpl	https://www.diffchecker.com/Ddy6gOlQ
UserLoginController.tpl	https://www.diffchecker.com/BWnEF1lG
UserMessagesController.tpl	https://www.diffchecker.com/e3D08q9U
UserViewProfileController.tpl	https://www.diffchecker.com/TwpSTkiY

Module web

Nom du fichier	Url Diffchecker
web.css	https://www.diffchecker.com/11N6rwTF
web_mini.css	https://www.diffchecker.com/l9t8JQKx
WebDisplaySeveralWebLinksController.tpl	https://www.diffchecker.com/0TSe9I5o
WebDisplayWebLinkController.tpl	https://www.diffchecker.com/ZmgEymU3
WebModuleMiniMenu.tpl	https://www.diffchecker.com/I60J0hcO

Module wiki

Nom du fichier	Url Diffchecker
wiki.js	https://www.diffchecker.com/X56kSZd8
explorer.tpl	https://www.diffchecker.com/Ciiz76WU
favorites.tpl	https://www.diffchecker.com/enW8M4js
history.tpl	https://www.diffchecker.com/oIryJ3KP
index.tpl	https://www.diffchecker.com/VDks29gO
post.tpl	https://www.diffchecker.com/iMDKWspW
property.tpl	https://www.diffchecker.com/k98wrHTA
wiki.css	https://www.diffchecker.com/dglcIkvZ
wiki.tpl	https://www.diffchecker.com/Xpw87uCK
wiki_js_tools.tpl	https://www.diffchecker.com/7lDShndP
wiki_tools.tpl	https://www.diffchecker.com/1xHur8JD

Mettre à jour son thème 5.0 en 5.1

Sat, 13 Jan 2018 13:19:50 +0100

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

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"/>

Modifications HTML du template

Le fichier frame.tpl

viewport

Pour respecter le W3C, modifier le meta viewport en

="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

="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/js/lightcase/css/lightcase.css" />

dans la partie sans CACHE.

Font Awesome Animation

Nous avons ajoute en complement de la librairie Font Awesome, le fichier CSS permettant plus d'animation FontAwesomeAnimation .

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

- Ajouter

="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome-animation/css/font-awesome-animation.css" />

dans la partie sans CACHE.

Cela donne :

Code CSS :

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

5.0

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 #

5.1

Code TPL :

# IF C_VISIT_COUNTER #
<div id="visit-counter" class="hidden-small-screens">
    <div class="visit-counter-total">
        <span class="text-strong">{L_VISIT} : </span>
        {VISIT_COUNTER_TOTAL}
    </div>
    <div class="visit-counter-today">
        <span class="text-strong">{L_TODAY} : </span>
        {VISIT_COUNTER_DAY}
    </div>
</div>
# ENDIF #

la position du compteur de visite

Le compteur se positionnant n'importe comment en mobile, nous avons ajusté 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>

Modifications CSS du template

Même si les modifications CSS sont mineures, 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

5.0

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;
}
}

5.1

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;
}

- Ajouter le code de la cookiebar :

Code CSS :

/* --   Cookie Bar  -- */ 
/* ------------------- */
.cookiebar-container {
    z-index: 100;
    left: 0;
    right: 0;
    top: 0;
    padding: 7px 20px;
    background-color: #F2F2F2;
    border-bottom: 1px solid #E2E2E2;
    font-size: 0.9em;
    text-align: center;
}
.cookiebar-container.fixed {
    position: fixed;
}
.cookiebar-content {
    text-align: justify;
}
@media (min-width: 769px) {
    .cookiebar-content {
        display: inline-block;
        max-width: calc(100% - 250px);
        vertical-align: middle;
    }
    .cookiebar-actions {
        display: inline-block;
        width: 250px;
    }
}
@media (max-width: 768px) {
    .cookiebar-content {
        margin-bottom: 5px;
    }
    .cookiebar-actions {
        margin: 15px 0 5px 0;
    }
}
.cookiebar-button {
    margin: 0 5px 0 5px;
    border-radius: 4px;
    color: #FEFEFE;
}
@media (max-width: 768px) {
    .cookiebar-button {
        margin: 0 10px 0 10px;
    }
}
.cookiebar-button-understand         { background-color: #337AB7; border-color: #2E6DA4; }
.cookiebar-button-understand:hover     { background-color: #2E6DA4; }
.cookiebar-button-allowed             { background-color: #5CB85C; border-color: #4CAE4C; }
.cookiebar-button-allowed:hover     { background-color: #4CAE4C; }
.cookiebar-button-declined             { background-color: #E84E40; border-color: #CE271A; }
.cookiebar-button-declined:hover     { background-color: #CE271A; }
@media (max-width: 468px) {
    .cookiebar-more {
        display: block;
        margin: 10px 0 5px 0;
    }
}
.aboutcookie-title {
    font-size: 1.3em;
    line-height: 1.3em;
    font-weight: bold
}
.aboutcookie-title + p {
    margin: 0px 0 20px 0px;
}
footer#cookiebar-change-choice {
    margin-top: 10px;
    text-align: center;
}
.cookiebar-change-choice-link {
    text-align: center;
}

Le fichier global.css

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

5.0

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;
}

5.1

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;
    background-color: #FAFAFA;
    border: 1px solid #DDDDDD;
}
.formatter-hide .formatter-content {
    height: 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    transform: scaleY(0);
    transition: transform 0.15s linear;
    transform-origin: 50% 0;
}
.formatter-show .formatter-content,
.formatter-hide.no-js:hover .formatter-content {
    height: auto;
    max-height: 500px;
    padding: 8px;
    overflow: auto;
    visibility: visible;
    transform: scaleY(1);
}
.formatter-hide .formatter-hide-message {
    display: block;
    font-style: italic;
    font-weight: normal;
    font-size: 0.8em;
    color: #BBBBBB;
    padding: 4px 8px;
    width: 100%;
    margin: 0 auto 0 auto;
    background-color: #FDFDFD;
    border: 1px solid #EEEEEE;
    cursor: pointer;
}
.formatter-show .formatter-hide-message {
    display: none;
}
.formatter-hide-close-button {
    position: absolute;
    display: none;
    top: 2em;
    right: 0;
    color: #BBBBBB;
    font-size: 0.8em;
    font-style: italic;
    cursor: pointer;
    transition: all 0.3s linear;
}
.formatter-hide-close-button-txt {
    padding: 0 0 0 3px;
}
.formatter-show .formatter-hide-close-button {
    display: block;
}
.formatter-hide-close-button:hover {
    color: #444444;
    transition: all 0.3s linear;
}
.formatter-code .formatter-title {
    margin: 1rem 0 0.5rem 0;
}
.formatter-code .formatter-content {
    overflow: auto;
    max-height: 500px;
}
.copy-code {
    float: right;
    padding: 1.2rem 0.5rem 0 0;
    color: #BBBBBB;
    font-size: 0.8em;
    font-style: italic;
    cursor: copy;
    transition: all 0.3s linear;
}
.copy-code-txt {
    padding: 0 0 0 3px;
}

- Il est nécessaire de compléter la partie "Les messages d erreurs" pour inclure les nouvelles balises.

5.0	Code CSS : .error, .notice, .warning, .success, .question
5.1	Code CSS : .error, .notice, .warning, .success, .question, .message-helper
5.0	Code CSS : .error:before, .notice:before, .warning:before, .success:before, .question:before
5.1	Code CSS : .error:before, .notice:before, .warning:before, .success:before, .question:before, .message-helper:before
5.0	Code CSS : .error:before, .notice:before, .warning:before, .success:before, .question:before
5.1	Code CSS : .error:before, .notice:before, .warning:before, .success:before, .question:before, .message-helper:before

Ajouter à la suite les élements suivant :

global.css :

.message-helper-small {
    width: 50%;
}

global.css :

.member-only:before { content: "\f071"; }
.modo-only:before   { content: "\f071"; }
.admin-only:before  { content: "\f071"; }

global.css :

.member-only, .member-only:before   { color: #C19954; }
.modo-only, .modo-only:before       { color: #C19954; }
.admin-only, .admin-only:before     { color: #C19954; }

global.css :

.member-only  { background-color: #FDF9E4; border-color: #FBECCD; }
.modo-only    { background-color: #FDF9E4; border-color: #FBECCD; }
.admin-only   { background-color: #FDF9E4; border-color: #FBECCD; }

- La partie upload évolue pour plus de personnalisation

5.0

Code CSS :

.upload-elements-container {
    margin: 10px 0 0 20px;
    overflow: hidden;
}
.upload-elements-file,
.upload-elements-repertory {
    float: left;
    margin: 10px;
}
.upload-elements-repertory {
    height: 60px;
}
a.upload-recent-file {
    color: #BA4B49;
}

5.1

Code CSS :

.upload-elements-container {
    margin: 10px 0 0 20px;
    overflow: hidden;
    text-align: left;
}
.upload-elements-file,
.upload-elements-repertory {
    display: inline-block;
    vertical-align: top;
    margin: 10px;
}
.upload-elements-repertory {
    line-height: 50px;
    width: 180px;
    text-align: center;
    border: 1px solid #366493;
    background-color: #aec7e1;
}
.upload-repertory-controls {
    font-size: 0;
}
.upload-repertory-controls span {
    font-size: 1.6rem;
    width: calc(100% / 3);
    display: inline-block;
}
.upload-elements-file {
    width: 180px;
}
.upload-elements-file input {
    width: 100%;
}
.upload-element-name {
    width: 100%;
    text-align: center;
}
.upload-element-picture {
    width: 100%;
    height: 100px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.upload-element-icon {
    width: 100%;
    line-height: 100px;
    text-align: center;
    border: 1px solid #d9d9d9;
}
.upload-file-controls {
    font-size: 0;
}
.upload-file-controls a {
    font-size: 1.6rem;
    width: calc(100% / 4);
    display: inline-block;
    text-align: center;
    padding: 3px 0;
}
.upload-recent-file {
    color: #BA4B49;
}

Le fichier form.css

- Remplacer le

display: inline-table;

par un

display: inline-block;

dans la déclaration suivante :

Code CSS :

.horizontal-fieldset-desc,
.horizontal-fieldset-element  {
display: inline-table;
vertical-align: middle;
}

- Ajouter à la suite du code ci-dessus le code suivant:

Code CSS :

.horizontal-fieldset-desc + .horizontal-fieldset-element {
max-width: 100%;
}

- Modifier le code du preview

5.0

Code CSS :

.form-element-preview {
    margin: 5px auto 0 auto;
    text-align: center;
}

5.1

Code CSS :

.form-element-preview, .form-element-reset {
    margin: 5px auto 0 auto;
    text-align: center;
    display: inline;
}

- Modifier le

width: 144px;

width: auto;

pour les propriétés

.advanced-auth-input

- Modifier le

right: -10px;

right: -16px;

pour la propriété

.form-field-radio-button.field-required:after, .form-field-multiple-checkbox.field-required:after

- Ajouter le code suivant pour permettre l'affichage des lines sur les textarea :

Code CSS :

 
/* --- Lined textarea --- */
.linedwrap {
    max-width: 100%;
}
.linedtextarea {
    display: inline-block;
    margin: 0;
    padding: 0 0 0 10px;
    width: calc(100% - 60px);
    height: 100%;
    background-color: #FFFFFF;
}
.linedtextarea textarea,
.linedwrap .codelines .lineno {
    font-size: 10pt;
    font-family: monospace;
    line-height: normal !important;
}
.linedtextarea textarea {
    margin: 0;
    padding: 5px 0 0 0;
    width: 100% !important;
    height: 100%;
    border: 0;
}
.linedwrap .lines {
    display: inline-block;
    overflow: hidden;
    margin-top: 0;
    padding: 5px 0 0 0;
    width: 50px;
    height: 100%;
    background-color: #FFFFFF;
    border-right: 1px solid #C0C0C0;
}
.linedwrap .codelines .lineno {
    padding: 0.0em 0.5em 0 0;
    text-align: right;
    color: #AAAAAA;
    white-space: nowrap;
}
.linedwrap .codelines .lineselect {
    color: red;
}

Le fichier content.css

Une partie du code a été transférée 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

section header a:hover

- La partie "block" a été revue pour intégrer les flexbox. L'utilisation et la personnalisation devient beaucoup plus simple.

5.0

Code CSS :

.block,
.medium-block,
.small-block {
    padding: 0.8em;
    background-color: #F2F8FF;
    border-style: solid;
    border-width: 2px 1px 1px 1px;
    border-color: #366393 #CCCCCC #99B1CB #CCCCCC;
}
.block .content,
.medium-block .content,
.small-block .content {
    margin: 0;
}
.block h1,
.medium-block h1,
.small-block h1 {
    border: none;
}
.block {
    width: auto;
}
.block header {
    margin: 0 0 1% 0;
}
.block footer {
    margin: 0;
}
.medium-block,
.small-block {
    float: left;
    margin: 1% 0.5%;
}
/* ---- Affiche 2 blocs côte a côte ---- */
.medium-block {
    width: 49.00%;
}
/* ---- Affiche 3 blocs côte a côte ---- */
.small-block {
    width: 32.33%;
}
/* ---- Affiche des blocs en vertical ---- */
@media (max-width: 480px) {
    .small-block,
    .medium-block {
        width: 100%;
        margin: 1% 0%;
    }
}
@media (max-width: 768px) {
    .block {
        width: 100%;
        margin: 1em 0;
    }
}

5.1

Code CSS :

.block {
    padding: 0.8em;
    background-color: #FBFDFF;
    border-style: solid;
    border-width: 2px 1px 1px 1px;
    border-color: #366493 #F1F1F1 #F1F1F1 #F1F1F1;
}
.no-style .block {
    background-color: transparent!important;
    border: none!important;
}
.block .content {
    margin: 0;
}
.block h1 {
    border: none;
}
.block header {
    margin: 0 0 1% 0;
}
.block footer {
    margin: 0;
}
.elements-container {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}
.elements-container > .block {
    flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}
/* Gestion en colonnes pour ecran large*/
@media (min-width: 769px) {
    .elements-container {
        flex-direction: row;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        margin-left: -5px; /* @{gutter} */ 
    }
    .block { 
        margin-left: 5px; /* @{gutter} */ 
        width: 100%;
    } 
 
    .columns-2 .block { width: calc(100% / 2 - 5px); } /* calc(100% / @{number} - @{gutter}); */ 
    .columns-3 .block { width: calc(100% / 3 - 5px); }
    .columns-4 .block { width: calc(100% / 4 - 5px); }
    .columns-5 .block { width: calc(100% / 5 - 5px); }
    .columns-6 .block { width: calc(100% / 6 - 5px); }
    .columns-7 .block { width: calc(100% / 7 - 5px); }
 
    .block-xlarge { width: 100%!important; } /* Extension du bloc sur une ligne complète */
}
/* Gestion en ligne pour petit ecran */
@media (max-width: 768px) {
    .block {
        margin-bottom: 5px;
        width: 100%;
    }    
}

- L'affichage des catégories utilise aussi les flexbox

5.0

Code CSS :

.cat-description {
    margin: 10px 5px;
}
.subcat-container {
    margin: 10px 0 5px 0;
    font-size: 0;
}
.subcat-element {
    margin-bottom: 20px;
    font-size: 13px;
    display: inline-block;
    text-align: center;
}
@media (max-width: 540px){
    .subcat-element {
        width: 50% !important;
    }
}
@media (max-width: 360px){
    .subcat-element {
        width: 100% !important;
    }
}
.subcat-content {
    margin: auto;
    padding: 0 5px;
}
.subcat-content img {
    margin-bottom: 10px;
}

5.1

Code CSS :

.cat-description {
    margin: 10px 5px;
}
.subcat-container {
    margin: 10px 0 5px 0;
    font-size: 0;
}
.subcat-element {
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    border: none;
    background-color: transparent;
}
.subcat-content {
    margin: auto;
    padding: 0 5px;
}
.subcat-content img {
    margin-bottom: 10px;
}

- la partie suivante peut être supprimée

Code CSS :

 
/* --- articles --- */
.article-several.block,
.article-several.small-block,
.article-several.medium-block {
    clear: none!important;
}
.article-several {
    clear: both;
}

- 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 :

5.0

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;
}
.sortable-block .sortable-element {
    display: table;
    margin-bottom: 6px;
    padding: 0;
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #D6DEE7;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s;    
}
.sortable-block .sortable-element:hover {
    border: 1px solid #d0d8e1;
    box-shadow: 0 0 5px #EAEAEA;
}
@media (min-width:769px){ 
    .sortable-block .sortable-element .sortable-selector {
        display: table-cell;
        position: relative;
        width: 20px;
        opacity: 0.3;
        background-color: #81A4C8;
        transition: opacity 1s;
        cursor: move;
    }
 
    .sortable-selector:after {
        position: absolute;
        content: "\f047";
        top: 34%;
        left: 4px;
        color: #FFFFFF;
        font-family: fontawesome;
    }
}
.sortable-block .sortable-element:hover .sortable-actions {
    opacity: 1;
}
.sortable-block .sortable-element:hover .sortable-selector {
    opacity: 0.6;
}
.sortable-block .sortable-title {
    padding: 8px 5px 5px 10px;
    background-image: linear-gradient(to bottom, #FFFFFF 50%, #FAFAFA 100%);
}
.sortable-block .sortable-title:hover {
    background-image: linear-gradient(to bottom, #FFFFFF 25%, #F2F5F8 100%);
}
.sortable-block .sortable-title > span {
    font-size: 1.5em;
    font-weight: bold;
}
.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.5;
    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;
    border-radius: 5px;
    text-align: center;
    color: #AAAAAA;
}
.preview img {
    overflow: hidden;
}

5.1

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;
}

- Pour des raisons d'accessibilités, nous avons supprimé le h5 du container module-mini-top.

remplacer

.module-mini-container h5

par

.module-mini-container .sub-title

Vu que l'on perd quelques informations associé au h5, il faut completer les propriétés :

Code CSS :

.module-mini-container .sub-title {
    display: block;
    margin-top: 5px;
    color: #366493;
    font-size: 1.6rem;
    font-weight: bold;
}

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;

}

Les modifications HTML et CSS des modules

Les modifications HTML et CSS dans les modules étant assez nombreuses mais potentiellement inutile (sauf si vous faites votre thème), nous avons choisi de les présenter en utilisant un système de différences entre la version V5.0 et V5.1 (www.diffckecker.com)

Module articles

Nom du fichier	Url Diffchecker
articles.css	https://www.diffchecker.com/JWdkDWDk
ArticlesDisplayArticlesController.tpl	https://www.diffchecker.com/PptRfLVR
ArticlesDisplaySeveralArticlesController.tpl	https://www.diffchecker.com/ugTRQT1M
ArticlesFormFieldSelectSources.tpl	https://www.diffchecker.com/UL1Eeyc9

Module BBCode

Nom du fichier	Url Diffchecker
bbcode.css	https://www.diffchecker.com/nQVeWQAH
bbcode_editor.tpl	https://www.diffchecker.com/aHdeMT0G

Module bugtracker

Nom du fichier	Url Diffchecker
bugtracker.css	https://www.diffchecker.com/51sHZ0Jm
BugtrackerDetailController.tpl	https://www.diffchecker.com/QkKDNtF7
BugtrackerFilter.tpl	https://www.diffchecker.com/hBn3DBvy
BugtrackerHistoryListController.tpl	https://www.diffchecker.com/IlG4gJMc
BugtrackerListController.tpl	https://www.diffchecker.com/uw2xZ9oz
BugtrackerRoadmapListController.tpl	https://www.diffchecker.com/xp1RQKWV

Module calendar

Nom du fichier	Url Diffchecker
calendar.css	https://www.diffchecker.com/jZmKMeor
CalendarAjaxEventsController.tpl	https://www.diffchecker.com/KShxshNG
CalendarDisplayEventController.tpl	https://www.diffchecker.com/2uOzhuel

Module connect

Nom du fichier	Url Diffchecker
connect_mini.css	https://www.diffchecker.com/MDF9lHhb
connect_mini.tpl	https://www.diffchecker.com/06DFc94E

Module contact

Nom du fichier	Url Diffchecker
contact.css	https://www.diffchecker.com/vttx0Exf
ContactController.tpl	https://www.diffchecker.com/fZmYBwbg
ContactFormFieldObjectPossibleValues.tpl	https://www.diffchecker.com/2YJS170Z
ContactFormFieldRecipientsPossibleValues.tpl	https://www.diffchecker.com/xYSPWDNO

Module download

Nom du fichier	Url Diffchecker
download.css	https://www.diffchecker.com/nEQmbURr
DownloadDisplayDownloadFileController.tpl	https://www.diffchecker.com/dmZPCfQa
DownloadDisplaySeveralDownloadFilesController.tpl	https://www.diffchecker.com/e9oqDPQw
DownloadModuleMiniMenu.tpl	https://www.diffchecker.com/0REojulo

Module faq

Nom du fichier	Url Diffchecker
faq.css	https://www.diffchecker.com/WyFYMrlG
FaqDisplaySeveralFaqQuestionsController.tpl	https://www.diffchecker.com/gMo1ZwX3
FaqModuleMiniMenu.tpl	https://www.diffchecker.com/9ggyOHOb

Module forum

Nom du fichier	Url Diffchecker
forum.css	https://www.diffchecker.com/oL0x5T90
forum_bottom.tpl	https://www.diffchecker.com/jFBnAvgG
forum_edit_msg.tpl	https://www.diffchecker.com/yOKnNyFW
forum_forum.tpl	https://www.diffchecker.com/fitGH8RM
forum_index.tpl	https://www.diffchecker.com/eWbV8oDK
forum_membermsg.tpl	https://www.diffchecker.com/FI3C3KI5
forum_moderation_panel.tpl	https://www.diffchecker.com/iK5tAwrS
forum_post.tpl	https://www.diffchecker.com/PQLuWUUq
forum_top.tpl	https://www.diffchecker.com/DbTiCbsE
forum_topic.tpl	https://www.diffchecker.com/E0tpAmKO
forum_track.tpl	https://www.diffchecker.com/X1DUIfrN

Module gallery

Nom du fichier	Url Diffchecker
gallery.tpl	https://www.diffchecker.com/8ddCXfEO
gallery_add.tpl	https://www.diffchecker.com/OgEzYJTy
gallery_mini.tpl	https://www.diffchecker.com/Q8bn1DOl

Module LangsSwitcher

Nom du fichier	Url Diffchecker
langsswitcher.css	https://www.diffchecker.com/1PHdhV77
langswitcher.tpl	https://www.diffchecker.com/wjVZyTyj

Module media

Nom du fichier	Url Diffchecker
media.css	https://www.diffchecker.com/l4uRPAf9
media.tpl	https://www.diffchecker.com/C6JLlaZn
media_action.tpl	https://www.diffchecker.com/2odHUqKN

Module news

Nom du fichier	Url Diffchecker
news.css	https://www.diffchecker.com/0Kjaruat
NewsDisplayNewsController.tpl	https://www.diffchecker.com/uSsdexLx
NewsDisplaySeveralNewsController.tpl	https://www.diffchecker.com/UYuy0qLt
NewsFormFieldSelectSources.tpl	https://www.diffchecker.com/7g44yvjt

Nom du fichier	Url Diffchecker
newsletter_mini.css	https://www.diffchecker.com/CrUnXLYT

Module online

Nom du fichier	Url Diffchecker
OnlineHomeController.tpl	https://www.diffchecker.com/l8l3EU0x
OnlineModuleMiniMenu.tpl	https://www.diffchecker.com/I4CPYqon

Module pages

Nom du fichier	Url Diffchecker
action.tpl	https://www.diffchecker.com/XeqZyhBY
explorer.tpl	https://www.diffchecker.com/1eT5vRIf
index.tpl	https://www.diffchecker.com/grVrcLYv
pages.css	https://www.diffchecker.com/MhSo5q6t
post.tpl	https://www.diffchecker.com/qsyHiqJu

Module poll

Nom du fichier	Url Diffchecker
poll.css	https://www.diffchecker.com/OvkSiLHV
poll.tpl	https://www.diffchecker.com/8RbMy10H
poll_mini.tpl	https://www.diffchecker.com/BcIdUNVl

Module QuestionCaptcha

Nom du fichier	Url Diffchecker
QuestionCaptchaFormFieldQuestions.tpl	https://www.diffchecker.com/KKr2sJec

Module ReCaptcha

Nom du fichier	Url Diffchecker
ReCaptcha.tpl	https://www.diffchecker.com/jzfLofOV

Module sandbox

Nom du fichier	Url Diffchecker
SandboxFormController.tpl	https://www.diffchecker.com/avqzdGe6
SandboxGraphicsCSSController.tpl	https://www.diffchecker.com/c2ID5Dt4
SandboxHomeController.tpl	https://www.diffchecker.com/YRLshEql
SandboxIconsController.tpl	https://www.diffchecker.com/xV8uMsIK
SandboxMailController.tpl	https://www.diffchecker.com/pJ4792mj
SandboxMenuController.tpl	https://www.diffchecker.com/72xhsFYG

Module search

Nom du fichier	Url Diffchecker
search.css	https://www.diffchecker.com/LHH1fRDr
search_forms.tpl	https://www.diffchecker.com/nTLc5OZd
search_mini.css	https://www.diffchecker.com/B14372T8
search_mini.tpl	https://www.diffchecker.com/zyACpxO4
search_results.tpl	https://www.diffchecker.com/5ZwV4Ogo

Module shoutbox

Nom du fichier	Url Diffchecker
shoutbox_mini.css	https://www.diffchecker.com/ggbo0kUn
ShoutboxAjaxMessagesBoxController.tpl	https://www.diffchecker.com/iEbSOAp8
ShoutboxHomeController.tpl	https://www.diffchecker.com/eAFudNj1
ShoutboxModuleMiniMenu.tpl	https://www.diffchecker.com/gcidNsEO

Module sitemap

Nom du fichier	Url Diffchecker
sitemap.xml.tpl	https://www.diffchecker.com/jpZ9pGlz

Module stats

Nom du fichier	Url Diffchecker
stats.css	https://www.diffchecker.com/375AASJP
stats.tpl	https://www.diffchecker.com/yUL8XRSU
stats_mini.tpl	https://www.diffchecker.com/27U6dlZq

Module ThemesSwitcher

Nom du fichier	Url Diffchecker
themeswitcher.tpl	https://www.diffchecker.com/jTObnxr9

Module TinyMCE

Nom du fichier	Url Diffchecker
tinymce_editor.tpl	https://www.diffchecker.com/w4b8JD6T

Module user

Nom du fichier	Url Diffchecker
moderation_panel.tpl	https://www.diffchecker.com/aoOe2zT0
pm.tpl	https://www.diffchecker.com/yjCS2wfT
upload.tpl	https://www.diffchecker.com/MlbMJyJF
upload_move.tpl	https://www.diffchecker.com/oEF9giY7
UserExploreGroupsController.tpl	https://www.diffchecker.com/Emqv5HWh
UserHomeProfileController.tpl	https://www.diffchecker.com/Rp2Gk7oh
UserUsersListController.tpl	https://www.diffchecker.com/SKk6Y0Ll

Module web

Nom du fichier	Url Diffchecker
web.css	https://www.diffchecker.com/8II3WKgQ
web_mini.css	https://www.diffchecker.com/2WhcCDOW
WebDisplaySeveralWebLinksController.tpl	https://www.diffchecker.com/lK6YFShQ
WebDisplayWebLinkController.tpl	https://www.diffchecker.com/xeRhjapp
WebModuleMiniMenu.tpl	https://www.diffchecker.com/6QWc4LyN

Module wiki

Nom du fichier	Url Diffchecker
explorer.tpl	https://www.diffchecker.com/XPlILSnW
index.tpl	https://www.diffchecker.com/fv3i03qK
post.tpl	https://www.diffchecker.com/h2YU2hH4
property.tpl	https://www.diffchecker.com/X9tbseFZ
wiki.css	https://www.diffchecker.com/wLpPmwfz
wiki.tpl	https://www.diffchecker.com/jxitHrjv

Migrer un thème vers une nouvelle version

Sun, 02 Oct 2016 20:20:37 +0200

Cet article regroupe l'ensemble des liens vers les procédures de mises à jour des templates PHPBoost.
Dans le cas d'une mise à jour majeures, il sera nécessaire de réaliser quelques modifications à votre thème pour être compatible.
Dans le cas d'une mise à jour mineures, il faudra vérifier si votre thème n'as pas personnalisé des fichiers .tpl ou .css qui auraient été mis à jour.
Les articles ci-dessous vont vous permettre de convertir vos anciens thèmes vers la dernière version de PHPBoost.
Si vous souhaitez passer plusieurs versions, il est conseillé de suivre les tutoriels un par un, dans l'ordre des évolutions.

Mettre à jour son thème 4.1 en 5.0

Sat, 01 Oct 2016 23:39:36 +0200

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

Avant de commencer

La mise à jour 5.0 de PHPBoost est une mise à jour à la fois mineure et majeure au niveau de la partie graphique.

Elle est mineure car nous n'avons pas renommé de classe ou autre comme la version précédente. En revanche, nous avons introduit le responsive nativement dans le thème de base ce qui a pour effet d'augmenter sensiblement le nombre de ligne de code.

Pour rendre le thème responsive, nous avons choisi d'utiliser les medias-queries dans les fichiers CSS. Cette solution est la plus pratique de notre point de vue, mais elle complexifie le code en ajoutant un certain nombre de lignes supplémentaires.

Du fait de l'ajout massif de lignes de code, la conversion d'un thème sera longue si vous souhaitez le rendre responsive ou très simple si vous ne souhaitez que le rendre compatible.

Pour rendre le code CSS plus lisible, nous avons découper les fichiers css existants en plusieurs fichiers plus petits.

Nous allons voir ci-dessous les étapes à réaliser pour rendre le thème compatible avec la version 5.0 et les modifications à entreprendre pour retrouver votre thème sur cette nouvelle version.

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.

Code TEXT :

compatibility=4.1

à remplacer par

Code TEXT :

compatibility=5.0

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

Les fichiers tpl

Il y a quelques modifications dans les fichiers tpl. L'ajout des fichiers css notamment.

Le fichier body.tpl

Modification du style css du logo.

Code HTML :

background-image: url('{HEADER_LOGO}');

Nous avons ajouté un nouveau conteneur pour les menus du top-header.

Code HTML :

<div id="top-header-content">

L'appel des menus changent. Le code

Code HTML :

{MENUS_HEADER_CONTENT}

devient

Code HTML :

# START menus_header #
{menus_header.MENU}
# END menus_header #

Code 4.1	Code 5.0
Code HTML : {MENUS_HEADER_CONTENT}	Code HTML : # START menus_header # {menus_header.MENU} # END menus_header #
Code HTML : {SUB_HEADER_CONTENT}	Code HTML : # START menus_sub_header # {menus_sub_header.MENU} # END menus_sub_header #
Code HTML : {MENUS_LEFT_CONTENT}	Code HTML : # START menus_left # {menus_left.MENU} # END menus_left #
Code HTML : {MENUS_RIGHT_CONTENT}	Code HTML : # START menus_right # {menus_right.MENU} # END menus_right #
Code HTML : {MENUS_TOPCENTRAL_CONTENT}	Code HTML : # START menus_top_central # {menus_top_central.MENU} # END menus_top_central #
Code HTML : {MENUS_BOTTOMCENTRAL_CONTENT}	Code HTML : # START menus_bottom_central # {menus_bottom_central.MENU} # END menus_bottom_central #
Code HTML : {MENUS_TOP_FOOTER_CONTENT}	Code HTML : # START menus_top_footer # {menus_top_footer.MENU} # END menus_top_footer #
Code HTML : {MENUS_FOOTER_CONTENT}	Code HTML : # START menus_footer # {menus_footer.MENU} # END menus_footer #

Afin de permettre l'affichage des alertes noyau, ajouter la ligne

Code HTML :

# INCLUDE KERNEL_MESSAGE #

juste avant

Code HTML :

{CONTENT}

Ajouter la version de PHPBoost dans le footer après "PHPBoost"
Code HTML :
```
{PHPBOOST_VERSION}
```

Le fichier frame.tpl

Dans le head, il faut modifier le charset

Code HTML :

<meta charset="iso-8859-1" />

par

Code HTML :

<meta charset="windows-1252" />

Dans le head, juste après la description, supprimer les mots clés.

Code HTML :

<meta name="keywords" content="{SITE_KEYWORD}" />

Dans le head, juste après la description, supprimer la version de PHPBoost à "PHPBoost".

Code HTML :

<meta name="generator" content="PHPBoost" />

Afin de bien gérer les medias-queries, ajouter à la suite des meta

Code HTML :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Ajouter les nouveaux fichiers dans le cache-manager et juste en dessous pour le sans cache.

Code HTML :

 
# 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;/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}/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 #
# IF C_CSS_LOGIN_DISPLAYED #
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/login.css" type="text/css" media="screen" />
# ENDIF #

Les fichiers css

Le passage de la version 4.1 à la version 5.0 intègre une modification qui a un impact non négligeable sur les fichiers CSS. Par défaut, le thème de base est responsive. Cela veut dire qu'il peut s'adapter à des écrans de smartphone, des tablettes ou à un affichage standard sur ordinateur.

Pour se faire, nous avons utilisé les média queries pour ajuster chaque classe CSS en fonction du besoin. De ce fait, convertir un thème v4.1 pour le rendre responsive est une tâche très très lourde.

Nous vous conseillons vivement l'approche inverse qui consiste à refaire votre thème à partir du thème de base déjà responsive. Même si à première vue cela veut dire recommencer un thème, cette tâche sera beaucoup plus rapide que celle de bidouiller votre thème pour le rendre responsive.

L'introduction des médias queries nous a obligé à découper le code css dans plusieurs fichiers. Les fichiers design.css, content.css, global.css existaient sur la version 4.1, la version 5.0 intègre maintenant en plus les fichiers cssmenu.css, form.css, table.css et login.css.

Dans les paragraphes suivants, nous allons détailler les modifications majeures entre la v4.1 et la v5.0 pour vous permettre de vous y retrouver.

Nous ne ferons pas le détail de toutes les classes CSS créées afin de simplifier le travail des designers car elles sont assez nombreuses.

N'oubliez pas que la meilleur façon de retrouver une classe CSS dans un fichier est d'utiliser les outils "examiner l’élément" de votre navigateur en désactivant le cache CSS.

design.css

élément	Position V4.1	Position V5.0
html {}	default.css	design.css
#top-header-content {}	nouvelle classe pour gérer le contenu du top-header	design.css
#sub-header-content {}	nouvelle classe pour gérer le contenu du sub-header	design.css
.main-with-left {}	nouvelle classe pour indiquer dans le main si une colonne gauche existe	design.css
.main-with-right {}	nouvelle classe pour indiquer dans le main si une colonne droite existe	design.css

content.css

élément	Position V4.1	Position V5.0
table {}	content.css	Toutes les classes liées aux tableaux sont maintenant dans le fichier table.css
button, .button {}	content.css	Toutes les classes liées aux boutons sont maintenant dans le fichier form.css
.fieldset {}	content.css	Toutes les classes liées aux formulaires sont maintenant dans le fichier form.css
input, textarea {}	content.css	Toutes les classes liées aux formulaires sont maintenant dans le fichier form.css

Ce qui fait que l'on retrouve maintenant dans le fichier content.css les éléments suivants :

conteneurs généraux, éléments de module,
pagination des pages,
explorateur de catégorie,
gestion des catégories,
mini-module,
message postes,
profile user,
maintenance,
contribution,
erreur 403/404.

Les éléments en vert correspondent à des nouveautés, les éléments en bleu correspondent à des classes venant d'un autre fichier.

global.css

élément	Position V4.1	Position V5.0
.dynamic-menu {}	global.css	Toutes les classes liées aux menus sont maintenant dans le fichier cssmenu.css
#message-maintain {}	global.css	la partie maintenance a été déplacée dans le fichier content.css

Ce qui fait que l'on retrouve maintenant dans le fichier global.css les éléments suivants :

Mise en forme du texte,
Mise en forme du contenu
Les Icones specifiques PHPBoost de FontAwesome
Système d'upload
social connect

Les éléments en vert correspondent à des nouveautés, les éléments en bleu correspondent à des classes venant d'un autre fichier.

table.css

Le fichier étant nouveau, le plus simple est supprimer les classes tableaux du fichier content.css et de copier le fichier table.css dans votre thème. Il vous suffira de modifier les quelques éléments de styles (color, size) que vous aviez sur la v4.1.

form.css

Le fichier étant nouveau, le plus simple est supprimer les classes des formulaires du fichier content.css et de copier le fichier form.css dans votre thème. Il vous suffira de modifier les quelques éléments de styles (color, size) que vous aviez sur la v4.1.

cssmenu.css

Le système de menu à complètement été revu dans la v5.0 afin de le rendre responsive. Le fichier étant nouveau, le plus simple est supprimer les classes menu du fichier global.css et de copier le fichier cssmenu.css dans votre thème. Il vous suffira de modifier les quelques éléments de styles (color, size) pour ajuster à votre design.

Le fichier étant nouveau, il vous suffit de le copier dans votre thème. Vous pourrez adapter les éléments en fonction du design que vous souhaiterez.

Méthode conseillée pour la migration

Comme nous avons pu le voir au travers des différents paragraphes, le passage à la V5.0 demande un investissement du designer. Mais la cause de cette investissement est due à la responsivité.

Pour finir, nous allons vous expliquer la méthode que nous avons utilisé pour migrer les thèmes officiels. Malgré l'attente que vous avez observé de votre coté, la migration de chaque thème ne nous a pas demandé beaucoup d'effort.

Tous d'abord, nous avons utilisé une installation de la V4.1 avec le thème pour bien avoir le rendu final souhaité.

Sur une installation de la V5.0, nous avons :

copié le thème V4.1
modifié le fichier config.ini pour le rendre compatible.
déplacé ailleurs les répertoires modules/framwork/admin pour ne pas avoir de soucis de compatibilité
remplacé les fichiers tpl et css par les fichiers du thème base.

A partir de cette étape, le thème est identique aux thèmes de base.

La prochaine étape consiste à retrouver le design que nous avions sur la V4.1.

déplacer les classes dans le fichier body.tpl pour retrouver la structure de la V4.1
recopier les attributs des classes CSS de la version v4.1 vers la version v5.0

A partir de cette étape, le design du thème est identique à la version v4.1.

L'étape suivante consiste à ajuster les couleurs de liens etc. Pour ce faire, il est conseillé d'utiliser le module "bac à sable" qui permet sur une seule page d'avoir tous les éléments.

recopier les attributs des classes de la version v4.1 vers la version v5.0

Pour finir, il est nécessaire de refaire les modifications sur les modules/framework/administration que vous aviez surchargés.

re-créer les répertoires modules (framework / administration) dans le thème
copier le fichier tpl ou css en partant bien de la version v5.0
appliquer les modifications HTML que vous auriez pu faire sur la v4.1
recopier les attributs des classes CSS de la version v4.1 vers la version v5.0

Et voilà, votre thème est maintenant converti pour la v5.0 et il est responsive.

La responsivité

Bien sûr la responsivité que nous avons prévu n'est peut-être pas celle que vous souhaitez. Si vous souhaitez un comportement différent, il vous suffit d'ajuster les médias-queries.

Lorsque vous lirez le code, vous trouverez 3 types d'écriture pour gérer l'affichage.

La partie classique qui s'affichera sur tous les écrans sans restrictions particulière.

Code CSS :

 .ma-classe-css { mesattributs: valeurs; }

La partie qui ne s'affichera que sur les écrans larges.

Code CSS :

 @media (min-width: 769px) {.ma-classe-css { mesattributs: valeurs; } }

La partie qui ne s'affichera pas sur les écrans larges.

Code CSS :

 @media (max-width: 768px) {.ma-classe-css { mesattributs: valeurs; } }

Bien sûr il existe des variantes pour faire en fonction de la taille d'écran que l'on souhaite prévoir.

Mettre à jour son thème 4.0 en 4.1

Thu, 13 Nov 2014 21:50:05 +0100

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

Avant de commencer

La mise à jour 4.1 de PHPBoost est une mise à jour importante au niveau de la partie graphique.

Cette nouvelle version utilise les langages HTML5, CSS3 et intègre la police d'icône Font-Awesome. Ces évolutions importantes permettront une personnalisation encore plus simple et plus rapide des thèmes.

Lors de la refonte du code en HTML5 et CSS3, nous avons simplifié les fichiers .css et repris plusieurs classes CSS. Le code est maintenant plus lisible, mieux organisé et plus performant.

Ces changements ne sont pas sans conséquences sur les thèmes. Les fichiers .css et .tpl ayant été remaniés, la conversion d'un thème 4.0 en 4.1 est beaucoup plus complexe que le passage 3.0 à 4.0.

Néanmoins, nous allons voir ci-dessous les étapes à réaliser pour rendre le thème compatible avec la version 4.1 et les modifications à entreprendre pour retrouver votre thème sur cette nouvelle version.

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

Modification de la structure du thème

Dans ce paragraphe, nous allons détailler les modifications à effectuer dans l'organisation du répertoire des thèmes afin de le rendre installable. Pour bien comprendre la structure du thème, vous pouvez consulter cet article.

Les fichiers de configuration

Le répertoire /templates/{VOTRETHEME}/config est renommé en /lang.

Le fichier config.ini de chaque langue est découpé en deux parties.

La première partie du fichier propre à chaque langue est renommée en desc.ini et contient les éléments identifiants le thème dans chaque langue.
Code TEXT :
```
name="Base"
desc="The PHPBoost official theme."
main_color="White, Blue"
```
Ce fichier est stocké dans un sous répertoire du nom de la langue (/french et /english par défaut).

L'ancien élement "info" a été renommé en "desc"

La seconde partie du fichier commune à toutes les langues est déplacée à la racine du thème /templates/{VOTRETHEME}/dans un nouveau fichier config.ini. Il contient les éléments techniques du thème :

Code TEXT :

author="PHPBoost"
author_mail="contact@phpboost.com"
author_link="http://www.phpboost.com"
version=1.0
date="05/08/12"
compatibility=4.1
require_copyright=0
html_version=5.0 Strict
css_version=3.0
columns_disabled=right
variable_width=0
width="980px"
pictures="theme/images/theme.jpg,theme/images/admin.jpg"

Les fichiers index.php des répertoires /lang/french et /lang/english (anciennement /config) peuvent être supprimés.

A partir de cette étape, le thème peut être installé via le panneau d'administration, mais celui-ci ne sera pas fonctionnel

Les fichiers header.tpl et footer.tpl

Les fichiers header.tpl et footer.tpl ont été modifiés et remplacés par les fichiers frame.tpl et body.tpl. Nous reviendrons sur le contenu dans les prochains paragraphes. Le "regroupement" du contenu du body dans le même fichier rend les modifications beaucoup plus simples.

Le fichier frame.tpl contient la partie structurante de la page html :

Code HTML :


<html lang="{L_XML_LANGUAGE}">
    <head>
        ...
    </head>
 
    <body itemscope="itemscope" itemtype="http://schema.org/WebPage">
        # INCLUDE BODY #
        # INCLUDE JS_BOTTOM #
    </body>
</html>

Le fichier body.tpl contient le contenu du :

Code HTML :

    # INCLUDE MAINTAIN #
 
    <header id="header">
        ...
    </header>
 
    <div id="global">
        ...
        <div id="main" role="main">
            ...
        </div>
        ...
    </div>
    <footer id="footer">
        ...
    </footer>

Un exemple est donné dans l'article La structure d'un thème

Les fichiers CSS

Le fichier print.css a été déplacé dans le répertoire \templates\default\theme

=> Si vous n'avez pas modifié ce fichier, il peut être supprimé du répertoire.

Le contenu du fichier generic.css a été déplacé dans les autres fichiers CSS du thème ou dans le ficher default.css du répertoire \templates\default\theme.

=> Il peut être supprimé du répertoire de votre thème.

Par défaut, le répertoire \templates\{VOTRETHEME}\theme contient :

/images
content.css
design.css
global.css

Les fichiers images du répertoire /theme/images

Sauf si vous avez ajouté des fichiers spécifiques pour votre thème, le répertoire /theme/images ne contient que les fichiers suivants :

global.png
logo.png
theme.jpg
admin.jpg

Les autres fichiers ne sont plus utilisés et peuvent être supprimés.

Les fichiers images du répertoire /images

Sauf si vous avez ajouté des fichiers spécifiques pour votre thème, le répertoire /images ne contient que le fichier suivant :

noavatar.png

Les autres fichiers ne sont plus utilisés et peuvent être supprimés.

Modification du code html

Les modifications du code html étant très importantes, il est préférable de partir des nouveaux fichiers et d'inclure vos modifications, plutôt que d'essayer de convertir vos fichiers.

Le fichier frame.tpl

La première partie du code html à modifier correspond au fichier frame.tpl (anciennement header.tpl et footer.tpl)

Vous avez sûrement remarqué que le contenu de la balise a légèrement évolué.

Les fichiers spécifiques à PHPBoost comme le Javascript sont maintenant inclus via les balises INCLUDE.

Code TPL :

# INCLUDE  JS_TOP #

Si vous avez ajouté d'autres fichiers .css ou des scripts javascript dans votre thème il suffit de les ajouter au même endroit.

Le fichier body.tpl

La seconde partie du code html à modifier correspond au fichier body.tpl (anciennement header.tpl et footer.tpl)

Les nouvelles balises html5 ont été intégrées dans le fichier body.tpl. Pour exemple, la balise

vient encadrer l'en-tête du site :

Code TPL :

<div id="header">

devient

Code TPL :

<header id="header">

La balise

est utilisée pour les menus de gauche et droite :

Code TPL :

<div id="left_menu">

devient

Code TPL :

<aside id="menu-left">

Modification du code CSS

Il est impossible et inutile de lister toutes les modifications faites dans les fichiers CSS.

Afin de faciliter la conversion de vos thèmes, des tableaux de synthèse présentant les évolutions dans les fichiers CSS ont été réalisés.

generic.css

Classe CSS de la 4.0	Type de Modification	Classe CSS de la 4.1	Fichier CSS de la 4.1
img	Classe CSS déplacée	img	default.css
hr	Classe CSS déplacée	hr	default.css
ul	Classe CSS déplacée	ul	default.css
p	Classe CSS déplacée	p	default.css
text_center	Classe CSS remplacée	center	default.css
text_small	Classe CSS remplacée	small	global.css
text_strong	Classe CSS modifiée	text-strong	default.css
text_justify	Classe CSS modifiée	text-justify	default.css
img_right	Classe CSS remplacée	img.right	default.css
img_left	Classe CSS remplacée	img.left	default.css
valign_top	Classe CSS modifiée	valign-top	default.css
valign_bottom	Classe CSS modifiée	valign-bottom	default.css
valign_bottom	Classe CSS modifiée	valign-bottom	default.css
spacer	Classe CSS remplacée	spacer	default.css
error_handler	Classe CSS remplacée	error-handler	default.css
question	Classe CSS déplacée	question	global.css
warning	Classe CSS déplacée	warning	global.css
error	Classe CSS déplacée	error	global.css
success	Classe CSS déplacée	success	global.css
notice	Classe CSS déplacée	notice	global.css
error_handler_position	Classe CSS supprimée	-	-
smiley	Classe CSS déplacée	smiley	default.css
h3.title1	Classe CSS supprimée	-	-
h3.title2	Classe CSS supprimée	-	-
h4.stitle1	Classe CSS supprimée	-	-
h4.stitle2	Classe CSS supprimée	-	-
float_left	Classe CSS renommée et déplacée	foat-left	global.css
float_right	Classe CSS renommée et déplacée	foat-right	global.css
bb_table	Classe CSS supprimée	-	-
bb_table_col	Classe CSS supprimée	-	-
bb_ul	Classe CSS supprimée	-	-
bb_ol	Classe CSS supprimée	-	-
bb_li	Classe CSS supprimée	-	-
text_blockquote	Classe CSS renommée et déplacée	formatter-blockquote	global.css
text_code	Classe CSS renommée et déplacée	formatter-code	global.css
text_hide	Classe CSS renommée et déplacée	formatter-hide	global.css
blockquote	Classe CSS déplacée	blockquote	global.css
code	Classe CSS déplacée	code	global.css
hide	Classe CSS déplacée	hide	global.css
hide2	Classe CSS déplacée	hide2	global.css
indent	Classe CSS déplacée	indent	global.css
bb_acronym	Classe CSS renommée et déplacée	bb-acronym	global.css
bb_block	Classe CSS renommée et déplacée	bb-block	global.css
bb_fieldset	Classe CSS renommée et déplacée	bb-fieldset	global.css
xmlhttprequest_preview	Classe CSS renommée et déplacée	xmlhttprequest-preview	content.css + default.css
wikipedia_link	Classe CSS renommée et déplacée	wikipedia-link	global.css

global.css

Classe CSS de la 4.0	Type de Modification	Classe CSS de la 4.1	Fichier CSS de la 4.1
row1	Classe CSS supprimée	-	-
block_contents1	Classe CSS remplacée	block	content.css
row2	Classe CSS supprimée	-	-
block_contents2	Classe CSS remplacée	block	content.css
row3	Classe CSS supprimée	-	-
block_contents3	Classe CSS remplacée	block	content.css
xmlhhtprequest_result_search	Classe CSS renommée et déplacée	xmlhhtprequest-result-search	global.css
calendar_block	Classe CSS renommée et déplacée	calendar-block	global.css
upload_selected_cat	Classe CSS renommée et déplacée	upload-selected-cat	global.css
a	Pas de modification	a	global.css
img_link	Classe CSS renommée et déplacée	img-link	default.css
small_link	Classe CSS remplacée	small et smaller	global.css
big_link	Classe CSS remplacée	big et bigger	global.css
com	Classe CSS supprimée	-	-
admin	Pas de modification	admin	global.css
modo	Pas de modification	modo	global.css
member	Pas de modification	member	global.css
pagination	Classe CSS déplacée	pagination	default.css
pagination_current_page	Classe CSS renommée et déplacée	pagination-current-page	default.css
dynamic_menu	Classe CSS renommée et déplacée	dynamic-menu	global.css
menu_vertical_0	Classe CSS renommée	menu-vertical-0	global.css

design.css

Classe CSS de la 4.0	Type de Modification	Classe CSS de la 4.1	Fichier CSS de la 4.1
body	Classe CSS conservée	body	design.css
html	Classe CSS déplacée	html	default.css
global	Classe CSS conservée avec une arborescence modifiée	global	design.css
header_container	Classe CSS renommée	header	design.css
logo	Classe CSS renommée avec une arborescence modifiée	site-logo	design.css
site_name	Classe CSS renommée avec une arborescence modifiée	site-name-container	design.css
header	Classe CSS renommée	top-header	design.css
sub_header	Classe CSS renommée	sub-header	design.css
compteur	Classe CSS conservée	compteur	design.css
left_menu	Classe CSS renommée	menu-left	design.css
right_menu	Classe CSS renommée	menu-right	design.css
main	Classe CSS conservée	main	design.css
main_content	Classe CSS renommée	main-content	design.css
links	Classe CSS renommée	breadcrumb	design.css
top_contents	Classe CSS renommée	top-content	design.css
bottom_contents	Classe CSS renommée	bottom-content	design.css
top_footer	Classe CSS renommée	top-footer	design.css
footer	Classe CSS conservée	footer	design.css

content.css

Classe CSS de la 4.0	Type de Modification	Classe CSS de la 4.1	Fichier CSS de la 4.1
table	Classe CSS conservée mais utilisation des classes CSS thead, tbody, tfoot	table	content.css
block_container	Classe CSS renommée	block, small-block, medium-block	content.css
block_contents	Classe CSS renommée	content	content.css
block_top	Classe CSS supprimée, utilisation de la balise h1	block h1	content.css
hr	Classe CSS déplacée	hr	default.css
list	Classe CSS supprimée mais utilisation de la balise ul en list ou ajout de la classe CSS no-list	no-list	default.css
h1	Classe CSS déplacée et appliquée sur certain éléments tel que les block	h1	content.css et global.css
h2	Classe CSS déplacée et appliquée sur certains éléments tel que les block	h2	content.css et global.css
h3	Classe CSS déplacée et appliquée sur certain éléments tel que les block	h3	content.css et global.css
h4	Classe CSS déplacée et appliquée sur certains éléments tel que les block	h4	content.css et global.css
h5	Classe CSS déplacée et appliquée sur certains éléments tel que les block	h5	content.css et global.css
h6	Classe CSS déplacée et appliquée sur certains éléments tel que les block	h6	content.css et global.css
fieldset_mini	Classe CSS renommée	fieldset-mini	content.css et global.css
input	Classe CSS conservée	input	content.css
textarea	Classe CSS conservée	textarea	content.css
optgroup	Classe CSS conservée	optgroup	content.css
select	Classe CSS conservée	select	content.css
xmlhttprequest_preview	Classe CSS renommée	xmlhttprequest-preview	content.css
button	Classe CSS conservée	button	content.css
option	Classe CSS conservée	option	content.css
fieldset	Classe CSS conservée	fieldset	content.css
legend	Classe CSS conservée	legend	content.css
fieldset-submit	Classe CSS conservée	fieldset-submit	content.css
msg_x	Classe CSS déplacée dans le forum et création de nouvelle classe CSS pour la messagerie privée	message-x	content.css
module_x	Classe CSS déplacée dans le forum	.module_x	forum.css
module_mini_container	Classe CSS renommée	module-mini-container	content.css
module_mini_top	Classe CSS renommée	module-mini-top	content.css
module_mini_contents	Classe CSS renommée	module-mini-contents	content.css
module_mini_bottom	Classe CSS renommée	module-mini-bottom	content.css
label	Classe CSS conservée mais ajout d'une classe form-element	label	content.css
comment	Classe CSS supprimée car harmonisée avec les messages privés	message	content.css

Mettre à jour son thème 3.0 en 4.0

Tue, 15 Jul 2014 06:25:41 +0200

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 :


# 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">

</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.

Wiki

Mettre à jour son thème 5.2 en 6.0

Introduction

config.ini

frame.tpl

Appel des fichiers css dans /templates/{THEME}/frame.tpl

Contenu du @import.css

Ajustement des détails

HTML autour du contenu

body.tpl

Les modules

les fichiers tpl

les fichiers css

Mettre à jour son thème 5.1 en 5.2

Avant de commencer

Le fichier de configuration

Intégration de FontAwesome 5

Les fichers HTML

Meta OPENGRAPH (optionnel)

Le scroll-to-top (optionnel)

role (optionnel)

aria (optionnel)

Les fichiers .css

Nouveaux fichiers .css

px vs em (optionnel)

design.css (optionnel)

form.css

global.css

content.css

table.css

login.css

cssmenu.css

Les modifications HTML et CSS des modules

bbcode.css

calendar.css

forum.css

article.css

connect-mini.tpl

Boutons de partage Réseaux sociaux

L'accessibilité

Diffchecker

Module articles

Module BBCode

Module bugtracker

Module calendar

Module connect

Module contact

Module download

Module faq

Module forum

Module gallery

Module GoogleMaps

Module guestbook

Module LangsSwitcher

Module media

Module news

Module newsletter

Module online

Module pages

Module poll

Module QuestionCaptcha

Module ReCaptcha

Module search

Module shoutbox

Module sitemap

Module stats

Module templates

Module ThemesSwitcher

Module TinyMCE

Module user

Module web

Module wiki

Mettre à jour son thème 5.0 en 5.1

Avant de commencer

Le fichier de configuration

L'UTF8

L'encodage des fichiers

charset

Modifications HTML du template

Le fichier frame.tpl