Personnaliser un thème

Fichier default.css

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 12/07/2014 à 16h14
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. La Syndication
    11. Les flux RSS
    12. Le cas d'impression
    13. Les tableaux
    14. L'effet lightbox
    15. L'Effet blink sur les icones

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 public et sur l'ensemble des thèmes.

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: scroll; 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, input[type=radio], input[type=checkbox], .button, .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;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
 
/* Fix for chrome word-wrap ... */
fieldset { min-width: 0 !important; }
 
hr {
    background: #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; }


L'alignement


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; }
 
.float-left, img.left { float: left !important; }
.float-right, img.right { float: right !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: 0px 5px 0px 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 {
    width: 95%;
    margin: auto;
    margin-top: 20px;
}
 
.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: orange !important; outline: 3px solid orangered !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;
}


La Syndication


Code CSS : 
div.syndication-choices {
    position: absolute;
    width: 0px;
    height: 0px;
    visibility: hidden;
    overflow: visible;
    margin-top: 2px 0px 0px -20px;
}
 
div.syndication-choices ul {
    width: 90px;
    list-style-type: none;
    line-height: 18px;
}
div.syndication-choices ul li {
    height: 18px;
    margin-bottom: 1px;
}
 


Les flux RSS


Code CSS : 
ul.rss-feed { margin-left:20px; }
 
ul.rss-feed li { text-align: left; }


Le cas d'impression


Code CSS : 
@media print {
    * {
        background: transparent;
        color: #000000;
        text-shadow: none;
        box-shadow: none;
    }
}


Les tableaux


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


L'effet lightbox


Code CSS : 
#lightbox { 
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 103;
    text-align: center;
    line-height: 0;
}
#lightbox img {
    width: auto;
    height: auto;
}
#lightbox a img { border: none; }
 
#outerImageContainer { 
    position: relative;
    background-color: #FFFFFF;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}
#imageContainer { padding: 10px; }
 
#loading {
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}
 
#hoverNav { 
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}
 
#imageContainer>#hoverNav { left: 0;}
 
#hoverNav a { outline: none;}
 
#prevLink,
#nextLink {
    width: 49%;
    height: 100%;
    background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
    display: block;
}
 
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }
 
#imageDataContainer {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #FFFFFF;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%;
}
 
#imageData { 
    padding: 0 10px;
    color: #666666;
}
 
#imageData #imageDetails {
    width: 70%;
    float: left;
    text-align: left;
}
 
#imageData #caption { font-weight: bold; }
 
#imageData #numberDisplay {
    display: block;
    clear: left;
    padding-bottom: 1.0em;
}
 
#imageData #bottomNavClose {
    width: 66px;
    position: relative;
    float: right;
    padding-bottom: 0.7em;
    outline: none;
}      
 
#overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 102;
    width: 100%;
    height: 500px;
    background-color: #000000;
}



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