Migrer un thème vers une nouvelle version

Mettre à jour son thème 5.1 en 5.2

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;
ou
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;
ou
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
<!-- Theme 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 <a> 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

et
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

login.css


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




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



Module newsletter


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




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
Cette page a été vue 391 fois