Fichier content.css


Introduction


Cet article va décrire le contenu du fichier content.css qui inclut le design de tout ce qui touche aux modules, minis modules, commentaires et encore bien d'autres choses que vous allez découvrir au fur et à mesure.

Les conteneurs



Code CSS : 
section,
article {
    position: relative;
    margin: 0 auto;
    width: 100%;
    vertical-align: top;
}
@media (min-width: 769px) {
    section,
    article {
        margin: 1em auto;
        width: 98%;
    }
}
/* --- articles --- */
.article-several.block,
.article-several.small-block,
.article-several.medium-block {
    clear: none!important;
}
.article-several {
    clear: both;
}
/* --- Titre d'une page ou d'un element d'un module --- */
section header h1,
article header h1 {
    border-bottom: 1px solid #336397;
}
section header h1 a:hover {
    text-decoration: none;
}
section header h2,
article header h2 {
    margin-left: 15px;
    border-bottom: 1px solid #336397;
}
section header h3,
article header h3 {
    margin-left: 15px;
    border-bottom: 1px solid #336397;
}
@media (min-width: 769px) {
    section header,
    article header {
        margin: 0 0 1em 0;
    }    
}
/* --- Titre d'un bas de page --- */
@media (min-width: 769px) {
    section footer,
    article footer {
        margin-bottom: 1.5em;
    }
}
section footer,
article footer {
    clear: both;
}
/* --- Icones actions (edition, suppression, etc) --- */
span.actions {
    float: right;
}
header span.actions a {
    font-size: 1.2em;
}
header span.actions a {
    font-size: 1.2rem;
}
.more {
    padding: 10px 5px 0;
    font-size: 11px;
    font-size: 1.1rem;
    font-style: italic;
}
@media (min-width: 769px) {
    .more {
        margin: 0 0.2em 2em 1.2em;
        padding: 0;
    }
}
/* --- Contenu --- */
.content {
    padding: 0 1em;
    text-align: justify;
}
@media (min-width: 769px) {
    div#main.main-with-left.main-with-right section .content {
        padding: 0 5px;
    }
}
@media (max-width: 768px) {
    .content {
        padding: 1em 0;
    }
}
.content + aside {
    clear: both;
}


Les balises section et article permettent de délimiter notamment les zones des modules. Elles font parties des nouvelles balises HTML5 qui permettent de structurer de façon cohérente le code.
Les conteneurs ont aussi leurs propres titres comme les balises h1. On retrouve donc dans le content.css les éléments nécessaires à leur personnalisation.
Voici un exemple classique de structure :
Code TEXT : 
<section>
  <h1>Articles</h1>
 
  <article>
       ...
  </article>
</section>


Les blocks


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


Les classes block ou similaires permettent un affichage sous forme de bloc côte à côte. On les retrouvent par exemple dans le profil.

La pagination


Code CSS : 
section footer ul.pagination {
    text-align: center;
}
ul.pagination {
    margin: 0;
}
ul.pagination .fa:before {
    font-size: 0.8em;
}
ul.pagination-block {
    margin: 5px 0;
}
ul.pagination-block li {
    padding: 2px 2px;
}
ul.pagination-block li a {
    display: inline-block;
    padding: 2px 7px;
    outline: none;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    text-decoration: none;
}
ul.pagination-block li a {
    background-image: linear-gradient(to bottom,  rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%);
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC;
    border-color: #E1E1E1 #E1E1E1 #BFBFBF #CFCFCF;
    border-radius: 4px;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
}
ul.pagination-block li a:hover {
    background-color: #FDFDFD;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
    transition: all 0.1s linear;
}
ul.pagination-block li a:active {
    background-color: #F1F1F1;
    border: 1px solid #DDDDDD;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
}
ul.pagination-block li a.current-page {
    background-color: #3B6B9F;
    border-color: #366393;
    color: #FEFEFE;
    text-decoration: none;
}
ul.pagination-block li a.current-page:hover {
    background-color: #366393;
    border-color: #315A86;
}
ul.pagination-block-bis li a.prev-page,
ul.pagination-block-bis li a.next-page {
    border: none;
    background: none;
    box-shadow: none;
    text-shadow: none;
}
ul.pagination-block-bis li a.prev-page:hover,
ul.pagination-block-bis li a.next-page:hover {
    text-decoration: underline;
}
.pages-pagination a {
    text-decoration: none;
}

La plupart des modules utilisent la pagination lorsqu'il y a trop d’éléments sur une page. Il existe deux types de pagination: l'une normale et l'autre en forme de block.

L'explorateur des catégories


Code CSS : 
.explorer .cats,
.explorer .files {
    display: inline-block;
    margin: 5px 0.33%;
    width: 48%;
    vertical-align: top;
}
@media (max-width: 480px) {
    .explorer .cats,
    .explorer .files {
        width: 100%;
    }
}
.explorer .cats {
    min-width: 200px;
}
.explorer h1 {
    margin: 5px 0;
    color: #666666;
    font-size: 13px;
}
.explorer .content {
    padding: 5px 0;
    min-height: 120px;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
}
.explorer .content ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.explorer .content ul ul {
    margin-left: 22px;
}
.explorer .content ul a.parent {
    float: left;
    height: 0;
}
.explorer .content ul a.parent i[id^="img2_"] {
    margin-left: -18px;
}
.explorer .content ul a {
    display: block;
    padding: 3px 0;
    color: #666666;
    text-decoration: none;
    text-align: left;
}
.explorer .content > ul > li > a {
    padding: 3px 5px;
}
.explorer .content ul .fa {
    width: 20px;
    vertical-align: top;
}
.explorer .content ul .fa:before {
    vertical-align: middle;
}
.explorer .content ul a.parent .fa:first-child {
    width: 14px;
}
.explorer .content ul a.parent .fa:first-child:before {
    width: 14px;
    font-size: 11px;
}
.explorer .content ul a:hover,
.explorer .content ul a:hover + a {
    background-color: #EEEEEE;
}
.explorer .content ul .sub a.parent {
    padding-left: 4px;
}
.explorer .selected {
    background-color: #DDDDDD;
}
.options {
    float: right;
    margin: 5px;
    padding: 6px 12px;
    max-width: 100%;
    background-color: #EEEEEE;
    border: 1px solid #DDDDDD;
    border-radius: 3px;    
}
.options h6 {
    margin: 10px 3px;
    font-size: 14px;
}
.infos {
    margin-left: 20px;
}
@media (max-width: 480px) {
    .infos {
        float: none;
        width: 100%;
        margin: 0 0 10px;
    }
}


Certains modules comme le wiki utilisent un système d'explorateur de fichier et de répertoire. Le code ci-dessus permet d'en personnaliser le rendu.

La gestion des catégories Drag&Drop


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


Lorsqu'un système de catégories existe sur un module, il est possible de gérer l'ordre avec un système de drag&drop.

Les mini-modules


Code CSS : 
.module-mini-container {
    margin: 0 0 10px 0;
    padding: 5px;
    background-color: #FFFFFF;
    border: 1px #BEBEBE solid;
    border-bottom: 2px #99B1CB solid;
    border-spacing: 1px;
    clear: both;
}
.module-mini-top {
    padding: 0.2em 0 0.2em 0;
    min-height: 24px;
    border-bottom: 2px #336397 solid;
    text-align: center;
}
.module-mini-container h5,
.module-mini-container h3 {
    color: #515C68;
}
.module-mini-contents {
    padding: 5px 4px 0 4px;
    border-top: none;
    border-bottom: none;
    text-align: center;
}
.module-mini-bottom {
    height: 15px;
}

Chaque mini-module est délimité par la class "module-mini-container". Le titre du mini-module sera lui délimité par la class "module-mini-top" tandis que le contenu du mini-module sera englobé par la class "module-mini-contents".

Les messages


Code CSS : 
#comments-list {
    clear: both;
}
#comments-list > header { 
    display: none;
}
.message {
    width: 98%;
    margin-bottom: 20px;
    overflow: auto;
}
#comments-list .message > header {
    display:none;
}
.message > footer {
    clear: both;
}
.view-topic {
    margin-top: 10px;
}
.view-topic i {
    margin: 0 0 1px 5px;
}
/* --- infos du message --- */
.message-date {
    margin-left: 150px;
}
.message-date i {
    vertical-align: top;
}
.message-user-infos {
    float: left;    
    width: 120px;
    text-align: center;
}
.message-message {
    position: relative;
    margin: 5px 0 0 140px;
    padding: 15px;
    min-height: 80px;
    background-color: #ECEFFA;
    border: 1px solid #D6DEE7;
    border-radius: 4px;
    color: #333333;
}
.message-message::before {
    position: absolute;
    top: 15px;
    bottom: auto;
    left: -25px;
    display: block;
    width: 0;
    border-width: 15px 25px 15px 0;
    border-color: transparent #D6DEE7;
    border-style: solid;
    content: "";
}
.message-message::after {
    position: absolute;
    content: "";
    top: 16px;
    bottom: auto;
    left: -24px;
    display: block;
    width: 0;
    border-width: 14px 24px 14px 0;
    border-color: transparent #ECEFFA;
    border-style: solid;    
}
.message-avatar {
    width: 80px;
}
.message-user-infos img.message-avatar {
    padding: 10px 0;
}
article .message-user-infos .message-user-group {
    display: none;
}
@media (max-width: 480px) {
    .message-user-infos img.message-avatar {
        float: left;
        margin: 5px 5px 0 15px;
        padding: 4px;
        max-height: 54px;
        width: auto;
    }
    .message-message {
        border-top: 1px solid #CAD1EB;
    }
    .message-pseudo {
        float: right;
        padding: 20px 10px 0 0px;
    }
    .message-level {
        display: none;
    }
    .message-date {
        float: right;
        margin: 0 15px 0 0;
        padding: 20px 0 0 0;
        max-width: 120px;
        text-align: right;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    .message-container {
        padding-left: 70px;
    }
    .message-pseudo {
        padding: 20px 10px 0 15px;
    }
 
    .message-user-infos img {
        position: absolute;
        top: 20px;
        left: 15px;
        max-width: 54px;
    }
    .message-date {
        margin: 0;
        padding: 23px 0 0 0;
        text-align: left;
    }
}
@media (max-width: 768px) {
    .message-container {
        position: relative;
        min-height: 80px;
        background-color: #ECEFFA;
        border: 1px solid #D6DEE7;
        border-radius: 4px;
        color: #333333;
    }
    .message-message {
        background-color: none;
        border: none;
        border-radius: 0;
    }
    .message-message::after,
    .message-message::before {
        display: none;
    }
    .message-user-infos {
        display: inline-block;
    }
    .message-pseudo {
        text-align: left;
    }
    .message-pseudo a {
        color: #555555;
        font-size: 1.2em;
        font-weight: bold;
    }
    .message-pseudo a:hover {
        color: #222222;
        text-decoration: none;
    }
 
    .message-user-infos {
        width: auto;
    }
    .message-user-infos img {
        padding: 3px;
        background-color: #fff;
        box-shadow: 0 1px 9px #e0e0e0,inset 0 0 2px rgba(215,215,215,0.75);
    }
    .message-date {
        display: inline-block;
        font-size: 0.8em;
    }
    .message-date span.actions {
        position: absolute;
        bottom: 0;
        right: 6px;
        z-index: 1;
        display: block;
        text-align: right;
        font-size: 1.2em;
    }
    .message-date span.actions a {
        display: inline-block;
        padding: 5px 2px 5px 2px;
    }
    .message-message {
        margin: 0 auto 10px auto;
        clear: both;
    }
    .message-message::before {
        top: auto;
        bottom: 100%;
        left: 204px;
        border-width: 15px;
        border-color: transparent;
        border-bottom-color: #D6DEE7;
        border-style: solid;
    }
 
    .message-message::after {
        top: auto;
        bottom: 100%;
        left: 205px;
        border-width: 14px;
        border-color: transparent;
        border-bottom-color: #ECEFFA;
        border-style: solid;
    }
}
/* --- Moderation des messages --- */
.message-moderate {
    margin-bottom: 10px;
    padding: 4px 0 4px 0;
    width: 98%;
    background-color: #ECEFFA;
    border: 1px solid #D6DEE7;
    border-radius: 4px;
    text-align: center;
    vertical-align: middle;
}
.message-moderate a {
    vertical-align: top;
}
i.message-announce,
i.message-announce-new,
i.message-announce-track {
    font-size: 1.6em;
}
i.message-announce {
    color: #D1D2D4;
}
i.message-announce-new {
    color: #4372AA;
}

L'affichage des messages et des commentaires est géré par les classes "message-"

Profil User


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


L'affichage dans le profil est réalisé sous forme de block.

La maintenance


Code CSS : 
#maintain {
    margin: 10px 0;
}
div.delay {
    margin: 20px 0;
}
#global.global-maintain {
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
}
div#message-maintain {
    position: absolute;
    top: 5px;
    width: 100%;
    opacity: 0.98;
    text-align: center;
}
div#message-maintain > div {
    margin: 0 auto;
}
div#release {
    margin-top: 20px;
}

Lorsque votre site est en maintenance, il est possible d'y appliquer un visuel spécifique. Il suffit d'utiliser la classe unique #maintain pour surcharger le code classique.

Le module contribution


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

Plusieurs pages du modules user permettent de gérer la modération et les contributions. Chaque page possède une classe CSS unique comme #module-user-modération-panel.

Error 403/404


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

Nous avons intégré depuis la version 5.0 un système de template pour les erreurs 403 et 404 afin de les personnaliser à votre goût.