Migrer un thème vers une nouvelle version

Mettre à jour son thème 5.1 en 5.2

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 29/01/2019 à 15h08
[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 mais il y'a quand même quelques ajouts et modification à 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 icones 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é, il est préférable de les supprimés.
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 é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_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 valide avec les 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 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.

design.css (optionnel)


Dans le cas ou vous utiliser 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[/code]
remplacer le par le code suivant : [code=form.cssform 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".
<- ICI ->

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

login.css



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]