Structure d'un thème

Fichier global.css

Dernière mise à jour : 04/03/2016 à 18h56
Table des matières
  1. La mise en forme du texte
    1. Les liens du site
    2. Les liens des utilisateurs
    3. Couleur de texte
    4. Les différentes tailles de polices
    5. les titres (la balise h)
    6. Les titres "BBcode"
  2. Mise en forme du contenu
    1. Affichage du mini calendrier
    2. Les blocs bbcode
    3. Le sélecteur de couleurs
    4. les blocs de quotes, de code, ou cachés
    5. Les autres éléments de positionnement
    6. Les listes numérotées
    7. Le menu de flux
    8. La recherche de membres (en AJAX)
    9. La barre de progression
    10. Le système de notation
  3. Les Icônes spécifiques PHPBoost de FontAwesome
    1. Les couleurs spécifiques
    2. les alertes
  4. Les message d'erreurs
  5. Le système d'upload
  6. Les icônes réseaux sociaux
Le fichier global.css contient les classes globales du site, qui peuvent être utilisées par les modules et le noyau.

La mise en forme du texte


Commençons par les éléments de mise en forme du texte

Les liens du site


Chaque fois qu'un lien est cliquable, c'est la balise <a> qui se cache derrière. Pour gérer la couleur des lien par défaut, il suffit de remplacer les valeurs de l'attribut color ci-dessous.

Code CSS : 
a {
    color: #4372AA;
    text-decoration: none;
}
a:hover {
    color: #2D4D73;
    text-decoration: underline;
}


Les liens des utilisateurs


Lorsque le lien correspond à un pseudo, nous attribuons une couleur particulière et notamment pour les admin, modo et membre. Vous pouvez personnaliser ces éléments avec le code ci-dessous.

Code CSS : 
a.admin  { color: #FFA34F; }
a.modo   { color: #006699; }
a.member { color: #000000; }


Couleur de texte


Un certain nombre de couleur sont prédéfini pour afficher des élements actifs ou des alertes.

Code CSS : 
.color-alert { color: #B22222; }
.color-notavailable     { color: #B22222; }
.color-available     { color: #008000; }
.color-unknown         { color: #004b80; }
.bkgd-color-visible         { background-color: #CCFFCC; }
.bkgd-color-unvisible         { background-color: #FFEE99; }
.bkgd-color-unaprobed     { background-color: #FFCCCC; }
.bkgd-color-fixed         { background-color: #7FFF9C; }
tr td.bkgd-color-fixed     { background-color: #7FFF9C; }
.bkgd-color-processing     { background-color: #FFD86F; }
tr td.bkgd-color-processing { background-color: #FFD86F; }
.bkgd-color-unknown     { background-color: #FF796F; }
tr td.bkgd-color-unknown     { background-color: #FF796F; }


Les différentes tailles de polices


Afin de facilité la personnalisation, nous avons créer des tailles pour redéfinir la taille du texte dans certains cas. Nous utilisons l'unités de mesure "em" qui permet d'adapter automatiquement la taille en fonction de celle de son parent.

Code CSS : 
.smaller { font-size: 0.7em; }
.small   { font-size: 0.9em; }
.normal  { font-size: 1.0em; }
.big     { font-size: 1.2em; }
.bigger  { font-size: 1.5em; }
.biggest { font-size: 2.0em; }


les titres (la balise h)


Les balises <h> sont les en-têtes des différents éléments de votre site. Des tailles ont été définies pour assurer une cohérence dans la page. Cette fois-ci nous utilisons l'unité "rem" qui permet de définir la taille par rapport à la première taille (celle du body).

Code CSS : 
h1 { font-size: 2.2rem; }
h2 { font-size: 2.0rem; }
h3 { font-size: 1.9rem; }
h4 { font-size: 1.8rem; }
h5 { font-size: 1.6rem; }
h6 { font-size: 1.4rem; }
h1, h2, h3, h4, h5, h6 {
    overflow: hidden;
}


Les titres "BBcode"


Lorsque les titres sont utilisés dans un contenu tel que le forum, ils sont associés à une classe supplémentaire

Code CSS : 
.formatter-title {
    display: inline-block;
    margin: 0.5rem 0;
}
h1.formatter-title {  }
h2.formatter-title { margin-left: 1.5rem; }
h3.formatter-title { margin-left: 3rem; }
h4.formatter-title { margin-left: 5rem; }
h3.formatter-title,
h4.formatter-title {
    border-bottom: 1px solid #366393;
}




Mise en forme du contenu


La partie suivante correspond à la mise en forme du contenu tel que le mini-calendrier, le selecteur de couleur, les blocs.

Affichage du mini calendrier


Les formulaires demandes parfois la saisie d'une date. Le sélecteur est géré par le code suivant.

Code CSS : 
.calendar-block-container {
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
}
.form-field .calendar-container {
    display: inline-block;
    position: relative;
}
.calendar-block {
    position: absolute;
    border: 1px solid #999999;
    z-index: 10;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.calendar-block {
    top: 25px;
    left: -104px;
}
.calendar-block .date-picker {
    margin: 0;
    width: 250px;
    table-layout: fixed;
}
.calendar-block .date-select-container {
    background-color: #F5F5F5;
    padding: 2px 0;
    border-radius: 3px 3px 0 0;
}
.calendar-block .date-select-previous {
    float: left;
    margin: 1px 4px 0 4px;
}
.calendar-block .date-select-next {
    float: right;
    margin: 1px 4px 0 4px;
}
.calendar-block .date-select-next i,
.calendar-block .date-select-previous i {
    color: #666666;
}
.calendar-block .date-select-content {
    margin: auto;
    width: 185px;
    text-align: center;
}
.calendar-block .date-select-content select,
.calendar-block .date-select-content select:focus {
    padding: 1px 1px;
    font-size: 0.9em;
    border: none;
    background: none;
    box-shadow: none;
}
.calendar-block .date-select-month {
    width: 92px;
    margin: 0 1px 0 5px;
}
.calendar-block .date-select-year {
    width: 55px;
    margin: 0;
}
.calendar-block .date-picker select,
.calendar-block .date-picker select:focus {
    box-shadow: none;
    max-width: 75px;
}
.calendar-block .date-picker thead tr th {
    border-top: 1px solid #CCCCCC;
    padding: 5px 0;
    border-radius: 0;
    background-color: #FFFFFF;
    font-weight: bold;
    color: #666666;
}
.calendar-block .date-picker tbody tr:last-child {
    border-bottom: none;
}
.calendar-block .date-picker tbody td {
    height: 23px;
    padding: 1px 2px;
}
.calendar-block .date-picker tbody td:first-child { border-left: none;  }
.calendar-block .date-picker tbody td:last-child  { border-right: none; }
.calendar-block .date-picker tbody td.calendar-none        { background-color: #FFFFFF; }
.calendar-block .date-picker tbody td.calendar-today     { background-color: #B5E5B9; }
.calendar-block .date-picker tbody td.calendar-event     { background-color: #DBE5EE; }
.calendar-block .date-picker tbody td.calendar-weekend     { background-color: #FFE3B6; }
.calendar-block .date-picker tbody tr:last-child td {
    border-bottom: none;
}
.calendar-block .date-picker tbody tr:last-child td:first-child { border-radius: 0 0 0 2px; }
.calendar-block .date-picker tbody tr:last-child td:last-child    { border-radius: 0 0 2px 0; }
td.calendar-week {
    border-right: 1px solid #BBBBBB;
}


Les blocs bbcode


De nombreux éléments dans le bbcode utilise un bloc pour délimiter leur zone.

Code CSS : 
.bbcode-block-container {
    position: absolute;
    z-index: 20;
    top: 26px;
    left: -4px;    
    margin: 0;
    padding: 0;
    text-align: center;
}
.bbcode-block {
    margin: 0;
    background-color: #F3F3F3;
    border: 1px solid #AAAAAA;
    border-radius: 3px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.bbcode-block a {
    cursor: pointer;
    text-decoration: none;
}


Le sélecteur de couleurs


Il s'agit du bloc permettant de sélectionner une couleur. Il est notamment utilisé dans la barre bbcode ou les formulaires.

Code CSS : 
.color-picker {
    position: absolute;
    z-index: 100;
}
.color-picker .bbcode-block table {
    margin: auto;
    border: none;
    border-collapse: collapse;
}
.color-picker td {
    padding: 0;
    border: 1px solid #F3F3F3;
}
.color-picker td a {
    display: block;
    width: 14px;
    height: 14px;
}


les blocs de quotes, de code, ou cachés


Lorsque vous souhaitez afficher une quote, du code ou masqué un texte, vous pouvez utiliser les class suivantes : "blockquote", "code", "hide". La class "text-" correspond à l'élément précédent le bloc.

Code CSS : 
.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;
}


Les autres éléments de positionnement


Autres codes associés aux éditeurs de texte

Code CSS : 
.indent {
    margin-left: 30px;
}
.formatter-acronym {
    cursor: help;
}
.formatter-block {
    display: block;
    margin: 5px 20px;
    padding: 5px;
    border: 1px solid #C4CED6;
    overflow: hidden;
}
.formatter-fieldset {
    margin: 10px;
}
.formatter-ul {
    text-align: left;
}


Les listes numérotées


La balise <ol> correspond à une liste ordonnées d’élément.

Code CSS : 
.code ol {
    margin-left: 3em;
}


Le menu de flux


Code CSS : 
.feed-list {
    margin: 5px 0;
    list-style-type: none;
    text-align: left;
}
@media (max-width: 768px) {
    .feed-list li a {
        margin: 1px 0;
        padding: 7px 0;
        display: inline-block;
    }
}


La recherche de membres (en AJAX)


Le résultat d'une recherche de membre en AJAX est affiché dans un bloc. L'attribut box-shadow permet d'afficher une légère ombre derrière se bloc.

Code CSS : 
.xmlhttprequest-result-search {
    margin: 2px 0 0 0;
    padding: 2px;
    min-height: 40px;
    width: 100px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);
    overflow: auto;
}


La barre de progression


La barre de progression utilisé lors de l'installation, dans les sondages ou tout autres utilisation que vous pourriez en faire utilise les classes suivantes. Un container, le texte, la barre en elle même, et une variante lorsque la barre est à 100%.

Code CSS : 
.progressbar-container {
    position: relative;
    margin: 4px 0 10px;
    background-color: #F5F5F5;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progressbar-container .progressbar-infos {
    position: absolute;
    width: 100%;
    line-height: 13px;
    font-size: 11px;
    text-align: center;
}
.progressbar {
    border-radius: 3px 0 0 3px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.progressbar[style*="100"] {
    border-radius: 3px 3px 3px 3px;
}
.progressbar-container .progressbar {
    height: 13px;
    background-color: #8ECF67;
    transition: width .6s ease;
}


Le système de notation


Certains modules autorisent la notation. Si vous souhaitez ajuster la couleur ou la taille, vous pouvez modifier l'attribut "color" ou "font-size".

Code CSS : 
.notation,
.static-notation {
    display: inline-block;
}
.notation .star,
.static-notation .star {
    padding-right: 5px;
    color: #E3CF7A;
    font-size: 14px;
    text-decoration: none;
}


Les Icônes spécifiques PHPBoost de FontAwesome


La version 4.1 de PHPBoost utilise la librairie FontAwesome comme bibliothèque d'images. Certains couleurs ont été personnalisé en fonction de leur utilisation. On retrouve par exemple l'icone fa-forbidden que l'on colori en rouge #BA4B49.

On retrouve aussi l'affichage des alertes du profil avec la double icones

Les couleurs spécifiques


Code CSS : 
.fa-syndication:before { color: #F57900; }
.fa-success:before     { color: #478948; }
.fa-forbidden:before   { color: #BA4B49; }
.fa-error:before       { color: #BA4B49; }
.fa-warning:before     { color: #C19954; }
.fa-ban:before         { color: #BA4B49; }
.fa-unban:before       { color: #478948; }
.fa-male:before        { color: #8DC3E9; }
.fa-female:before      { color: #F49CC4; }
.fa-online:before      { color: #52D132; }
.fa-offline:before     { color: #E05759; }
.fa-trend-up:before    { color: #478948; }
.fa-trend-down:before  { color: #BA4B49; }


les alertes


Code CSS : 
li.small-block .fa-stack {
    height: 2.34em;
}
.fa-circle-alert {
    position: absolute;
    z-index: 1;
    top: -3px;
    left: 20px;
    font-size: 1.32em;
    color: #BA4B49;
}
.fa-circle-alert span {
    position: absolute;
    top: 4px;
    display: block;
    margin: 0 auto;
    width: 100%;
    color: #FFFFFF;
    font-size: 0.7em;
    text-align: center;
}




Les message d'erreurs


Pour personnaliser les messages d'erreurs, notice, warning, success, il suffit de modifier les attributs "border", "background" et "color" ci-dessous. Les icones utilisent la librairies font-awesome

Code CSS : 
div.message-helper-small {
    width: 50%;
}
.error,
.notice,
.warning,
.success,
.question {
    position: relative;
    display: block;
    margin: 5px auto 15px auto;
    padding: 10px 10px 10px 40px;
    height: auto;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    line-height: 20px;
    text-align: left;
    overflow: hidden;
}
.error:before,
.notice:before,
.warning:before,
.success:before, 
.question:before {
    position: absolute;
    left: 6px;
    top: 7px;
    width: 28px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-size: 2em;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.error:before    { content: "\f00d"; }
.notice:before   { content: "\f12a"; }
.warning:before     { content: "\f071"; }
.success:before     { content: "\f00c"; }
.question:before { content: "\f128"; }
.error, .error:before       { color: #BA4B49; }
.notice, .notice:before     { color: #888888; }
.warning, .warning:before   { color: #C19954; }
.success, .success:before   { color: #478948; }
.question, .question:before { color: #3B88AE; }
.error    { background-color: #F3DFDF; border-color: #ECCDD2; }
.notice   { background-color: #F0F0F0; border-color: #E2E2E2; }
.warning  { background-color: #FDF9E4; border-color: #FBECCD; }
.success  { background-color: #E0F1D9; border-color: #D7EAC7; }
.question { background-color: #DAEEF8; border-color: #BDE9F2; }




Le système d'upload


Certain éléments comme la barre d'adresse ou de lien peuvent être personnaliser avec les class "upload-".

Code CSS : 
#module-user-upload {
    margin: 5px;
}
.upload-address-bar {
    margin: 0 25px;
    padding: 6px;
    background-color: #FAFAFA;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    color: #444444;
}
.upload-address-bar-links {
    float: right;
    margin: 0 25px 25px 25px;
}
.upload-address-bar-links a {
    margin-left: 10px;
}
#empty-folder {
    width: 70%;
}
.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;
}
.upload-input-bbcode {
    margin-top: 2px;
    cursor: pointer;
}
.upload-cat-list,
.upload-cat-explorer {
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height: normal;
}
.upload-cat-explorer {
    padding-left: 30px;
}
.upload-no-sub-cat {
    padding-left: 17px;
}
/* --- Deplacement des fichiers --- */
.upload-selected-cat {
    background-color: #F5FBFF;
    border: 1px solid #2C5169;
}
.upload-elements-move-to,
.upload-elements-move-file,
.upload-elements-move-to-cat,
.upload-elements-move-folder {
    float: left;
    width: 33%;
    text-align: center;
}
.upload-elements-move-to {
    margin-top: 50px;
}
.upload-elements-move-file img {
    width: 100px;
    height: auto;
}
.upload-root-cat {
    padding: 0 0 0 17px;
}




Les icônes réseaux sociaux


Depuis la version 5.0, il est possible de se connecter avec Facebook et Google+. Les boutons et les icônes sont facilement personnalisable avec la classe ".social-connect".

Code CSS : 
a.social-connect {
    display: inline-block;
    margin: 10px 0;
    width: 30px;
    height: 30px;
    vertical-align: top;
    border-radius:4px;
    color: #DEDEDE;
    text-align: center;
}
.horizontal-fieldset a.social-connect {
    margin: 0;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .horizontal-fieldset a.social-connect {
        display: block;
        width: 100%;
        margin: 5px auto;
    }
    .horizontal-fieldset a.social-connect i {
        margin-right: 5px;
    }
}
a.social-connect i:before {
    color: #DFDFDF;
    transition: 0.2s ease-out;
}
a.social-connect:hover i:before {
    color: #EFEFEF;
    transition: 0.2s ease-out;
}
a.fb i:before         { font-size: 1.9em; }
a.google i:before     { font-size: 1.7em; }
a.fb         { padding: 8px 0 0 4px; }
a.google     { padding: 6px 1px 0 0; }
@media (max-width: 768px) {
    a.fb {
        padding: 5px 0 0 3px;
    }
}
a.fb         { background: #3B5998; }
a.google     { background: #D8432E; }    
a.twitter     { background: #5EA9DD; }
a.social-connect span {
    display: none;
}
Cette page a été vue 7410 fois