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

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-dessous 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 les propriétés
.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)
[tableau à venir]
Cette page a été vue 568 fois