Mettre à jour son thème 5.0 en 5.1

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



Le fichier login.css


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




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



Module newsletter


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




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

Cette page a été vue 1217 fois