Mettre à jour son thème 5.1 en 5.2 - Wiki

Cet article a été mis à jour, vous consultez ici une archive de cet article!

Dernière mise à jour : 29/01/2019 à 21h37

Table des matières

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 avec 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é, 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';

[Évolution possible lors de la rédaction du tuto FA Pro]

Quelques icônes changent de codes, il faut donc impérativement faire le remplacement.
La liste des icônes utilisées de base dans PHPBoost est la suivante :

Les fichers HTML

Meta OPENPGRAPH (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 élements 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 certaines entê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

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

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

content.css

Dans certains modules nous avons ajoutés un menu déroulant pour les élements 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édia. Ajouter le suivants 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 remplacement suivant :

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

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

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

font-size: 12

dans les classes

section header h2, article header h2[/code]

<h3 class="formatter-title wiki-paragraph-3" id="paragraph-table-css">table.css</h3><br />



Pas de modification impactante

<h3 class="formatter-title wiki-paragraph-3" id="paragraph-login-css">login.css</h3><br />



Pas de modification impactante

<h3 class="formatter-title wiki-paragraph-3" id="paragraph-cssmenu-css">cssmenu.css</h3><br />



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

<h2 class="formatter-title wiki-paragraph-2" id="paragraph-les-modifications-html-et-css-des-modules">Les modifications HTML et CSS des modules</h2><br />



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 majoritairement en utilisant un système de différences entre la version V5.1 et V5.2 (www.diffckecker.com)

Les éléments plus impactants sont présenté ci-dessous.

<h3 class="formatter-title wiki-paragraph-3" id="paragraph-bbcode-css">bbcode.css</h3><br />



Suite au passage a font-awesome 5, des icones ont changé de code.

Remplacer la partie du fichier [i]bbcode.css[/i] 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;

}[/code]

<h3 class="formatter-title wiki-paragraph-3" id="paragraph-calendar-css">calendar.css</h3><br />



Si vous utiliser le calendrier, il manquera probablement le code suivant pour un rendu optimal.

[code=calendar.css]calendar {

    with: 100%;

}[/code]

<h3 class="formatter-title wiki-paragraph-3" id="paragraph-forum-css">forum.css</h3><br />



Vu que nous avons déplacer la partie .fa-announce dans le [i]global.css[/i], vous pouvez la supprimer du fichier [i]forum.css[/i]

En fonction de vos modifications, il est probablement que le texte des menus du forum soit trop petit.

Rechercher le code suivant:[code=forum.css].cssmenu.cssmenu-group > ul > li > .cssmenu-title {

    font-size: 1.2rem;

}[/code] et remplacer la valeur 1.2 par 1.4.

<h3 class="formatter-title wiki-paragraph-3" id="paragraph-article-css">article.css</h3><br />



Suite au passage a font-awesome 5, des icones ont changé de code.

Remplacer l'icone de fa-pagebreak avec le code suivant : [code=article.css,0,1].fa-pagebreak:before { content: "\f477"; }[/code]

<h3 class="formatter-title wiki-paragraph-3" id="paragraph-connect-tpl">connect.tpl</h3><br />



Avec l'arrivée du nouveau module de réseau sociaux, il est nécessaire de remplacer la partie connexion Facebook et google du module connect.

Remplacer le code suivant : [code=connect.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 #[/code]par : [code=connect.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 ##[/code]

<h3 class="formatter-title wiki-paragraph-3" id="paragraph-boutons-de-partage-reseaux-sociaux">Boutons de partage Réseaux sociaux</h3><br />



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 élement unique.

Il faut ajouter dans le fichier tpl le code suivant : [code=tpl,0,1]${ContentSharingActionsMenuService::display()}

[Préparer le diffchecker]