Dernière mise à jour : 11/02/2019 à 07h05
Table des matières
- Avant de commencer
- Le fichier de configuration
- Intégration de FontAwesome 5
- Les fichers HTML
- Les fichiers .css
- Les modifications HTML et CSS des modules
- Diffchecker
- Module articles
- Module BBCode
- Module bugtracker
- Module calendar
- Module connect
- Module contact
- Module download
- Module faq
- Module forum
- Module gallery
- Module GoogleMaps
- Module guestbook
- Module LangsSwitcher
- Module media
- Module news
- Module newsletter
- Module online
- Module pages
- Module poll
- Module QuestionCaptcha
- Module ReCaptcha
- Module search
- Module shoutbox
- Module sitemap
- Module stats
- Module templates
- Module ThemesSwitcher
- Module TinyMCE
- Module user
- Module web
- Module wiki
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.
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".
Vous pouvez en profiter pour modifier la
versionet 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 :
par .error, .notice, .warning, .success, .question, .message-helper
.message-helper
et
global.css :
par .error:before, .notice:before, .warning:before, .success:before, .question:before, .message-helper:before
.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:12dans 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 :
et remplacez la valeur 1.2 par 1.4..cssmenu.cssmenu-group > ul > li > .cssmenu-title { font-size: 1.2rem; }
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 :
par : # 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 #
connect-mini.tpl :
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 :
pour préciser que l'icone n'était pas utile en revue d'écran et l'attribut aria-hidden="true"
Code TPL :
pour indiquer en revue d'écran à quoi sert le lien.aria-label="editer"
Diffchecker
L'utilitaire diffchecker (www.diffchecker.com) permet de lister les différences entre la version 5.1 et la 5.2. Il vous suffit de suivre les liens proposés sur les fichiers pour avoir un état comparatif des modifications apportées.
Module articles
Nom du fichier | Url Diffchecker |
articles.css | https://www.diffchecker.com/Mbv3Y0Zo |
ArticlesDisplayArticlesController.tpl | https://www.diffchecker.com/aG9fAkn7 |
ArticlesDisplaySeveralArticlesController.tpl | https://www.diffchecker.com/MjONqHmk |
Module BBCode
Nom du fichier | Url Diffchecker |
bbcode.js | https://www.diffchecker.com/pcA3ks82 |
bbcode.css | https://www.diffchecker.com/duWAJ4TG |
bbcode_editor.tpl | https://www.diffchecker.com/pfeVRYik |
Module bugtracker
Nom du fichier | Url Diffchecker |
bugtracker.css | https://www.diffchecker.com/Otx840RX |
BugtrackerBody.tpl | https://www.diffchecker.com/b24caoJq |
BugtrackerDetailController.tpl | https://www.diffchecker.com/fDpaBi21 |
BugtrackerFilter.tpl | https://www.diffchecker.com/5MS77Rwo |
BugtrackerHistoryListController.tpl | https://www.diffchecker.com/M2DfpdWQ |
BugtrackerListController.tpl | https://www.diffchecker.com/btk0iXtk |
BugtrackerRoadmapListController.tpl | https://www.diffchecker.com/GxHfHQez |
BugtrackerStatsListController.tpl | https://www.diffchecker.com/Gk5dB2au |
Module calendar
Nom du fichier | Url Diffchecker |
calendar.css | https://www.diffchecker.com/zrWI1Iwg |
CalendarAjaxCalendarController.tpl | https://www.diffchecker.com/TtrPLOp3 |
CalendarAjaxEventsController.tpl | https://www.diffchecker.com/mXf31oZl |
CalendarDisplayEventController.tpl | https://www.diffchecker.com/wxTaIowQ |
CalendarDisplaySeveralEventsController.tpl | https://www.diffchecker.com/qPU7NdPh |
Module connect
Nom du fichier | Url Diffchecker |
connect_mini.css | https://www.diffchecker.com/UlGCWq6i |
connect_mini.tpl | https://www.diffchecker.com/hF99egwj |
Module contact
Nom du fichier | Url Diffchecker |
contact.css | https://www.diffchecker.com/2GP0GCXX |
ContactFormFieldObjectPossibleValues.tpl | https://www.diffchecker.com/xRS8Zi5n |
ContactFormFieldRecipientsPossibleValues.tpl | https://www.diffchecker.com/QUyoJabs |
Module download
Nom du fichier | Url Diffchecker |
download.css | https://www.diffchecker.com/K3fQYCiq |
download_mini.css | https://www.diffchecker.com/J9rprpDV |
DownloadDisplayDownloadFileController.tpl | https://www.diffchecker.com/HdH3MMcv |
DownloadDisplaySeveralDownloadFilesController.tpl | https://www.diffchecker.com/IzBU9ODV |
DownloadModuleMiniMenu.tpl | https://www.diffchecker.com/YiXaNvnJ |
Module faq
Nom du fichier | Url Diffchecker |
faq-mini.css | https://www.diffchecker.com/mRg3ZiSE |
faq.css | https://www.diffchecker.com/DEoQ7LRN |
FaqDisplaySeveralFaqQuestionsController.tpl | https://www.diffchecker.com/uq40yJrh |
Module forum
Nom du fichier | Url Diffchecker |
forum.css | https://www.diffchecker.com/lJI5eK91 |
forum_alert.tpl | https://www.diffchecker.com/gybtIIke |
forum_bottom.tpl | https://www.diffchecker.com/zX0t750M |
forum_edit_msg.tpl | https://www.diffchecker.com/SDpcsF4l |
forum_forum.tpl | https://www.diffchecker.com/KQ0UoeKq |
forum_generic_results.tpl | https://www.diffchecker.com/zVCUctSk |
forum_index.tpl | https://www.diffchecker.com/lnP8mPbN |
forum_membermsg.tpl | https://www.diffchecker.com/yWOntWMN |
forum_moderation_panel.tpl | https://www.diffchecker.com/0FZpzAl3 |
forum_move.tpl | https://www.diffchecker.com/lHXdMajJ |
forum_post.tpl | https://www.diffchecker.com/w82qs1V6 |
forum_stats.tpl | https://www.diffchecker.com/KxBv7p51 |
forum_top.tpl | https://www.diffchecker.com/d2hYToei |
forum_topic.tpl | https://www.diffchecker.com/aayAKY2Y |
forum_track.tpl | https://www.diffchecker.com/KsLP4pEq |
Module gallery
Nom du fichier | Url Diffchecker |
gallery.css | https://www.diffchecker.com/v60VMyrS |
gallery.tpl | https://www.diffchecker.com/KeF3gQza |
gallery_add.tpl | https://www.diffchecker.com/erYuze7E |
gallery_mini.tpl | https://www.diffchecker.com/l4mzSt4g |
Module GoogleMaps
Nom du fichier | Url Diffchecker |
GoogleMaps.css | https://www.diffchecker.com/XELEuZLA |
GoogleMapsFormFieldMultipleMarkers.tpl | https://www.diffchecker.com/QjlcytPU |
Module guestbook
Nom du fichier | Url Diffchecker |
guestbook.css | https://www.diffchecker.com/01Qs0hxk |
GuestbookController.tpl | https://www.diffchecker.com/HN3SFPE7 |
Module LangsSwitcher
Nom du fichier | Url Diffchecker |
langsswitcher.css | https://www.diffchecker.com/vdDeJ5iQ |
langswitcher.tpl | https://www.diffchecker.com/zZzctbVi |
Module media
Nom du fichier | Url Diffchecker |
media.css | https://www.diffchecker.com/TShXsw1d |
media.tpl | https://www.diffchecker.com/jfpQcnzC |
media_action.tpl | https://www.diffchecker.com/2XZCteaz |
moderation_media.tpl | https://www.diffchecker.com/ySG5JahQ |
Module news
Nom du fichier | Url Diffchecker |
news.css | https://www.diffchecker.com/mrjiElZ5 |
NewsDisplayNewsController.tpl | https://www.diffchecker.com/9vz0h1Rv |
NewsDisplaySeveralNewsController.tpl | https://www.diffchecker.com/R6blynif |
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 |
Module search
Nom du fichier | Url Diffchecker |
search.css | https://www.diffchecker.com/yAm2GfU6 |
search_mini.css | https://www.diffchecker.com/f0ITHJNT |
search_mini.tpl | https://www.diffchecker.com/GtkIRebe |
Module shoutbox
Nom du fichier | Url Diffchecker |
shoutbox.css | https://www.diffchecker.com/FGPiDQCj |
shoutbox_mini.css | https://www.diffchecker.com/fYySkuHN |
ShoutboxAjaxMessagesBoxController.tpl | https://www.diffchecker.com/kjRk80nX |
ShoutboxHomeController.tpl | https://www.diffchecker.com/qKdppxeZ |
ShoutboxModuleMiniMenu.tpl | https://www.diffchecker.com/Q6BisnHb |
Module sitemap
Nom du fichier | Url Diffchecker |
GenerateXMLSitemapController.tpl | https://www.diffchecker.com/FSNHZx0q |
sitemap.css | https://www.diffchecker.com/elrwzTYw |
Module stats
Nom du fichier | Url Diffchecker |
stats.css | https://www.diffchecker.com/eURDxO9W |
stats.tpl | https://www.diffchecker.com/Lg7m7ISt |
stats_mini.tpl | https://www.diffchecker.com/j1Bh7xI9 |
stats_tables.tpl | https://www.diffchecker.com/9xYdsmWB |
Module templates
Nom du fichier | Url Diffchecker |
content.css | https://www.diffchecker.com/LamWVWQv |
cssmenu.css | https://www.diffchecker.com/0JrNhiMj |
design.css | https://www.diffchecker.com/nD0b65lv |
form.css | https://www.diffchecker.com/PIpN2cCx |
global.css | https://www.diffchecker.com/gV5wLwWM |
login.css | https://www.diffchecker.com/7BkG6KYU |
table.css | https://www.diffchecker.com/zqQ8KNWf |
body.tpl | https://www.diffchecker.com/v061SqXm |
frame.tpl | https://www.diffchecker.com/4uCdrgMd |
Module ThemesSwitcher
Nom du fichier | Url Diffchecker |
themeswitcher.css | https://www.diffchecker.com/WeoJEIhy |
Module TinyMCE
Nom du fichier | Url Diffchecker |
tinymce.css | https://www.diffchecker.com/TvywVzJr |
Module user
Nom du fichier | Url Diffchecker |
contribution_panel.tpl | https://www.diffchecker.com/qKjFajwY |
moderation_panel.tpl | https://www.diffchecker.com/oEepOIsX |
pm.tpl | https://www.diffchecker.com/W8c1ET32 |
upload.tpl | https://www.diffchecker.com/pjHjJPhR |
upload_move.tpl | https://www.diffchecker.com/soCw5dQq |
user.css | https://www.diffchecker.com/iEvpTAqO |
UserExploreGroupsController.tpl | https://www.diffchecker.com/3isR3CK1 |
UserHomeProfileController.tpl | https://www.diffchecker.com/Ddy6gOlQ |
UserLoginController.tpl | https://www.diffchecker.com/BWnEF1lG |
UserMessagesController.tpl | https://www.diffchecker.com/e3D08q9U |
UserViewProfileController.tpl | https://www.diffchecker.com/TwpSTkiY |
Module web
Nom du fichier | Url Diffchecker |
web.css | https://www.diffchecker.com/11N6rwTF |
web_mini.css | https://www.diffchecker.com/l9t8JQKx |
WebDisplaySeveralWebLinksController.tpl | https://www.diffchecker.com/0TSe9I5o |
WebDisplayWebLinkController.tpl | https://www.diffchecker.com/ZmgEymU3 |
WebModuleMiniMenu.tpl | https://www.diffchecker.com/I60J0hcO |
Module wiki
Nom du fichier | Url Diffchecker |
wiki.js | https://www.diffchecker.com/X56kSZd8 |
explorer.tpl | https://www.diffchecker.com/Ciiz76WU |
favorites.tpl | https://www.diffchecker.com/enW8M4js |
history.tpl | https://www.diffchecker.com/oIryJ3KP |
index.tpl | https://www.diffchecker.com/VDks29gO |
post.tpl | https://www.diffchecker.com/iMDKWspW |
property.tpl | https://www.diffchecker.com/k98wrHTA |
wiki.css | https://www.diffchecker.com/dglcIkvZ |
wiki.tpl | https://www.diffchecker.com/Xpw87uCK |
wiki_js_tools.tpl | https://www.diffchecker.com/7lDShndP |
wiki_tools.tpl | https://www.diffchecker.com/1xHur8JD |