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 : 02/11/2018 à 17h51

Table des matières

Avant de commencer
Le fichier de configuration
Meta OPENPGRAPH (optionnel)
Intégration de FontAwesome 5
Modifications diverses (optionnel)
1. Nouveaux fichiers .css
2. px vs em (optionnel)
Les modifications des fichiers .css du thème
Les modifications HTML et CSS des modules

[ARTICLE EN COURT DE REDACTION]

Nous allons voir au fil de cet article la manière de 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.
Le travail de la version 5.0 porte ses fruits puisque cette nouvelle version ira très vite en conversion.

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

Meta OPENPGRAPH (optionnel)

Nous avons ajouté des méta données OPENGRAPH pour améliorer le référencement.
Ajouter les éléments suivants dans le fichier frame.tpl
Ajouter dans la balise

<html lang="{L_XML_LANGUAGE}">

les élements 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_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 #

Intégration de FontAwesome 5

L'intégration de la version 5 de FontAwesome n'est pas compliqué mais nécessite quelques adaptations.
La version 5 de FontAwesome sépare les icones dans plusieurs fichiers et de nouveaux appels doivent être faits pour garantir de cibler le bon fichier.
Le terme "fa" devient "fas", "far", "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 disponible sur le site de FontAwesome.

L'appel de la font change.
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")
[É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 :

Modifications diverses (optionnel)

Les modifications de ce paragraphe sont informatives et ne nécessitent pas d'intégration dans votre thème.

Nouveaux fichiers .css

Vous pourrez constater que sur la version 5.2, il existe des fichiers .css supplémentaires (color.css, 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 en 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.

Les modifications des fichiers .css du thème

Seules les modifications très impactantes sont 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.

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

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

La notion de message "flottant/éphémère" a été intégré dans le code CSS pour permettre d'adapter le code en fonction des 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 :

/* -- Les messages d erreurs -- */
/* ---------------------------- */
.message-helper {
    position: relative;
    display: block;
    margin: 0.309em auto 1em auto;
    padding: 0.618em 0.618em 0.618em 2.618em;
    height: auto;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    line-height: 1.2;
    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; /* Solid icons*/
    font-style: normal;
    line-height: normal;
    font-size: 1.5em;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.message-helper-small {
    width: 50%;
}
.message-helper.error:before       { content: "\f00d"; } /* copy times */
.message-helper.notice:before      { content: "\f12a"; } /* copy exclamation */
.message-helper.warning:before     { content: "\f071"; } /* copy exclamation-triangle */
.message-helper.success:before     { content: "\f00c"; } /* copy check */
.message-helper.question:before    { content: "\f128"; } /* copy question */
.message-helper.member-only:before { content: "\f071"; } /* copy exclamation-triangle */
.message-helper.modo-only:before   { content: "\f071"; } /* copy exclamation-triangle */
.message-helper.admin-only:before  { content: "\f071"; } /* copy exclamation-triangle */
.floating-message-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    top: 0.456em;
}
.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;
}
.message-helper { background-color: rgba(54, 100, 147, 0.1) }
.error, .error:before               { color: #C72125; }
.notice, .notice:before             { color: #7f7f7f; }
.warning, .warning:before           { color: #C95A21; }
.success, .success:before           { color: #22A31B; }
.question, .question:before         { color: #1E5083; }
.member-only, .member-only:before   { color: #9F86CD; }
.modo-only, .modo-only:before       { color: #7657AE; }
.admin-only, .admin-only:before     { color: #5D3B9A; }
.error        { border-color: #E0464A; background-color: rgba(224, 70, 74, 0.2); }
.notice       { border-color: #7f7f7f; background-color: rgba(53, 53, 53, 0.2); }
.warning      { border-color: #E27B47; background-color: rgba(226, 123, 70, 0.2); }
.success      { border-color: #40b73a; background-color: rgba(67, 182, 73, 0.2); }
.question     { border-color: #1E5083; background-color: rgba(54, 100, 147, 0.2); }
.member-only  { border-color: #9F86CD; background-color: rgba(93, 60, 151, 0.2); }
.modo-only    { border-color: #7657AE; background-color: rgba(93, 60, 151, 0.2); }
.admin-only   { border-color: #5D3B9A; background-color: rgba(93, 60, 151, 0.2); }
.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); }

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

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-content {
    position: relative;
    padding-bottom: 52.76%;
    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%;
}

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 {
    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: 0.309em;
    padding: 0;
    width: 100%;
    transition: all 0.2s;
}

content.css :

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

content.css :

.sortable-block .sortable-title {
    flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    padding: 0.618em;
}

content.css :

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

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;
}
/*@media (min-width: 769px) {
    .more {
        margin: 0 0.228em 0.618em 1em;
        padding: 0;
    }
}*/
.more-element-sharing {
    position: relative;
    margin: 5px 0 0 0;
    padding: 0;
}
@media (min-width: 769px) {
    .more-element-sharing {
        margin: 20px 0 5px 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 6px 6px 0;
    }
}
.sharing-element a {
    display: block;
    padding: 6px 20px 10px 20px;
}
@media (max-width: 768px) {
    .sharing-element a {
        font-size: 1.2em;
        width: 90%;
        display: block;
        margin: 20px 0 0 0;
        padding: 6px 30px 10px 23px;
    }
}

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

table.css

Pas de modification impactante

design.css

Pas de modification impactante

Pas de modification impactante

cssmenu.css

Pas de modification impactante hormis l'intégration de FontAwesome 5 indiqué 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 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)
[Préparer le diffchecker]

Avant de commencer

Le fichier de configuration

Meta OPENPGRAPH (optionnel)

Intégration de FontAwesome 5

Modifications diverses (optionnel)

Nouveaux fichiers .css

px vs em (optionnel)

Les modifications des fichiers .css du thème

form.css

global.css

content.css

table.css

design.css

login.css

cssmenu.css

Les modifications HTML et CSS des modules