Dernière mise à jour : 13/01/2018 à 13h19
Table des matières
- Avant de commencer
- Le fichier de configuration
- L'UTF8
- Modifications HTML du template
- Modifications CSS du template
- 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
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.
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"
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 | |
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 : 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 |
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 |
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 |
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 |