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

Dernière mise à jour : 13/01/2018 à 13h19

Table des matières

Avant de commencer
Le fichier de configuration
L'UTF8
1. L'encodage des fichiers
2. charset
Modifications HTML du template
1. Le fichier frame.tpl
2. Le fichier body.tpl
Modifications CSS du template
Les modifications HTML et CSS des modules

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

charset

Il faut changer le meta du fichier frame.tpl

Remplacer la ligne 5

<meta charset="windows-1252" />

par

<meta charset="UTF-8" />

.

Si la ligne ci-dessous existe, il faudra la supprimer :

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

Modifications HTML du template

Le fichier frame.tpl

viewport

Pour respecter le W3C, modifier le meta viewport en

<meta name="viewport" content="width=device-width, initial-scale=1.0">

La lightcase

Le CSS de la lightcase ayant été déplacé dans le noyau, il faut réaliser un appel du fichier lightcase.css.

- Ajouter /kernel/lib/js/lightcase/css/lightcase.css; juste après l'appel font-awesome.css; dans la partie CACHE

- Ajouter

<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/js/lightcase/css/lightcase.css" />

dans la partie sans CACHE.

Font Awesome Animation

Nous avons ajoute en complement de la librairie Font Awesome, le fichier CSS permettant plus d'animation FontAwesomeAnimation .

- Ajouter /kernel/lib/css/font-awesome-animation/css/font-awesome-animation.css; juste après l'appel font-awesome.css; dans la partie CACHE

- Ajouter

<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome-animation/css/font-awesome-animation.css" />

dans la partie sans CACHE.

Cela donne :

Code CSS :

# IF C_CSS_CACHE_ENABLED #
<link rel="stylesheet" href="${CSSCacheManager::get_css_path('/templates/default/theme/default.css;/kernel/lib/css/font-awesome/css/font-awesome.css;/kernel/lib/css/font-awesome-animation/css/font-awesome-animation.css;/kernel/lib/js/lightcase/css/lightcase.css;/templates/{THEME}/theme/design.css;/templates/{THEME}/theme/content.css;/templates/{THEME}/theme/table.css;/templates/{THEME}/theme/form.css;/templates/{THEME}/theme/global.css;/templates/{THEME}/theme/cssmenu.css')}" type="text/css" media="screen, print" />
# ELSE #
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome-animation/css/font-awesome-animation.css" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/js/lightcase/css/lightcase.css" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/table.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/form.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/cssmenu.css" type="text/css" media="screen" />
# ENDIF #

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 :

5.0

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 #

5.1

Code TPL :

# IF C_VISIT_COUNTER #
<div id="visit-counter" class="hidden-small-screens">
    <div class="visit-counter-total">
        <span class="text-strong">{L_VISIT} : </span>
        {VISIT_COUNTER_TOTAL}
    </div>
    <div class="visit-counter-today">
        <span class="text-strong">{L_TODAY} : </span>
        {VISIT_COUNTER_DAY}
    </div>
</div>
# ENDIF #

la position du compteur de visite

Le compteur se positionnant n'importe comment en mobile, nous avons ajusté 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>

Modifications CSS du template

Même si les modifications CSS sont mineures, 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

5.0

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

5.1

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

- Ajouter le code de la cookiebar :

Code CSS :

/* --   Cookie Bar  -- */ 
/* ------------------- */
.cookiebar-container {
    z-index: 100;
    left: 0;
    right: 0;
    top: 0;
    padding: 7px 20px;
    background-color: #F2F2F2;
    border-bottom: 1px solid #E2E2E2;
    font-size: 0.9em;
    text-align: center;
}
.cookiebar-container.fixed {
    position: fixed;
}
.cookiebar-content {
    text-align: justify;
}
@media (min-width: 769px) {
    .cookiebar-content {
        display: inline-block;
        max-width: calc(100% - 250px);
        vertical-align: middle;
    }
    .cookiebar-actions {
        display: inline-block;
        width: 250px;
    }
}
@media (max-width: 768px) {
    .cookiebar-content {
        margin-bottom: 5px;
    }
    .cookiebar-actions {
        margin: 15px 0 5px 0;
    }
}
.cookiebar-button {
    margin: 0 5px 0 5px;
    border-radius: 4px;
    color: #FEFEFE;
}
@media (max-width: 768px) {
    .cookiebar-button {
        margin: 0 10px 0 10px;
    }
}
.cookiebar-button-understand         { background-color: #337AB7; border-color: #2E6DA4; }
.cookiebar-button-understand:hover     { background-color: #2E6DA4; }
.cookiebar-button-allowed             { background-color: #5CB85C; border-color: #4CAE4C; }
.cookiebar-button-allowed:hover     { background-color: #4CAE4C; }
.cookiebar-button-declined             { background-color: #E84E40; border-color: #CE271A; }
.cookiebar-button-declined:hover     { background-color: #CE271A; }
@media (max-width: 468px) {
    .cookiebar-more {
        display: block;
        margin: 10px 0 5px 0;
    }
}
.aboutcookie-title {
    font-size: 1.3em;
    line-height: 1.3em;
    font-weight: bold
}
.aboutcookie-title + p {
    margin: 0px 0 20px 0px;
}
footer#cookiebar-change-choice {
    margin-top: 10px;
    text-align: center;
}
.cookiebar-change-choice-link {
    text-align: center;
}

Le fichier global.css

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

5.0

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

5.1

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;
    background-color: #FAFAFA;
    border: 1px solid #DDDDDD;
}
.formatter-hide .formatter-content {
    height: 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    transform: scaleY(0);
    transition: transform 0.15s linear;
    transform-origin: 50% 0;
}
.formatter-show .formatter-content,
.formatter-hide.no-js:hover .formatter-content {
    height: auto;
    max-height: 500px;
    padding: 8px;
    overflow: auto;
    visibility: visible;
    transform: scaleY(1);
}
.formatter-hide .formatter-hide-message {
    display: block;
    font-style: italic;
    font-weight: normal;
    font-size: 0.8em;
    color: #BBBBBB;
    padding: 4px 8px;
    width: 100%;
    margin: 0 auto 0 auto;
    background-color: #FDFDFD;
    border: 1px solid #EEEEEE;
    cursor: pointer;
}
.formatter-show .formatter-hide-message {
    display: none;
}
.formatter-hide-close-button {
    position: absolute;
    display: none;
    top: 2em;
    right: 0;
    color: #BBBBBB;
    font-size: 0.8em;
    font-style: italic;
    cursor: pointer;
    transition: all 0.3s linear;
}
.formatter-hide-close-button-txt {
    padding: 0 0 0 3px;
}
.formatter-show .formatter-hide-close-button {
    display: block;
}
.formatter-hide-close-button:hover {
    color: #444444;
    transition: all 0.3s linear;
}
.formatter-code .formatter-title {
    margin: 1rem 0 0.5rem 0;
}
.formatter-code .formatter-content {
    overflow: auto;
    max-height: 500px;
}
.copy-code {
    float: right;
    padding: 1.2rem 0.5rem 0 0;
    color: #BBBBBB;
    font-size: 0.8em;
    font-style: italic;
    cursor: copy;
    transition: all 0.3s linear;
}
.copy-code-txt {
    padding: 0 0 0 3px;
}

- Il est nécessaire de compléter la partie "Les messages d erreurs" pour inclure les nouvelles balises.

5.0	Code CSS : .error, .notice, .warning, .success, .question
5.1	Code CSS : .error, .notice, .warning, .success, .question, .message-helper
5.0	Code CSS : .error:before, .notice:before, .warning:before, .success:before, .question:before
5.1	Code CSS : .error:before, .notice:before, .warning:before, .success:before, .question:before, .message-helper:before
5.0	Code CSS : .error:before, .notice:before, .warning:before, .success:before, .question:before
5.1	Code CSS : .error:before, .notice:before, .warning:before, .success:before, .question:before, .message-helper:before

Ajouter à la suite les élements suivant :

global.css :

.message-helper-small {
    width: 50%;
}

global.css :

.member-only:before { content: "\f071"; }
.modo-only:before   { content: "\f071"; }
.admin-only:before  { content: "\f071"; }

global.css :

.member-only, .member-only:before   { color: #C19954; }
.modo-only, .modo-only:before       { color: #C19954; }
.admin-only, .admin-only:before     { color: #C19954; }

global.css :

.member-only  { background-color: #FDF9E4; border-color: #FBECCD; }
.modo-only    { background-color: #FDF9E4; border-color: #FBECCD; }
.admin-only   { background-color: #FDF9E4; border-color: #FBECCD; }

- La partie upload évolue pour plus de personnalisation

5.0

Code CSS :

.upload-elements-container {
    margin: 10px 0 0 20px;
    overflow: hidden;
}
.upload-elements-file,
.upload-elements-repertory {
    float: left;
    margin: 10px;
}
.upload-elements-repertory {
    height: 60px;
}
a.upload-recent-file {
    color: #BA4B49;
}

5.1

Code CSS :

.upload-elements-container {
    margin: 10px 0 0 20px;
    overflow: hidden;
    text-align: left;
}
.upload-elements-file,
.upload-elements-repertory {
    display: inline-block;
    vertical-align: top;
    margin: 10px;
}
.upload-elements-repertory {
    line-height: 50px;
    width: 180px;
    text-align: center;
    border: 1px solid #366493;
    background-color: #aec7e1;
}
.upload-repertory-controls {
    font-size: 0;
}
.upload-repertory-controls span {
    font-size: 1.6rem;
    width: calc(100% / 3);
    display: inline-block;
}
.upload-elements-file {
    width: 180px;
}
.upload-elements-file input {
    width: 100%;
}
.upload-element-name {
    width: 100%;
    text-align: center;
}
.upload-element-picture {
    width: 100%;
    height: 100px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.upload-element-icon {
    width: 100%;
    line-height: 100px;
    text-align: center;
    border: 1px solid #d9d9d9;
}
.upload-file-controls {
    font-size: 0;
}
.upload-file-controls a {
    font-size: 1.6rem;
    width: calc(100% / 4);
    display: inline-block;
    text-align: center;
    padding: 3px 0;
}
.upload-recent-file {
    color: #BA4B49;
}

Le fichier form.css

- Remplacer le

display: inline-table;

par un

display: inline-block;

dans la déclaration suivante :

Code CSS :

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

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

Code CSS :

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

- Modifier le code du preview

5.0

Code CSS :

.form-element-preview {
    margin: 5px auto 0 auto;
    text-align: center;
}

5.1

Code CSS :

.form-element-preview, .form-element-reset {
    margin: 5px auto 0 auto;
    text-align: center;
    display: inline;
}

- Modifier le

width: 144px;

width: auto;

pour les propriétés

.advanced-auth-input

- Modifier le

right: -10px;

right: -16px;

pour la propriété

.form-field-radio-button.field-required:after, .form-field-multiple-checkbox.field-required:after

- Ajouter le code suivant pour permettre l'affichage des lines sur les textarea :

Code CSS :

 
/* --- Lined textarea --- */
.linedwrap {
    max-width: 100%;
}
.linedtextarea {
    display: inline-block;
    margin: 0;
    padding: 0 0 0 10px;
    width: calc(100% - 60px);
    height: 100%;
    background-color: #FFFFFF;
}
.linedtextarea textarea,
.linedwrap .codelines .lineno {
    font-size: 10pt;
    font-family: monospace;
    line-height: normal !important;
}
.linedtextarea textarea {
    margin: 0;
    padding: 5px 0 0 0;
    width: 100% !important;
    height: 100%;
    border: 0;
}
.linedwrap .lines {
    display: inline-block;
    overflow: hidden;
    margin-top: 0;
    padding: 5px 0 0 0;
    width: 50px;
    height: 100%;
    background-color: #FFFFFF;
    border-right: 1px solid #C0C0C0;
}
.linedwrap .codelines .lineno {
    padding: 0.0em 0.5em 0 0;
    text-align: right;
    color: #AAAAAA;
    white-space: nowrap;
}
.linedwrap .codelines .lineselect {
    color: red;
}

Le fichier content.css

Une partie du code a été transférée 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;
}

- Modifier les appels

section header h1 a:hover

section header a:hover

- La partie "block" a été revue pour intégrer les flexbox. L'utilisation et la personnalisation devient beaucoup plus simple.

5.0

Code CSS :

.block,
.medium-block,
.small-block {
    padding: 0.8em;
    background-color: #F2F8FF;
    border-style: solid;
    border-width: 2px 1px 1px 1px;
    border-color: #366393 #CCCCCC #99B1CB #CCCCCC;
}
.block .content,
.medium-block .content,
.small-block .content {
    margin: 0;
}
.block h1,
.medium-block h1,
.small-block h1 {
    border: none;
}
.block {
    width: auto;
}
.block header {
    margin: 0 0 1% 0;
}
.block footer {
    margin: 0;
}
.medium-block,
.small-block {
    float: left;
    margin: 1% 0.5%;
}
/* ---- Affiche 2 blocs côte a côte ---- */
.medium-block {
    width: 49.00%;
}
/* ---- Affiche 3 blocs côte a côte ---- */
.small-block {
    width: 32.33%;
}
/* ---- Affiche des blocs en vertical ---- */
@media (max-width: 480px) {
    .small-block,
    .medium-block {
        width: 100%;
        margin: 1% 0%;
    }
}
@media (max-width: 768px) {
    .block {
        width: 100%;
        margin: 1em 0;
    }
}

5.1

Code CSS :

.block {
    padding: 0.8em;
    background-color: #FBFDFF;
    border-style: solid;
    border-width: 2px 1px 1px 1px;
    border-color: #366493 #F1F1F1 #F1F1F1 #F1F1F1;
}
.no-style .block {
    background-color: transparent!important;
    border: none!important;
}
.block .content {
    margin: 0;
}
.block h1 {
    border: none;
}
.block header {
    margin: 0 0 1% 0;
}
.block footer {
    margin: 0;
}
.elements-container {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}
.elements-container > .block {
    flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}
/* Gestion en colonnes pour ecran large*/
@media (min-width: 769px) {
    .elements-container {
        flex-direction: row;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        margin-left: -5px; /* @{gutter} */ 
    }
    .block { 
        margin-left: 5px; /* @{gutter} */ 
        width: 100%;
    } 
 
    .columns-2 .block { width: calc(100% / 2 - 5px); } /* calc(100% / @{number} - @{gutter}); */ 
    .columns-3 .block { width: calc(100% / 3 - 5px); }
    .columns-4 .block { width: calc(100% / 4 - 5px); }
    .columns-5 .block { width: calc(100% / 5 - 5px); }
    .columns-6 .block { width: calc(100% / 6 - 5px); }
    .columns-7 .block { width: calc(100% / 7 - 5px); }
 
    .block-xlarge { width: 100%!important; } /* Extension du bloc sur une ligne complète */
}
/* Gestion en ligne pour petit ecran */
@media (max-width: 768px) {
    .block {
        margin-bottom: 5px;
        width: 100%;
    }    
}

- L'affichage des catégories utilise aussi les flexbox

5.0

Code CSS :

.cat-description {
    margin: 10px 5px;
}
.subcat-container {
    margin: 10px 0 5px 0;
    font-size: 0;
}
.subcat-element {
    margin-bottom: 20px;
    font-size: 13px;
    display: inline-block;
    text-align: center;
}
@media (max-width: 540px){
    .subcat-element {
        width: 50% !important;
    }
}
@media (max-width: 360px){
    .subcat-element {
        width: 100% !important;
    }
}
.subcat-content {
    margin: auto;
    padding: 0 5px;
}
.subcat-content img {
    margin-bottom: 10px;
}

5.1

Code CSS :

.cat-description {
    margin: 10px 5px;
}
.subcat-container {
    margin: 10px 0 5px 0;
    font-size: 0;
}
.subcat-element {
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    border: none;
    background-color: transparent;
}
.subcat-content {
    margin: auto;
    padding: 0 5px;
}
.subcat-content img {
    margin-bottom: 10px;
}

- la partie suivante peut être supprimée

Code CSS :

 
/* --- articles --- */
.article-several.block,
.article-several.small-block,
.article-several.medium-block {
    clear: none!important;
}
.article-several {
    clear: both;
}

- Ajouter les classes friends

Code CSS :

/* ---- Friends content ---- */
.content-friends {
    border-width: 7px 1px 1px 1px;
    border-top-color: #103B67;
}
.content-privileged-friends {
    border-width: 7px 1px 1px 1px;
    border-top-color: #E2BE47;
}

- Le design du système de drag&drop a été épuré. Vous pouvez le remplacer par le code suivant si vous le désirez :

5.0

Code CSS :

/* --- Systeme de drag&Drop --- */
.sortable-block .sortable-element > .sortable-block {
    margin-left: 30px;
}
.sortable-block {
    margin: 0;
    padding: 0;
    min-height: 24px;
    list-style-type: none;
    list-style-position: outside;
}
.sortable-block .sortable-element {
    display: table;
    margin-bottom: 6px;
    padding: 0;
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #D6DEE7;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s;    
}
.sortable-block .sortable-element:hover {
    border: 1px solid #d0d8e1;
    box-shadow: 0 0 5px #EAEAEA;
}
@media (min-width:769px){ 
    .sortable-block .sortable-element .sortable-selector {
        display: table-cell;
        position: relative;
        width: 20px;
        opacity: 0.3;
        background-color: #81A4C8;
        transition: opacity 1s;
        cursor: move;
    }
 
    .sortable-selector:after {
        position: absolute;
        content: "\f047";
        top: 34%;
        left: 4px;
        color: #FFFFFF;
        font-family: fontawesome;
    }
}
.sortable-block .sortable-element:hover .sortable-actions {
    opacity: 1;
}
.sortable-block .sortable-element:hover .sortable-selector {
    opacity: 0.6;
}
.sortable-block .sortable-title {
    padding: 8px 5px 5px 10px;
    background-image: linear-gradient(to bottom, #FFFFFF 50%, #FAFAFA 100%);
}
.sortable-block .sortable-title:hover {
    background-image: linear-gradient(to bottom, #FFFFFF 25%, #F2F5F8 100%);
}
.sortable-block .sortable-title > span {
    font-size: 1.5em;
    font-weight: bold;
}
.sortable-block .sortable-title span.cat-desc {
    font-size: 0.8em;
    font-weight: normal;
    font-style: italic;
}
.sortable-block .sortable-title img {
    cursor: move;
}
.sortable-block fieldset {
    padding: 0 30px;
}
.sortable-block .sortable-actions {
    float: right;
    padding: 3px 3px;
    opacity: 0.5;
    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;
    border-radius: 5px;
    text-align: center;
    color: #AAAAAA;
}
.preview img {
    overflow: hidden;
}

5.1

Code CSS :

/* --- Systeme de drag&Drop --- */
.sortable-block .sortable-element > .sortable-block {
    margin-left: 30px;
}
.sortable-block {
    margin: 0;
    padding: 0;
    min-height: 24px;
    list-style-type: none;
    list-style-position: outside;
    color: #777777;
}
.sortable-block .sortable-element {
    display: table;
    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 {
        display: table-cell;
        position: relative;
        width: 20px;
        opacity: 0.2;
        transition: opacity 0.3s;
        cursor: move;
    }
 
    .sortable-selector:after {
        position: absolute;
        content: "\f047";
        top: 34%;
        left: 4px;
        color: #517BA6;
        font-family: fontawesome;
    }
}
.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 {
    padding: 8px 5px 5px 10px;
}
.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 .sortable-title img {
    cursor: move;
}
.sortable-block fieldset {
    padding: 0 30px;
}
.sortable-block .sortable-actions {
    float: right;
    padding: 3px 3px;
    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;
}

- Pour des raisons d'accessibilités, nous avons supprimé le h5 du container module-mini-top.

remplacer

.module-mini-container h5

par

.module-mini-container .sub-title

Vu que l'on perd quelques informations associé au h5, il faut completer les propriétés :

Code CSS :

.module-mini-container .sub-title {
    display: block;
    margin-top: 5px;
    color: #366493;
    font-size: 1.6rem;
    font-weight: bold;
}

Afin de coller la cookie-bar en haut de la page sur le menu de connexion, ajouter à la fin du fichier le code suivant :



.cookiebar-container {

    position: fixed;

}

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)

Module articles

Nom du fichier	Url Diffchecker
articles.css	https://www.diffchecker.com/JWdkDWDk
ArticlesDisplayArticlesController.tpl	https://www.diffchecker.com/PptRfLVR
ArticlesDisplaySeveralArticlesController.tpl	https://www.diffchecker.com/ugTRQT1M
ArticlesFormFieldSelectSources.tpl	https://www.diffchecker.com/UL1Eeyc9

Module BBCode

Nom du fichier	Url Diffchecker
bbcode.css	https://www.diffchecker.com/nQVeWQAH
bbcode_editor.tpl	https://www.diffchecker.com/aHdeMT0G

Module bugtracker

Nom du fichier	Url Diffchecker
bugtracker.css	https://www.diffchecker.com/51sHZ0Jm
BugtrackerDetailController.tpl	https://www.diffchecker.com/QkKDNtF7
BugtrackerFilter.tpl	https://www.diffchecker.com/hBn3DBvy
BugtrackerHistoryListController.tpl	https://www.diffchecker.com/IlG4gJMc
BugtrackerListController.tpl	https://www.diffchecker.com/uw2xZ9oz
BugtrackerRoadmapListController.tpl	https://www.diffchecker.com/xp1RQKWV

Module calendar

Nom du fichier	Url Diffchecker
calendar.css	https://www.diffchecker.com/jZmKMeor
CalendarAjaxEventsController.tpl	https://www.diffchecker.com/KShxshNG
CalendarDisplayEventController.tpl	https://www.diffchecker.com/2uOzhuel

Module connect

Nom du fichier	Url Diffchecker
connect_mini.css	https://www.diffchecker.com/MDF9lHhb
connect_mini.tpl	https://www.diffchecker.com/06DFc94E

Module contact

Nom du fichier	Url Diffchecker
contact.css	https://www.diffchecker.com/vttx0Exf
ContactController.tpl	https://www.diffchecker.com/fZmYBwbg
ContactFormFieldObjectPossibleValues.tpl	https://www.diffchecker.com/2YJS170Z
ContactFormFieldRecipientsPossibleValues.tpl	https://www.diffchecker.com/xYSPWDNO

Module download

Nom du fichier	Url Diffchecker
download.css	https://www.diffchecker.com/nEQmbURr
DownloadDisplayDownloadFileController.tpl	https://www.diffchecker.com/dmZPCfQa
DownloadDisplaySeveralDownloadFilesController.tpl	https://www.diffchecker.com/e9oqDPQw
DownloadModuleMiniMenu.tpl	https://www.diffchecker.com/0REojulo

Module faq

Nom du fichier	Url Diffchecker
faq.css	https://www.diffchecker.com/WyFYMrlG
FaqDisplaySeveralFaqQuestionsController.tpl	https://www.diffchecker.com/gMo1ZwX3
FaqModuleMiniMenu.tpl	https://www.diffchecker.com/9ggyOHOb

Module forum

Nom du fichier	Url Diffchecker
forum.css	https://www.diffchecker.com/oL0x5T90
forum_bottom.tpl	https://www.diffchecker.com/jFBnAvgG
forum_edit_msg.tpl	https://www.diffchecker.com/yOKnNyFW
forum_forum.tpl	https://www.diffchecker.com/fitGH8RM
forum_index.tpl	https://www.diffchecker.com/eWbV8oDK
forum_membermsg.tpl	https://www.diffchecker.com/FI3C3KI5
forum_moderation_panel.tpl	https://www.diffchecker.com/iK5tAwrS
forum_post.tpl	https://www.diffchecker.com/PQLuWUUq
forum_top.tpl	https://www.diffchecker.com/DbTiCbsE
forum_topic.tpl	https://www.diffchecker.com/E0tpAmKO
forum_track.tpl	https://www.diffchecker.com/X1DUIfrN

Module gallery

Nom du fichier	Url Diffchecker
gallery.tpl	https://www.diffchecker.com/8ddCXfEO
gallery_add.tpl	https://www.diffchecker.com/OgEzYJTy
gallery_mini.tpl	https://www.diffchecker.com/Q8bn1DOl

Module LangsSwitcher

Nom du fichier	Url Diffchecker
langsswitcher.css	https://www.diffchecker.com/1PHdhV77
langswitcher.tpl	https://www.diffchecker.com/wjVZyTyj

Module media

Nom du fichier	Url Diffchecker
media.css	https://www.diffchecker.com/l4uRPAf9
media.tpl	https://www.diffchecker.com/C6JLlaZn
media_action.tpl	https://www.diffchecker.com/2odHUqKN

Module news

Nom du fichier	Url Diffchecker
news.css	https://www.diffchecker.com/0Kjaruat
NewsDisplayNewsController.tpl	https://www.diffchecker.com/uSsdexLx
NewsDisplaySeveralNewsController.tpl	https://www.diffchecker.com/UYuy0qLt
NewsFormFieldSelectSources.tpl	https://www.diffchecker.com/7g44yvjt

Nom du fichier	Url Diffchecker
newsletter_mini.css	https://www.diffchecker.com/CrUnXLYT

Module online

Nom du fichier	Url Diffchecker
OnlineHomeController.tpl	https://www.diffchecker.com/l8l3EU0x
OnlineModuleMiniMenu.tpl	https://www.diffchecker.com/I4CPYqon

Module pages

Nom du fichier	Url Diffchecker
action.tpl	https://www.diffchecker.com/XeqZyhBY
explorer.tpl	https://www.diffchecker.com/1eT5vRIf
index.tpl	https://www.diffchecker.com/grVrcLYv
pages.css	https://www.diffchecker.com/MhSo5q6t
post.tpl	https://www.diffchecker.com/qsyHiqJu

Module poll

Nom du fichier	Url Diffchecker
poll.css	https://www.diffchecker.com/OvkSiLHV
poll.tpl	https://www.diffchecker.com/8RbMy10H
poll_mini.tpl	https://www.diffchecker.com/BcIdUNVl

Module QuestionCaptcha

Nom du fichier	Url Diffchecker
QuestionCaptchaFormFieldQuestions.tpl	https://www.diffchecker.com/KKr2sJec

Module ReCaptcha

Nom du fichier	Url Diffchecker
ReCaptcha.tpl	https://www.diffchecker.com/jzfLofOV

Module sandbox

Nom du fichier	Url Diffchecker
SandboxFormController.tpl	https://www.diffchecker.com/avqzdGe6
SandboxGraphicsCSSController.tpl	https://www.diffchecker.com/c2ID5Dt4
SandboxHomeController.tpl	https://www.diffchecker.com/YRLshEql
SandboxIconsController.tpl	https://www.diffchecker.com/xV8uMsIK
SandboxMailController.tpl	https://www.diffchecker.com/pJ4792mj
SandboxMenuController.tpl	https://www.diffchecker.com/72xhsFYG

Module search

Nom du fichier	Url Diffchecker
search.css	https://www.diffchecker.com/LHH1fRDr
search_forms.tpl	https://www.diffchecker.com/nTLc5OZd
search_mini.css	https://www.diffchecker.com/B14372T8
search_mini.tpl	https://www.diffchecker.com/zyACpxO4
search_results.tpl	https://www.diffchecker.com/5ZwV4Ogo

Module shoutbox

Nom du fichier	Url Diffchecker
shoutbox_mini.css	https://www.diffchecker.com/ggbo0kUn
ShoutboxAjaxMessagesBoxController.tpl	https://www.diffchecker.com/iEbSOAp8
ShoutboxHomeController.tpl	https://www.diffchecker.com/eAFudNj1
ShoutboxModuleMiniMenu.tpl	https://www.diffchecker.com/gcidNsEO

Module sitemap

Nom du fichier	Url Diffchecker
sitemap.xml.tpl	https://www.diffchecker.com/jpZ9pGlz

Module stats

Nom du fichier	Url Diffchecker
stats.css	https://www.diffchecker.com/375AASJP
stats.tpl	https://www.diffchecker.com/yUL8XRSU
stats_mini.tpl	https://www.diffchecker.com/27U6dlZq

Module ThemesSwitcher

Nom du fichier	Url Diffchecker
themeswitcher.tpl	https://www.diffchecker.com/jTObnxr9

Module TinyMCE

Nom du fichier	Url Diffchecker
tinymce_editor.tpl	https://www.diffchecker.com/w4b8JD6T

Module user

Nom du fichier	Url Diffchecker
moderation_panel.tpl	https://www.diffchecker.com/aoOe2zT0
pm.tpl	https://www.diffchecker.com/yjCS2wfT
upload.tpl	https://www.diffchecker.com/MlbMJyJF
upload_move.tpl	https://www.diffchecker.com/oEF9giY7
UserExploreGroupsController.tpl	https://www.diffchecker.com/Emqv5HWh
UserHomeProfileController.tpl	https://www.diffchecker.com/Rp2Gk7oh
UserUsersListController.tpl	https://www.diffchecker.com/SKk6Y0Ll

Module web

Nom du fichier	Url Diffchecker
web.css	https://www.diffchecker.com/8II3WKgQ
web_mini.css	https://www.diffchecker.com/2WhcCDOW
WebDisplaySeveralWebLinksController.tpl	https://www.diffchecker.com/lK6YFShQ
WebDisplayWebLinkController.tpl	https://www.diffchecker.com/xeRhjapp
WebModuleMiniMenu.tpl	https://www.diffchecker.com/6QWc4LyN

Module wiki

Nom du fichier	Url Diffchecker
explorer.tpl	https://www.diffchecker.com/XPlILSnW
index.tpl	https://www.diffchecker.com/fv3i03qK
post.tpl	https://www.diffchecker.com/h2YU2hH4
property.tpl	https://www.diffchecker.com/X9tbseFZ
wiki.css	https://www.diffchecker.com/wLpPmwfz
wiki.tpl	https://www.diffchecker.com/jxitHrjv

Avant de commencer

Le fichier de configuration

L'UTF8

L'encodage des fichiers

charset

Modifications HTML du template

Le fichier frame.tpl

viewport

La lightcase

Font Awesome Animation

Le fichier body.tpl

Le code du compteur de visite

la position du compteur de visite

Le code HTML du scroll to top

Modifications CSS du template

Le fichier design.css

Le fichier global.css

Le fichier form.css

Le fichier content.css

Le fichier login.css

Les modifications HTML et CSS des modules

Module articles

Module BBCode

Module bugtracker

Module calendar

Module connect

Module contact

Module download

Module faq

Module forum

Module gallery

Module LangsSwitcher

Module media

Module news

Module newsletter

Module online

Module pages

Module poll

Module QuestionCaptcha

Module ReCaptcha

Module sandbox

Module search

Module shoutbox

Module sitemap

Module stats

Module ThemesSwitcher

Module TinyMCE

Module user

Module web

Module wiki