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

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

Dernière mise à jour : 06/01/2017 à 10h08

Table des matières

Avant de commencer
Le fichier de configuration
L'UTF8
1. L'encodage des fichiers
2. Le fichier frame.tpl
Le fichier body.tpl
Les fichiers CSS

# ARTICLE EN COURS - DÉVELOPPEMENT DE LA V5.1 EN COURS#

Nous allons voir au fil de cet article la manière de modifier un thème 5.0 afin de pouvoir l'utiliser sur la version 5.1 de PHPBoost.

Avant de commencer

La mise à jour 5.1 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.

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.0

" par "

compatibility=5.1

"

A partir de cette étape, le thème peut être installé via le panneau d'administration. Il sera presque entièrement fonctionnel

L'UTF8

L'encodage des fichiers

C'est peut être la partie la plus compliqué pour qui ne sait pas comment si prendre. Avec le passage de PHPBoost en UTF8, il est important de convertir tous les fichiers qui contiennent du texte (notamment avec des accents) en UTF8 (sans BOM). Pour cela il faudra utiliser les fonctions de conversion de votre outils de développement (notepad++, sublimeText, etc...)

La conversion des fichiers sans accents n'est pas obligatoire mais vous pouvez le réaliser aussi pour être tranquille.

Voici les fichiers qu'il faut absolument convertir :

lang/french/desc.ini
lang/english/desc.ini
config.ini

Si vous avez des commentaires, il sera conseillé de convertir aussi les fichiers :

body.tpl
frame.tpl
les fichiers css

Le fichier frame.tpl

Il faut changer le meta du fichier frame.tpl

Remplacer la ligne 5

<meta charset="windows-1252" />

par

<meta charset="UTF-8" />

.

En plus, il faudra ajouter la ligne suivante juste en dessous :

<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>

Le fichier body.tpl

Le code du compteur de visite

Pour permettre une personnalisation plus facile du compteur de visite, nous avons ajouté des classes CSS à celui-ci.

Remplacer le code :

Code TPL :

# IF C_COMPTEUR #
<div id="compteur">
<span class="text-strong">{L_VISIT} : </span>{COMPTEUR_TOTAL}
<br />
<span class="text-strong">{L_TODAY} : </span>{COMPTEUR_DAY}
</div>
# ENDIF #

par celui-ci :

Code TPL :

# IF C_COMPTEUR #
<div id="compteur" class="hidden-small-screens">
<div class="compteur-total">
<span class="text-strong">{L_VISIT} : </span>
{COMPTEUR_TOTAL}
</div>
<div class="compteur-today">
<span class="text-strong">{L_TODAY} : </span>
{COMPTEUR_DAY}
</div>
</div>
# ENDIF #

la position du compteur de visite

Le compteur se positionnant n'importe comment en mobile, nous avons ajuster son positionnement. Déplacer le code ci-dessus à la fin du

#top-header

et avant le

#sub-header

.

Vous pouvez aussi remplacer le code du

<header>

par celui-ci :

Code TPL :

<header id="header">
<div id="top-header">
<div id="site-infos">
<div id="site-logo" # IF C_HEADER_LOGO #style="background-image: url('{HEADER_LOGO}');"# ENDIF #></div>
<div id="site-name-container">
<a id="site-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a>
<span id="site-slogan">{SITE_SLOGAN}</span>
</div>
</div>
<div id="top-header-content">
# IF C_MENUS_HEADER_CONTENT #
# START menus_header #
{menus_header.MENU}
# END menus_header #
# ENDIF #
</div>
# IF C_COMPTEUR #
<div id="compteur" class="hidden-small-screens">
<div class="compteur-total">
<span class="text-strong">{L_VISIT} : </span>
{COMPTEUR_TOTAL}
</div>
<div class="compteur-today">
<span class="text-strong">{L_TODAY} : </span>
{COMPTEUR_DAY}
</div>
</div>
# ENDIF #
</div>
<div id="sub-header">
<div id="sub-header-content">
# IF C_MENUS_SUB_HEADER_CONTENT #
# START menus_sub_header #
{menus_sub_header.MENU}
# END menus_sub_header #
# ENDIF #
</div>
<div class="spacer"></div>
</div>
<div class="spacer"></div>
</header>

Le code HTML du scroll to top

Pour permettre d'afficher le bouton "scroll to top", il est nécessaire d'ajouter en fin de fichier (après le

</footer>

), le code suivant :

Code TPL :

<a id="scroll-to-top" class="scroll-to" href="#"><i class="fa fa-chevron-up"></i></a>

Les fichiers CSS

Même si les modifications CSS sont mineurs, il y en a quelques unes.

Le fichier design.css

- Ajouter l'attribut

position: relative;

à la classe

div#top-header

.

- Remplacer le code du compteur

Code CSS :

div#compteur {
position: absolute;
right: 0;
margin-right: 15px;
font-size: 0.9em;
color: #E9ECD9;
text-align: right;
}
@media (min-width: 769px) {
div#compteur {
top: 100px;
}
}

par celui-ci :

Code CSS :

div#compteur {
position: absolute;
right: 0;
bottom : 1em;
margin-right: 10px;
font-size: 0.9em;
color: #F9FCFF;
text-align: right;
}

- Ajouter le code CSS du scroll to top en fin de fichier :

Code CSS :

/* --- Scroll to Top --- */
.scroll-to {
position: fixed;
z-index: 10;
display: none;
background-color: rgba(15, 15, 16, 0.8);
}
#scroll-to-top {
right: 25px;
bottom: 25px;
padding: 9px 11px 11px 10px;
}
.scroll-to i {
font-size: 2em;
color: rgba(255, 255, 255, 0.8);
transition: 0.2s;
}
.scroll-to:hover i {
color: rgba(255, 255, 255, 1);
transition: 0.5s;
}

Le fichier global.css

Nous avons rendu la personnalisation de certains blocs du bbcode beaucoup plus facile.

Remplacer le code , vous le trouverez vers la ligne 326

Code CSS :

/* --- les blocs de quote, de code ou caches --- */
.formatter-hide,
.formatter-code,
.formatter-blockquote {
display: block;
margin: auto;
padding: 2px 0;
width: 93%;
font-weight: bold;
}
.hide,
.code,
.blockquote {
margin: 0 25px;
padding: 8px;
max-height: 500px;
background-color: #FAFAFA;
border: 1px solid #DDDDDD;
border-radius: 3px;
overflow: auto;
color: #444444;
}
.hide {
height: 10px;
overflow: hidden;
cursor: pointer;
}
.hide2 {
visibility: hidden;
overflow: auto;
}

par celui-ci :

Code CSS :

/* --- les blocs de quote, de code ou caches --- */
.formatter-container {
position: relative;
display: block;
margin: auto;
width: 93%;
color: #444444;
}
.formatter-content-title {
font-weight: bold;
}
.formatter-content {
margin: 0;
padding: 8px;
max-height: 500px;
background-color: #FAFAFA;
border: 1px solid #DDDDDD;
overflow: auto;
}
.formatter-hide .formatter-content {
height: 10px;
overflow: hidden;
visibility: hidden;
}
.formatter-show .formatter-content {
height: auto;
overflow: auto;
visibility: visible;
}
.formatter-hide .hide-message {
display: block;
font-style: italic;
font-weight: normal;
font-size: 0.8em;
color: #BBBBBB;
padding: 4px 8px;
width: 100%;
margin: -20px auto 0 auto;
background-color: #FDFDFD;
border: 1px solid #EEEEEE;
}
.formatter-show .hide-message {
display: none;
}
.copy-code {
float: right;
padding: 4px 4px;
color: #999999;
cursor: copy;
}

Le fichier form.css

- Remplacer le

display: inline-table;

par un

display: inline-block;

que vous trouverez vers la ligne 150, dans le déclaration suivante :

Code CSS :

.horizontal-fieldset-desc,
.horizontal-fieldset-element  {
display: inline-table;
vertical-align: middle;
}

-Ajouter à la suite du code ci-dessous le code suivant:

Code CSS :

.horizontal-fieldset-desc + .horizontal-fieldset-element {
max-width: 100%;
}

Le fichier content.css

Une partie du code a été transféré dans un nouveau fichier user.css contenu dans le répertoire user/templates.

Supprimer les codes suivants du fichier content.css :

Code CSS :

/* -- Profile User -- */
/* ------------------ */
ul#profile-container {
margin: 30px auto;
width: 99%;
list-style-type: none;
}
ul#profile-container li {
margin-right: 2px;
padding: 10px;
text-align: center;
}
.preview-img {
max-height: 180px;
vertical-align: top;
}
.user-agreement {
width: 90%;
max-width: none;
max-height: 250px;
overflow-y: auto !important;
}

Code CSS :

/* -- Contribution -- */ 
/* ------------------ */
#module-user-contribution-list hr {
margin: 20px 0;
}
.module-contribution-element {
float: left;
margin: 20px 0;
text-align: center;
}
.unprocessed-contribution {
margin: auto;
width: 300px;
overflow: hidden;
text-align: center;
}
.unprocessed-contribution div {
float: left;
width: 50%;
}
#module-user-moderation-panel .content {
padding-bottom: 75px;
}
#module-user-moderation-panel .bt td:before {
display: none;
}
#module-user-moderation-panel .bt-content {
display: block;
width: 100%;
text-align: center;
}
.contribution-module-container {
float: left;
margin: 20px 0;
text-align: center;
}
.convers-announce {
padding-right: 0;
}
.convers-title {
width: 50%;
text-align: left;
}
table.announce-legend td {
width: 33%;
}
@media (min-width: 769px) {
.post-pm {
margin: auto;
width: 80%;
}
}
.available-modules-msg {
margin-bottom: 15px;
text-align: center;
}

Code CSS :

/* -- Error 403/404 -- */ 
/* ------------------- */
#module-user-error-403 .content,
#module-user-error-404 .content {
text-align: center;
font-size: 1.5em;
}
#module-user-error-403 .fa-warning:before,
#module-user-error-404 .fa-warning:before {
content: "\f071"; 
}
#module-user-error-403 .fa-warning,
#module-user-error-404 .fa-warning {
display: block;
margin: 40px auto 20px auto;
color: #C19954;
}
#module-user-error-403 .message-error,
#module-user-error-404 .message-error {
padding: 20px 0;
}
#module-user-error-403 .type-error,
#module-user-error-404 .type-error {
padding: 10px 0;
}