Wiki

Personnaliser un thème

Sat, 25 Jan 2020 10:06:17 +0100

Introduction

Les articles de ce didacticiel ont pour but de vous aider à créer un thème à partir d'un thème déjà existant.
Vous apprendrez à maîtriser l'architecture d'un thème PHPBoost afin d'en réaliser un à votre image, à vos goûts, et avant tout un thème dédié à votre projet.

Ce didacticiel s'appuiera donc sur le thème Base fourni avec le CMS, créé sans fioriture et répertoriant la totalité des éléments nécessaires à l'élaboration un thème pour PHPBoost.

Faut-il des connaissances particulières ?

La mise en forme de pages web utilise les langages Javascript, HTML et CSS. Avec PHPBoost, seules des connaissances en CSS sont nécessaires pour débuter la réalisation d'un thème. Les langages Javascript et HTML vous seront utiles pour une réalisation plus élaborée.

Le langage CSS est très intuitif, rapidement assimilable avec quelques notions d'anglais, et très fourni en didacticiels d'apprentissage sur la toile. Vous trouverez la liste des propriétés CSS et la possibilité de les tester sur le site w3school.com. Si vous avez compris ces notions, avec un peu de bon sens et de volonté, c'est à la portée de tout le monde.

Pour en savoir plus sur l'apprentissage des bases de ces différents langages, nous vous invitons à lire ce didacticiel mis à jour régulièrement, sur le site OpenClassrooms (inscription gratuite nécessaire pour suivre le didacticiel).

Recommandations

Afin de travailler sans pour autant empêcher l'accès à votre site, nous vous recommandons de modifier votre thème en local.
Cela vous permettra également d'éditer rapidement vos fichiers et d'avoir un rendu direct sans nécessité de les transférer via FTP.
Chaque développeurs possède sa propre façon de coder. Lorsque l'on travaille en équipe il est important d'avoir une base commune. Vous trouverez dans l'article Conventions HTML et CSS notre façon d'écrire le code CSS.

La structure des thèmes

Avant de faire des modifications, il est important de comprendre la façon dont est organisé un thème. Nous vous invitons à lire l'article Structure des thèmes. Chaque répertoires et chaque fichiers sont détaillés.

Personnaliser un thème

La personnalisation graphique d'un thème passe par 3 étapes :

La personnalisation des fichiers CSS

Pour rappel, le code CSS correspond au style que l'on applique sur des éléments du code HTML. Le code CSS de PHPBoost est contenu dans les fichiers .css . Certains éléments peuvent encore être contenu dans des fichiers .tpl, mais nous avons essayé de les supprimer au maximum pour faciliter la mise à jour graphique.
L'article Personnalisation du code CSS contient toutes les infos dont vous pourriez avoir besoin.

La personnalisation des fichiers HTML

Le code HTML de PHPBoost est contenu dans les fichiers .tpl. Chaque module contient ces propres fichiers personnalisables.
L'article Personnalisation des modules ou de framework vous aidera à la personnalisation et à la modification du code afin d'organiser le site web comme vous le souhaitez.

La personnalisation des fichiers images

Dans certains cas, vous pouvez être amené à modifier certaines images afin d'apporter une touche personnelle.

Finaliser son thème

Maintenant que vous avez modifié votre thème pour qu'il soit à l'image de votre site web, nous pouvons passer à la dernière étape.
Il faut maintenant préparer votre thème à l'exportation. L'article Finalisation du thème vous présente quelques conseils afin de pouvoir partager votre création.

Personnalisation des modules ou de framework

Sat, 25 Jan 2020 08:18:06 +0100

Nous verrons ici comment modifier les templates et CSS d'un module, du panneau d'administration ou du framework sur un thème en particulier.

Comment ça marche ?

Lors de l'affichage d'une page, le framework de PHPBoost teste dans un premier temps la présence des fichiers .tpl et .css nécessaires, dans le dossier du thème actuel.

Si ces fichiers ne sont pas présents, il va ensuite les chercher dans leurs dossiers d'origine.

Ainsi, tout fichier copié dans le dossier de votre thème sera utilisé à la place du fichier d'origine.

Que peut-on modifier ?

Avec cette méthode, il est possible de modifier absolument tous les templates.

Cela comprend donc :

Les modules
Le framework
L'administration

C'est ce que nous détaillerons dans la suite de cet article.

Les templates

L'arborescence est la seule contrainte à respecter. Ne vous inquiétez pas, elle est très simple.

Elle diffère légèrement selon le type de templates à modifier :

Les modules

Les fichiers relatifs aux modules se trouvent à la racine de PHPBoost, dans le dossier nomdumodule/templates.

Si vous souhaitez modifier un template de module, il faut à la racine de votre thème créer un dossier appelé 'modules' s'il n'existe pas encore.

Dans le dossier précédemment créé, il suffit de créer un nouveau dossier portant le nom du module dont vous souhaitez modifier les templates.

Ce qui nous donne par exemple : monthème/modules/forum/

Dans ce nouveau dossier,il suffit de copier les fichiers TPL que vous avez besoin.

Le framework

Le framework est en fait le noyau de PHPBoost autour duquel les modules sont rattachés. Ainsi, il y a de nombreuses fonctionnalités qui font partie du framework, telles que les menus, les commentaires etc.

Les templates du framework se trouvent dans le dossier templates/default/framework.

Pour personnaliser un de ces éléments, il faut au préalable créer un dossier nommé /default/framework dans le dossier de votre thème.

Il suffit ensuite de copier les éléments souhaités dans ce nouveau dossier, en respectant l'arborescence d'origine.

Par exemple : templates/mon_theme/default/framework/menus/feed/feed.tpl

L'administration

Le panneau d'administration est aussi géré par le même système. Ainsi, il est tout à fait possible de redessiner complètement l'architecture de cette partie du site.

Les templates de l'administration se trouvent dans le dossier templates/default/admin.

Pour personnaliser un de ces éléments, il faut au préalable créer un dossier nommé /default/admin dans le dossier de votre thème.

Il suffit ensuite de copier les éléments souhaités dans ce nouveau dossier, en respectant l'arborescence d'origine.

Par exemple : templates/mon_theme/default/admin/updates/detail.tpl

Les CSS

Nous avons vu jusqu'à présent qu'il était possible de modifier les fichiers TPL en les mettant dans les dossiers de votre thème.

Mais vous pouvez également modifier les fichiers CSS se trouvant dans les modules.

Les fichiers de styles des modules sont positionnés dans le dossier nomdumodule/templates.

Il suffit ensuite de faire un copier/coller du fichier CSS afin d'en faire une copie dans le dossier monthème/modules/nomdumodule/.

Il est alors possible de modifier tous les styles de vos modules, afin qu'aucun élément ne fasse 'dépareillé'.

NB : Dans certains modules, les images sont appelées par le CSS, comme le module 'forum'. Si vous choisissez de modifier le CSS du module, le chemin indiqué dans le fichier de style ne sera plus bon. Il faudra alors copier l'intégralité du dossier images contenu dans le module ou redéfinir chaque URL du CSS.

Variables de Date

Tue, 14 Nov 2017 06:24:12 +0100

Plusieurs formats de date s'offrent à vous pour les déclarer dans votre thème.

Pour cela, il suffit de connaitre le ou les préfixes déclarés dans le module dont vous personnalisez l'interface.

Par exemple, pour le module News vous trouverez ces préfixes dans

/news/services/News.class.php

dans la déclaration des variables de template (vers la ligne 430). Pour ce cas, vous disposez de 2 préfixes, date (

Date::get_array_tpl_vars($this->creation_date,'date')

), qui représente la date de création de la news, et differed_start_date (

Date::get_array_tpl_vars($this->start_date,'differed_start_date')

), qui est la date de parution de la news si vous choisissez une parution différée.

Il ne reste plus alors qu'à choisir le type de format que vous souhaitez comme suit : {DATE_format} et {DIFFERED_START_DATE_format}

Liste des formats disponibles:

Format	Affichage
DATE	31/10/2017
DATE_TIMESTAMP	1509447707
DATE_SHORT	31/10/2017
DATE_SHORT_TEXT	Mardi 31 Octobre 2017
DATE_FULL	31/10/2017 à 12h01
DATE_DAY	31
DATE_DAY_TEXT	Mar
DATE_DAY_FULLTEXT	Mardi
DATE_WEEK	44
DATE_MONTH	10
DATE_MONTH_TEXT	Oct
DATE_MONTH_FULLTEXT	Octobre
DATE_YEAR	2017
DATE_DAY_MONTH	31/10
DATE_HOUR	12
DATE_MINUTE	01
DATE_ISO8601	2017-10-31T12:01:47+01:00
DATE_DIFF_NOW	il y a 16 heures
DATE_RELATIVE	16 heures

On peut ainsi combiner plusieurs formats pour un affichage particulier:
{DATE_DAY_TEXT} {DATE_DAY} {DATE_MONTH_TEXT} {DATE_YEAR} affichera Mar 31 Oct 2017

Finalisation du thème

Wed, 15 Jun 2016 20:47:56 +0200

Les images de prévisualisation

Afin de reconnaître votre thème parmi les autres, nous utilisons de petites images appeler Screen ou images de prévisualisation.

Elles constituent la première impression que l'utilisateur aura de votre thème. Vous pouvez en créer autant que vous le souhaitez (restez raisonnable ) et placez-les ensuite dans le dossier de votre thème.

Recommandations :

Les images doivent faire 1024 pixels de large afin de pouvoir être visualisées sous la plupart des résolutions.
Rien ne sert de mettre une multitude d'images : elles alourdissent le thème et sont parfois répétitives.
Même si la qualité est moindre, préférez le format .JPG plutôt que le .PNG, qui a une taille bien plus importante en général.

Le fichier de configuration d'un thème

Le fichier config.ini donne des informations sur le thème et permet de lui attribuer une configuration par défaut à son installation.

Cet article détaille ligne par ligne le contenu du fichier config.ini, situé à la racine de votre thème.

Le nom de votre thème

Avant de nommer votre thème, il est préférable de vérifier que le nom n'est pas déjà utilisé.

Cherchez un peu dans les téléchargements avant de proposer un thème dont le nom est déjà pris, sous peine d'empêcher certains membres à ne pas pouvoir utiliser le votre.

Pour modifier le nom et la description du thème, il est important de le faire dans le répertoire lang. Si votre thème est multilingue, il faudra le faire dans chaque langue. Il suffit de modifier le fichier desc.ini du répertoire langue. Vous trouverez un exemple dans l'article "la structure d'un thème".

Faire le ménage

Il arrive parfois que votre thème soit très lourd. Avec l'intégration de Font-Awesome, nous avons pu réduire la taille d'un thème à moins de 300 ko.

Si votre thème dépasse plusieurs Mo, il est préférable de vérifier si vous ne pouvez pas l’alléger. Un thème lourd, est un thème qui se charge lentement.

Si vous avez des fichiers sources (.psd par exemple), il est préférable de les distribuer en parallèle pour ne pas alourdir le fichier zip.

Pour les utilisateurs de Windows un fichier thumbs.db est généralement crée automatique lorsque vous naviguez dans un dossier d'images en vue 'Miniatures'. Ce fichier est inutile, vous pouvez donc le supprimer de votre thème sans crainte (Ce fichier peut atteindre parfois plusieurs centaines de Ko).

L'archivage

Le thème est maintenant entièrement finalisé. Il est nécessaire de l'archiver en un unique fichier pour le partager.

Préférer l'archive classique .zip qui est lisible par la plupart des systèmes sans logiciel supplémentaire.

Le nom de l'archive n'a pas vraiment d'importance, mais il est important d'archiver le répertoire complet (exemple : base) et non pas l'ensemble des fichiers et répertoire de votre thème de façon à conserver le répertoire lors de l'installation.

Conventions HTML et CSS

Sat, 05 Mar 2016 16:07:12 +0100

Il est important dans un projet que les développeurs adoptent un style d’écriture identique. Ceci favorise la relecture du code par tout le monde et facilite grandement le débogage.

Depuis l'intégration du cache CSS, il n'est plus question d'optimiser le fichier CSS pour accélérer le chargement web (le cache CSS s'en occupe), mais plutôt de gagner en lisibilité dans le développement.

Afin de simplifier le travail de tous, nous avons choisi un style similaire à l'affichage des fonctions "examiner l’élément" des navigateurs web.

Ces règles ne sont pas obligatoire, mais très fortement recommandée pour vos développements.

Indentation

Le style d'indentation adopté sur PHPBoost permet de gagner en lisibilité et en clarté du code.

L'utilisation des tabulations et des espaces est très importante dans le code. Il faut aérer votre code pour le rendre plus lisible.

Nous allons voir plusieurs exemples ci-dessous.

Un seul attribut

Lorsque des classes similaires ne possèdent qu'un seul attribut, nous privilégions un affichage sur une seule ligne.

Code CSS :

.inline { display: inline !important; }
.center { text-align: center !important; }
.left { text-align: left !important; }
.right { text-align: right !important; }
.justify { text-align: justify !important; }

Plusieurs attributs

Lorsqu'une classe possèdent un certain nombre d'attributs, nous privilégions le retour à la ligne pour chaque attribut.

Code CSS :

body {
position: relative;
min-height: 100%;
height: auto;
background: url(images/body.jpg) no-repeat fixed top center;
color: #555555;
font-size: 13px;
font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
}

Les attributs pour plusieurs classes

Dans le cas où nous souhaitons appliquer un attribut à plusieurs classes, nous avons deux façons de coder en fonction de l'utilisation des fonctions.

Lorsque nous avons besoin de les identifier simplement, nous utilisons un retour à la ligne :

Code CSS :

nav.dynamic-menu li ul li a,
nav.dynamic-menu li ul li span { color: #0578CC; }

On distingue bien les deux cas où l'on applique la couleur.

Lorsque nous n'avons pas besoin d'identifier les éléments, nous n'utilisons pas de retour à la ligne :

Code CSS :

img, table, td, blockquote, code, pre, textarea, input, video, object, .video-player { max-width: 100%; }

Ce type d'écriture est privilégié dans le fichier default.css qui n'a pas pour but d’être modifié de façon régulière.

Les espaces dans les attributs

Pour faciliter les copier-coller des navigateurs, nous intégrons un espace après les ":" mais pas avant.

Code CSS :

background: #C4CED6;

De cette manière, si vous réalisez des tests avec votre navigateur, un simple copier-coller vous permet de le mettre dans votre fichier CSS.

Le nom des classes

Les règles sont simples :

Pas de majuscule
Utilisation du tiret du 6 "-"

Pour le reste, les noms restent cohérents avec la fonction d'utilisation.

La classe header est faite pour l'en-tête du site, la classe content pour le contenu du site.

Il reste encore quelques underscore "_" dans certains noms de classes, mais ils seront remplacés dans les versions futures. Ce choix permet de distinguer un nom de classe CSS et d'une variable PHP

Personnalisation du code CSS

Sat, 05 Mar 2016 16:00:17 +0100

Les fichiers CSS du thème

Nous l'avons vu dans l'article "Structure d'un thème", les thèmes de la version 4.1 sont constitués de 3 fichiers CSS

Pour modifier le thème base à votre goût, il est préférable de modifier les fichiers CSS dans l'ordre suivant :

Chaque thème est constitué des 7 fichiers CSS suivant :

design.css : Il contient toutes les classes de mises en forme du sites (Le gros du Design)
content.css : Il contient les classes propres au contenu du site (messages, modules).
global.css : il contient toutes les classes utiles sur le site et communes aux différents modules.
form.css : Il contient toutes les classes pour la mise en forme des formulaires.
table.css : il contient les classes de mise en forme des tableaux.

La modification de ces 5 fichiers permet de donner à votre site web, le rendu général que vous souhaitez.

Si vous souhaitez modifier le design des menus, il vous faudra en plus, modifier le fichier :

cssmenu.css : Il contient toutes les classes qui permettent la gestion des menus.

Enfin, si vous avez envie de personnaliser la page de login admin, il reste ce fichier à modifier

login.css : il contient les classes pour un affichage uniquement du login.

Vous retrouverez le contenu de chaque fichier dans l'article associé à chaque fichier.

Le cas du default.css et print.css

Facultativement, vous pouvez avoir besoin de modifier les fichiers du thème default. Sachez qu'ils ne contiennent aucune information de couleur ou autre propriété susceptible d'être modifiée à chaque thème.

default.css : Il contient les éléments génériques et les réinitialisations afin de garantir un affichage identique sur tous les navigateurs.
print.css : Met en forme le site pour un affichage épuré destiné à l'impression.

Il est vivement conseillé de ne pas faire de modification dans ces fichiers

Il vaut mieux privilégier la surcharge des fichiers du thème que de toucher au fichier du répertoire default qui touchera l'ensemble des thèmes et l'administration.

Fichier default.css

Sat, 05 Mar 2016 15:57:09 +0100

Introduction

Le fichier default.css contient des classes destinées à tout le site. Il sert notamment à réinitialiser certains attributs qui peuvent varier en fonction des navigateurs.

Le fichier default.css

Ce fichier ne fait pas partie de votre thème, il est contenu dans le template default.

Il est important de noter que toutes modification dans le fichier default.css aura une incidence sur l'ensemble de votre site web. Que ce soit sur la partie admin ou publique et sur l'ensemble des thèmes.

Il est vivement conseillé de ne pas faire de modification dans ce fichier

Le contenu

Le fichier default.css contient les classes suivantes :

Les resets

Code CSS :

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
img {
    border: none;
    overflow: auto;
    vertical-align: middle;
}
img, table, td, blockquote, code, pre, textarea, input, video, object, .video-player {
    max-width: 100%;
}
input, button, label, select, textarea, legend {
    font-family: inherit;
    font-size: inherit;
    vertical-align: middle;
}
optgroup, select, label, button, .button, input[type=radio], input[type=checkbox], input[type=color], .notation .star {
    cursor: pointer;
}
input[type=checkbox] {
    border: none;
    background: none;
}
button::-moz-focus-inner, .button::-moz-focus-inner{
    border: 0;
    padding: 0;
}
div, textarea, table, td, th, code, pre, samp {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
}
/* Fix for no wrap for button */
button, .button {
    word-wrap: normal;
    overflow-wrap: normal;
    hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
}
/* Fix for chrome word-wrap ... */
fieldset {
    min-width: 0 !important;
}
hr {
    background-color: #C4CED6;
    border: none;
    margin: 1px auto;
    height: 1px;
    width: 99%;
}
ul, ol {
    line-height: normal;
    margin-left: 30px;
    margin-bottom: 10px;
}
ul.no-list {
    list-style: none;
}
p {
    margin-bottom: 0.7em;
    line-height: normal;
    font-size: 1em;
}
pre {
    white-space: pre-wrap;
}
abbr, a.wikipedia-link {
    position: relative;
    border-bottom: 1px dotted #CCCCCC;
    cursor: help;
    padding-left: 18px;
}
a.wikipedia-link:before {
    position: absolute;
    vertical-align: middle;
    top: 1px;
    left: 0;
    content: "\f266" ;
    font-family: fontawesome;
    font-size: 1em;
}

L'alignement

Code CSS :

.inline { display: inline !important; }
.inline-block { display: inline-block !important; }
.center  { text-align: center !important; }
.left    { text-align: left !important; }
.right   { text-align: right !important; }
.justify { text-align: justify !important; }
.float-left, img.left   { float: left !important; }
.float-right, img.right { float: right !important; }
.hidden { display: none !important; }
@media (max-width: 768px) {
    .hidden-small-screens { display: none !important; }
}
@media (min-width: 769px) {
    .hidden-large-screens { display: none !important; }
}
img.left, img.right {
    margin: 6px;
}

la mise en forme du texte

Code CSS :

.text-strong  { font-weight: bold !important; }
.text-justify { text-align: justify !important; }
.text-italic  { font-style: italic !important; }
.valign-top    { vertical-align: top !important; }
.valign-middle { vertical-align: middle !important; }
.valign-bottom { vertical-align: bottom !important; }
.spacer {
    clear: both;
}

La gestion des images

Code CSS :

.img-link,
.img-link:hover {
    text-decoration: none;
}
.smiley {
    vertical-align: middle;
}

Les champs de formulaire

Code CSS :

div.vertical-fieldset,
div.horizontal-fieldset {
    margin: 20px 0;
}
div.vertical-fieldset .form-element,
div.horizontal-fieldset .form-element {
    margin: 0 5px 0 5px;
}
div.horizontal-fieldset .form-element label {
    display: inline;
}
div.horizontal-fieldset .form-field {
    display: block;
    width: 100%;
}
div.vertical-fieldset .form-element label,
div.horizontal-fieldset .form-element label {
    width: auto;
    vertical-align: middle;
    font-weight: bold;
}
/* Imite l'affichage fieldset / legend */
.fieldset-content {
    margin: auto;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .fieldset-content {
        margin-top: 0.5em;
    }
}
.module-mini-contents .fieldset-content {
    width: 100%;
}

L'opacité

Code CSS :

.low-opacity {
    opacity: 0.40;
}

La pagination

Code CSS :

ul.pagination li {
    display: inline;
}
ul.pagination .current-page {
    text-decoration: underline;
}

Les erreurs et le debug

Code CSS :

.pbt-debug {
    background-color: #FFA500 !important;
    outline: 3px solid #FF4500 !important;
}
#error-handler {
    width: auto;
    max-width: 750px;
    margin: 15px auto;
}

La prévisualisation

Code CSS :

.xmlhttprequest-preview {
    overflow: auto;
    height: 220px;
    width: 94%;
    font-size: 11px;
    margin: 4px auto 3px auto;
    padding: 1px 2px 1px 2px;
    border-radius: 4px;
}
/* --- Elements de previsualisation --- */
.loading-preview-container {
    position: relative;
}
.loading-preview {
    position: absolute;
    margin: 90px auto auto auto;
    width: 100%;
    text-align: center;
}
@media print {
    * {
        background-color: transparent;
        text-shadow: none;
        box-shadow: none;
        color: #000000;
    }
}

Les tableaux

Code CSS :

table.table-fixed {
    table-layout: fixed;
    width: 100%;
}

L'effet blink

Code CSS :

@keyframes blink {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}
@-webkit-keyframes blink {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}
.blink {
    animation: blink 1.5s ease-in-out infinite;
    -moz-animation: blink 1.5s ease-in-out infinite;
    -webkit-animation: blink 1.5s ease-in-out infinite;
}

Code CSS :

/*
 * Lightcase - jQuery Plugin
 * The smart and flexible Lightbox Plugin.
 *
 * @author        Cornel Boppart 
 * @copyright    Author
 *
 * @version        2.1.0 (25/04/2015)
 */
/* icon font */
@font-face {
    font-family: 'lightcase';
    src: url('../../../kernel/data/fonts/lightcase.eot?55356177');
    src: url('../../../kernel/data/fonts/lightcase.eot?55356177#iefix') format('embedded-opentype'),
         url('../../../kernel/data/fonts/lightcase.woff?55356177') format('woff'),
         url('../../../kernel/data/fonts/lightcase.ttf?55356177') format('truetype'),
         url('../../../../kernel/data/fonts/lightcase.svg?55356177#lightcase') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
[class*='lightcase-icon-']:before {
    font-family: 'lightcase';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
 
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
/* Codes */
.lightcase-icon-play:before     { content: '\e800'; } /* 'play' */
.lightcase-icon-pause:before     { content: '\e801'; } /* 'pause' */
.lightcase-icon-close:before     { content: '\e802'; } /* 'close' */
.lightcase-icon-prev:before     { content: '\e803'; } /* 'prev' */
.lightcase-icon-next:before     { content: '\e804'; } /* 'next' */
.lightcase-icon-spin:before     { content: '\e805'; } /* 'spin' */
/* Reduced layout for small devices */
@media screen and (max-width: 768px) {
    .lightcase-open body {
        padding: 55px 0 70px 0;
    }
    .lightcase-open body > *:not([id*=lightcase-]) {
        position: fixed !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    /* Overlay */
    #lightcase-overlay {
        background-color: #333333;
    }
    /* Loading */
    #lightcase-loading {
        color: #AAAAAA;
    }
    /* Case */
    #lightcase-case {
        font-family: arial, sans-serif;
        font-size: 13px;
        line-height: 18px;
        text-align: left;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #lightcase-case:not([data-type=image]):not([data-type=video]):not([data-type=flash]):not([data-type=error]),
    #lightcase-case:not([data-type=image]):not([data-type=video]):not([data-type=flash]):not([data-type=error]) .lightcase-contentInner,
    #lightcase-case:not([data-type=image]):not([data-type=video]):not([data-type=flash]):not([data-type=error]) .lightcase-inlineWrap {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none;
        background: none;
    }
    /*
     * Content - Extend with further selectors and colors in case you
     * have elements like , ,  or similar displayed in lightcase.
     */
    #lightcase-case .lightcase-content h1,
    #lightcase-case .lightcase-content h2,
    #lightcase-case .lightcase-content h3,
    #lightcase-case .lightcase-content h4,
    #lightcase-case .lightcase-content h5,
    #lightcase-case .lightcase-content h6,
    #lightcase-case .lightcase-content p {
        color: #AAAAAA;
    }
    /* Additional info */
    #lightcase-case .lightcase-info {
        padding-left: 15px;
        padding-right: 15px;
    }
    #lightcase-case:not([data-type=image]):not([data-type=video]):not([data-type=flash]):not([data-type=error]) .lightcase-info {
        position: static;
    }
    #lightcase-case:not([data-type=image]):not([data-type=video]):not([data-type=flash]):not([data-type=error]) .lightcase-content {
        padding: 15px;
        border: none;
        background: none;
        box-shadow: none;
    }
    #lightcase-case:not([data-type=image]):not([data-type=video]):not([data-type=flash]):not([data-type=error]) .lightcase-contentInner,
    #lightcase-case:not([data-type=image]):not([data-type=video]):not([data-type=flash]):not([data-type=error]) .lightcase-contentInner > * {
        width: 100% !important;
        max-width: none !important;
    }
    /*
     * Set auto height to each element except iframes, because of that
     * those cannot have a natural/native height and it must be especially defined.
     */
    #lightcase-case:not([data-type=image]):not([data-type=video]):not([data-type=flash]):not([data-type=error]) .lightcase-contentInner > *:not(iframe) {
        height: auto !important;
        max-height: none !important;
    }
    /* Navigation */
    .lightcase-open #lightcase-nav[data-ispartofsequence]:before {
        content: '';
        position: fixed;
        z-index: 9998;
        right: 0;
        bottom: 0;
        left: 0;
        height: 55px;
        background-color: rgba(55, 55, 55, 0.9);
    }
    #lightcase-nav a {
        position: fixed;
        z-index: 9999;
        bottom: 15px;
        outline: none;
        cursor: pointer;
        font-size: 24px;
    }
    #lightcase-nav a:hover {
        text-shadow: 0 0 15px #FFFFFF;
    }
    /* Icon positioning */
    #lightcase-nav .lightcase-icon-close {
        position: absolute;
        z-index: 9997;
        top: 15px;
        right: 15px;
        opacity: 0;
    }
    #lightcase-nav .lightcase-icon-pause,
    #lightcase-nav .lightcase-icon-play {
        left: 50%;
        margin-left: -0.5em;
    }
    #lightcase-nav .lightcase-icon-prev {
        left: 15px;
    }
    #lightcase-nav .lightcase-icon-next {
        right: 15px;
    }
    /* Error message */
    #lightcase-case p.lightcase-error {
        padding: 30px 0;
        font-size: 17px;
        text-align: center;        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #AAAAAA;
    }
}
@media screen and (min-width: 769px) {
    /* Overlay */
    #lightcase-overlay {
        background-color: #333333;
    }
    /* Loading */
    #lightcase-loading {
        color: #FFFFFF;
        text-shadow: 0 0 15px #FFFFFF;
    }
    /* Case */
    #lightcase-case {
        font-family: arial, sans-serif;
        font-size: 13px;
        line-height: 18px;
        text-align: left;
        color: #AAAAAA;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    /* Content */
    #lightcase-case:not([data-type=error]) .lightcase-content {
        position: relative;
        z-index: 1;
        overflow: hidden;
        text-shadow: none;
        background-color: #FFFFFF;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
        -webkit-backface-visibility: hidden;
    }
    #lightcase-case[data-type=image] .lightcase-content,
    #lightcase-case[data-type=video] .lightcase-content {
        background-color: #333333;
    }
    #lightcase-case[data-type=image] .lightcase-contentInner,
    #lightcase-case[data-type=video] .lightcase-contentInner {
        line-height: 0.75;
    }
    #lightcase-case:not([data-type=error]) .lightcase-inlineWrap {
        padding: 30px;
        overflow: auto;
        box-sizing: border-box;
    }
    /*
     * Content - Extend with further selectors and colors in case you
     * have elements like , ,  or similar displayed in lightcase.
     */
    #lightcase-case .lightcase-content h1,
    #lightcase-case .lightcase-content h2,
    #lightcase-case .lightcase-content h3,
    #lightcase-case .lightcase-content h4,
    #lightcase-case .lightcase-content h5,
    #lightcase-case .lightcase-content h6,
    #lightcase-case .lightcase-content p {
        color: #333333;
    }
    /* Navigation */
    #lightcase-nav a {
        top: 50%;
        margin-top: -0.5em;
        outline: none;
        cursor: pointer;
    }
    #lightcase-nav a.lightcase-icon-close {
        margin: 0;
    }
    #lightcase-nav a.lightcase-icon-close,
    #lightcase-nav a.lightcase-icon-play,
    #lightcase-nav a.lightcase-icon-pause {
        opacity: 0;
    }
    #lightcase-nav a:hover {
        text-shadow: 0 0 15px #FFFFFF;
    }
    #lightcase-nav a:hover,
    #lightcase-case:hover ~ #lightcase-nav a {
        opacity: 1;
    }
    /* Icon positioning */
    #lightcase-nav a.lightcase-icon-close {
        position: fixed;
        z-index: 9997;
        top: 15px;
        right: 15px;
        outline: none;
    }
 
    #lightcase-nav a.lightcase-icon-play,
    #lightcase-nav a.lightcase-icon-pause {
        left: 50%;
        margin-left: -0.5em;
    }
 
    #lightcase-nav a.lightcase-icon-prev {
        left: 15px;
    }
 
    #lightcase-nav a.lightcase-icon-next {
        right: 15px;
    }
    /* Error message */
    #lightcase-case p.lightcase-error {
        margin: 0;
        padding: 0;
        font-size: 17px;
        color: #AAAAAA;
    }
}
@media screen {
    /* Overlay */
    #lightcase-overlay {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
    }
    /* Loading */
    #lightcase-loading {
        position: fixed;
        z-index: 1001;
        top: 50%;
        left: 50%;
        margin-top: -0.5em;
        margin-left: -0.5em;
        opacity: 1;
        font-size: 32px;        
        /* Fixes the icon wobble issue in firefox */
        -moz-transform-origin: 50% 53%;
        animation: lightcase-loading-spin 0.5s infinite linear;
    }
    /* Case */
    #lightcase-case {
        display: none;
        position: fixed;
        z-index: 1002;
        top: 50%;
        left: 50%;
    }
    /* Additional info */
    #lightcase-case .lightcase-info {
        /* 
         * You can change to position "static" or "relative" instead, but consider
         * that this height will be integrated and calculated
         * to the maximum height additionally to the image height.
         */
        position: absolute;
        padding-top: 15px;
    }
    #lightcase-case .lightcase-caption {
        clear: both;
    }
    #lightcase-case .lightcase-title,
    #lightcase-case .lightcase-caption {
        margin: 0;
        padding: 0;
        font-size: 17px;
        line-height: 1.5;
        font-weight: normal;
        text-overflow: ellipsis;
    }
    #lightcase-case .lightcase-caption {
        font-size: 13px;
    }
    #lightcase-case .lightcase-sequenceInfo {
        font-size: 11px;
    }
    /* Icons */
    [class*='lightcase-icon-'] {
        width: 1.123em;
        height: auto;
        /*
         * For adjusting the icon size, just change the
         * value for "font-size" here!
         */
        font-size: 38px;
        line-height: 1;
        text-align: center;
        text-shadow: none;
    }
 
    a[class*='lightcase-icon-'],
    a[class*='lightcase-icon-']:focus {
        position: fixed;
        z-index: 9999;
        color: rgba(255, 255, 255, 0.6);
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        transition: color, opacity, ease-in-out 0.25s;
    }
 
    a[class*='lightcase-icon-']:hover {
        color: rgba(255, 255, 255, 1);
    }
 
    a[class*='lightcase-icon-'] > span {
        display: inline-block;
        text-indent: -9999px;
    }
    /* For mobile (touch) devices */
    .lightcase-isMobileDevice #lightcase-case .lightcase-inlineWrap,
    .lightcase-isMobileDevice #lightcase-case[data-type=iframe] .lightcase-contentInner {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lightcase-isMobileDevice.lightcase-open,
    .lightcase-isMobileDevice.lightcase-open body {
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
    }
    .lightcase-isMobileDevice #lightcase-nav a:hover {
        color: #aaa;
        text-shadow: none;
    }
}
/* Animation for loading spin icon */
@-webkit-keyframes lightcase-loading-spin {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
    }
}
@keyframes lightcase-loading-spin {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
    }
}
/* Lightbox customization
--------------------------------------*/
#lightcase-nav a {
    text-decoration: none;
}
#lightcase-nav a:hover > span {
    display: block;
    margin: 0.6em 0 0 0;
    font-size: 0.3em;
    text-indent: 0;
    word-wrap: normal;
}

Wiki

Personnaliser un thème

Introduction

Faut-il des connaissances particulières ?

Recommandations

La structure des thèmes

Personnaliser un thème

La personnalisation des fichiers CSS

La personnalisation des fichiers HTML

La personnalisation des fichiers images

Finaliser son thème

Personnalisation des modules ou de framework

Comment ça marche ?

Que peut-on modifier ?

Les templates

Les modules

Le framework

L'administration

Les CSS

Variables de Date

Finalisation du thème

Les images de prévisualisation

Le fichier de configuration d'un thème

Le nom de votre thème

Faire le ménage

L'archivage

Conventions HTML et CSS

Indentation

Un seul attribut

Plusieurs attributs

Les attributs pour plusieurs classes

Les espaces dans les attributs

Le nom des classes

Personnalisation du code CSS

Les fichiers CSS du thème

Le cas du default.css et print.css

Fichier default.css

Introduction

Le fichier default.css

Le contenu

Les resets

L'alignement

la mise en forme du texte

La gestion des images

Les champs de formulaire

L'opacité

La pagination

Les erreurs et le debug

La prévisualisation

Les tableaux

L'effet blink

L'effet lightbox