Personnaliser un thème

Fichier default.css

Dernière mise à jour : 05/03/2016 à 15h57
Table des matières
  1. Introduction
  2. Le fichier default.css
  3. Le contenu
    1. Les resets
    2. L'alignement
    3. la mise en forme du texte
    4. La gestion des images
    5. Les champs de formulaire
    6. L'opacité
    7. La pagination
    8. Les erreurs et le debug
    9. La prévisualisation
    10. Les tableaux
    11. L'effet blink
    12. L'effet lightbox

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





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


L'effet lightbox


Code CSS : 
/*
 * Lightcase - jQuery Plugin
 * The smart and flexible Lightbox Plugin.
 *
 * @author        Cornel Boppart <cornel@bopp-art.com>
 * @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 <ul>, <li>, <span> 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 <ul>, <li>, <span> 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;
}
Cette page a été vue 8641 fois