Un blog unique

La manière la plus simple est de Personnaliser mon thème,

mais lorsqu'on souhaite approfondir le css reste la seule option.

Parfois ça peu paraitre compliqué mais une fois qu'on a reperré

les mots clés, toutes les feuilles css se ressemblent.

Si vous souhaitez conserver les modifications effectuées grâce

à la rubrique "Personnaliser mon thème" et faire des modifications css,

suivez le pas à pas. 

{

body, html {padding: 0px; margin: 0px;}
#global {padding: 0px; margin: 0px auto; width: 950px;}
.ln {clear:both;}
.cl {float:left;}

/* modele */
#cl_0_0{width:100%; margin:0 0 15px 0;}
#cl_1_0{margin:0px; width:300px;}
#cl_1_1    {margin:0 0 0 10px; width:625px; padding:5px;}
#cl_2_0 {width:100%;}

#cl_0_0 {margin-bottom:15px;}
#cl_2_0 {margin:15px 0 0 0;}
.box {width:100%; overflow:hidden;}

/* common article struct  6 */
#cl_1_0 {margin-top: -15px;}
#cl_0_0 {margin-bottom: 0;}
.box {width: auto;}
#global {margin:20px auto;}/*----------------------------------------------------------------------------*/
/* Variation                                                                  */
/*----------------------------------------------------------------------------*/
/* default pink common screen */

/* @group colors */
body {
    background-color: #fafafa;       ----------------------------change la couleur du fond
    color: #787878;                          ----------------------------change la couleur d'écriture des articles,
                                                                                            des modules et des infos en bas des articles
}

a,
.box.presentation a,
.box.presentation li a,
.box .listAll a,
.box.concours a,
.titreArticle,
.infoExtrait,
.titreArticle,
.divTitreArticle h2,
.divPageTitle h2,
.titreExtrait a,
a.linkRecomm,
.presentation h3 a,
.listArticles a,
#miniGlobal h2,
.newWindow a,
.box a,
.box a:hover {
    color: #ff8d8f;     ----------------------------------------------change la couleur du titre des articles et les liens
}

.calendarToday1 {

}
.calendarToday1, .calendarToday1 a, .calendarToday1 a:hover {
    color: #ff8d8f;
}


a:hover,
.box.presentation a:hover,
.box.presentation li a:hover,
.box .listAll a:hover,
.box.concours a:hover,
.titreArticle:hover,
.presentation h3 a:hover,
.listArticles a:hover,
.titreArticle:hover,
.titreExtrait a:hover,
.newWindow a:hover,
a.linkRecomm:hover {
    color: #ff8d8f;        --------------------------------------------change la couleur du titre et des liens au passage de la souris
}

.article {
    border-bottom: 1px dotted #a7a7a7;   ----------------  change la couleur de la bordure de l'article
}

.date, box-titre {
    color: #ff8d8f;    -----------------------------------------------change la couleur de la date
}

.afterArticle, .plusExtrait {
    color: #bebebe;
}

.afterArticle a, .afterArticle a:visited {
    text-decoration: none;
}

/* @end */

.commentOption {
}

.concours a img {border: 0px; background: transparent; margin: 0px;}
.concours {padding-right: 0px;}

/* common screen */

/* @group general */

* {
    margin: 0;
    padding: 0;
    outline: none;
}

body {
    font: normal 62.5% Georgia, serif;
}

#global {
    background-repeat: repeat-x;
}

body, #miniGlobal {
}

img {
    border: 0;
}

a {
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

p {
    margin: .8em 0 .5em 0;
}

h1, h2, h3 {
    font-weight: normal;
}

textarea {
    margin: 5px 0;
}

legend {
    padding-left: 5px;
    padding-right: 5px;
}

/* @end */

/* @group header */

#header {
    font-size: 1.2em;
    border: 1px solid #ccc;   ------------------------------------change la couleur de la bordure exterieur du titre du blog
}                                                                                                    ou la suprime (en remplaçant solid par transparent

#top {
    text-align: center;
    padding: 20px;
    border: 1px solid #eee;   ---------------------------------- idem pour la bordure interieur
    margin: 5px;
}

#top h1 {
    padding: 0px;
    margin: 0px;
    font-size: 4em;
    letter-spacing: -1px;
}

#top a {
    text-decoration: none;
}



#top .box-content {
    padding: 0px;
    background: transparent;
    border: 0px none;
}

#top .box-titre {
    display: none;
}

#top .box-footer {
    display: none;
}

/* @end */

/* @group footer */

#footer p {
    margin: 0;
    padding: 0;
}

#footer .box-content {
    padding: 0px;
    background: transparent;
    border: 0px none;
}

#footer .box-titre {
    display: none;
}

#footer .box-footer {
    display: none;
}

/*

 @end */

/* @group content */

#ln_1 {
    padding: 0;
    background-repeat: repeat-y;
}

* html #ln_1{
    float:left;
}
*+html #ln_1 {
    float:left;
}

.box-content p {
    margin: 0;
    padding: 3px;
}

/* @end */

/* @group articles */

.article {                       
    margin-top: 5px;
    padding: 0 0 0 0;
    font-size: 1.2em;
    line-height: 1.4;
}


.contenuArticle, .extrait {
    padding: 0px 0px 5px 5px;
    margin: 0px;
    text-align: justify;
}

.extrait {
    font-size: 1.2em;
}

.date {
    text-transform: uppercase;
    font: 82%/1.4em 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;
    letter-spacing: .2em;
}

.dateExtrait .date {
    font-size: 100%;
}

.divTitreArticle h2 {
    padding: 0 0px 10px;
    font-size: 1.6em;
}

.divTitreArticle h2 a {
    text-decoration: none;
}

.titreExtrait {
    padding: 0 0px 10px;
    font-size: 1.3em;
    display: block;
    font-weight: normal;
}

.topic {

}

.topic a {
    text-transform: lowercase;
}

.contenuArticle img {
    border-style: solid;
    border-width: 1px;
    padding: 3px;
    background-color: #494949;
    border-color: #3A3A3A;
}

.contenuArticle img.GcheTexte {
    float: left;
    margin: 3px 10px 3px 0;
}

.beforeArticle {
    padding: 0;
    margin: 25px 0 0 0;
    width: 100%;
}

.cl ul {
    margin: 0;
    padding: 0;
}

.contenuArticle p {
    margin: 10px 0;
    padding: 0;
}

.contenuArticle ul {
    margin: 10px 15px;
    padding: 0;
}
.contenuArticle ol {
    margin: 10px 15px;
    padding: 0;
}

.contenuArticle ul li {
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: 0 4px;
}

.extraitArticle {
    margin-top: 10px;
    margin-bottom: 20px;
    border-bottom: 1px dotted #a7a7a7;
}

.hrExtrait {
    display: none;
}

.afterArticle, .plusExtrait {
    text-transform: uppercase;
    font: 82%/1.4em 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;
    margin: 0px;
    padding: 6px 0 2px 0;
    font-size: .95em;
    text-align: right;
}

.afterArticle a, .plusExtrait a {
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: normal;
    font-style: normal;
    margin-left: 5px;
}

.afterArticle a:hover, .plusExtrait a:hover {
    text-decoration: none;
}

.afterReactions {
    margin-top: 20px;
    padding: 2px 10px 2px 0px;
    font-size: 1.1em;
}

/* @end */

/* @group sidebar */

.box {
    font-size: 1.1em;
    line-height: 1.3;
    /*margin: 0 15px 10px 15px;*/
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px dotted;
}

.box.pub {
    padding-left: 0;
    padding-right: 0;
}

.box.pub .box-titre {

}

.box.pub .box-content h2 {
    font: 78%/1.4em 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;
}

.box.pub .box-content div div h2, .box.pub .box-content div div div {
    padding: 0 10px;
}

.box img {
    background: #FFF;
}

.box-titre h2 {
    padding-bottom: 5px;
    font: 1.4em 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;
    text-transform: uppercase;
}

.box li {
    list-style-type: none;
}

.box.articlerecent li,
.box.articlerecent li:hover,
.box.album li,
.box.album li:hover,
.box.categorie li,
.box.categorie li:hover,
.box.commentrecent li,
.box.commentrecent li:hover,
.box.archive li ,
.box.archive li:hover {
    display: block;
    padding: 2px 5px 5px 5px;
    text-decoration: none;
}

.box.articlerecent a,
.box.album a,
.box.categorie a,
.box.commentrecent a,
.box.archive a {
    text-decoration: none;
}

.box li a.newWindow {
    border: 0;
    display: inline;
    padding: 0;
}

.box-content ul {
    margin: 10px 0;
}

.box .box-footer {
    display: none;
}

.box.presentation {
    line-height: 1.4;
}

.box.presentation a, .box.presentation a:hover {
    text-decoration: underline;
    border: 0;
    padding: 0;
    background: none;
}

.box.presentation h3 {
    margin: 5px 0pt;
    text-transform: uppercase;
    font-size: 1.3em;
}

.box.presentation h3 a {
    text-decoration: none;
}

.listAll em {
    font-style: normal;
    text-transform: capitalize
}

.listAll a {
    text-decoration: underline;
}

/* calendrier */

.box.calendrier {
    padding-left: 0;
    padding-right: 0;
}

.box.calendrier .box-titre {
    padding-left: 15px;
    padding-right: 15px;
}

.calendarTable1 {
    width: 100%;
    font-size: .9em;
    padding: 0;
    margin: 0;
}

.calendarTable1 {
    padding: 0;
}

.calendarTable1 {
    background: transparent;
}

.calendarToday1, .calendarToday1 a, .calendarToday1 a:hover {
    color: #000;
}

.calendarTable1 table {
    width: 100%;
}

/* recommander */
.linkRecomm {
    text-transform: capitalize;
}

/* album */

.box.album .center, .box.aleaim .center {
    text-align: left !important;
}

/* syndication */

.w3c li a {
    border: 0;
    padding: 0;
}

.w3c li a:hover {
    background: transparent;
}

/* recherche */

.box.recherche input {
    padding: 1px;
}

/* @end */

/* @group comments */

.spanLinkComment {
    padding-left: 3px;
}

.commentContainer {
    border-bottom: 1px solid;
    margin-bottom: 10px;
}

.commentMessage {
    margin: 0 5px 0 5px;
}

.commentMessage {    ---------------------------------------  ici on modifie les commentaires
    font-size: 1.1em;
    line-height: 1.2em;
    border: 0;
}

.commentOption {
    text-align: right;
    margin-bottom: 5px;
    padding: 1px 0 2px 0;
}

.commentOption a {
    color: #9c9c9c;   --------------------------------------------- change la couleur du n° et de l'auteur du commentaire
}

.responseMessage, .responseOption {  ----------------  ici on modifie les réponses au commentaires
    margin-left: 20px;
}

h2.h2commentMessage {
    margin: 10px 0 5px 0;
    font-size: 16px;
    color: #FFF;   --------------------------------------------------change la couleur du titre "Commentaire"
}

.afterReactions .spanAddComment {
    font-size: 1.1em;
    text-transform: capitalize;
    font-weight: bold;
    padding: 3px 5px;
}

.afterReactions .spanAddComment a {
    text-decoration: none;
}

#miniGlobal {
    margin-top: -10px;
    font-size: 1.1em;
}

#miniGlobal .center {
    margin: 10px;
}

#miniGlobal h2 {
    font-size: 1.6em;
}

#img_key {
    vertical-align: middle;
}

/* @end

 */

/* @group list all */

.resumeArticle {
    margin-top: 5px;
}

.listArticles {
    font-size: 1.2em;
    line-height: 1.3em;
    padding: 10px 0;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.listArticles a, .listArticles a:hover {
    font-weight: bold;
    text-decoration: underline;
}

.listArticles a:hover {
    font-weight: bold;
    text-decoration: underline;
}

.listArticles a, .listArticles a:hover {
    font-size: 1em;
    font-weight: bold;
    text-decoration: underline;
}

/* @end */

/* @group misc */

#ln_2 {
    background-repeat: no-repeat;
}

#cl_1_1, #cl_1_2, #cl_1_0 {
    position: relative;
}

#cl_1_1, #cl_1_2, #cl_1_0 {
    margin-top: 30px;
    padding: 0;
}

#debug_hidden {
    display: none;
}

.GcheTexte {
    float: left;
    margin: 3px;
}

.DrteTexte {
    float: right;
    margin: 3px;
}

.CtreTexte {
    margin: 3px auto;
    display: block;
}

.hitcitation {
    font-style: italic;
    text-align: justify;
    padding: 5px 20px;
    background: transparent !important;
}

.hitencart {
    text-align: justify;
    font-weight: bold;
    margin: 5px 0px;
    padding: 5px 5px;
}

.hitimportant {
    font-weight: bold;
    font-weight: bold;
    font-size: 120%;
}

.hitperso1 {
    font-style: italic;
}

.hitperso2 {
    font-weight: bold;
}

#legals {
    padding: 20px 0;
}

/* @end */

/* @group list all */

.resumeArticle {
    background: transparent;
}

.listArticles {
    border-color: #3D3D3D;
}

/* @end */

/* @group pagination */

.pagination {
    margin-top: 10px;
    margin-bottom: 30px;
    font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;
}

.nextPage, .textNext, .previousPage, .textPrevious,.textLast,.textFirst {
    text-transform: uppercase;
    margin: 2px;
}

/* @end */

/* @group search */

.divTitleSearch h2 {
    color: #FFF;
    margin-bottom: 4px;
}

.divSearchConcepts {
    font-size: 12px;
    margin-bottom: 10px;
}

.divSearchConcepts h3, h3.searchResultsTitle {
    font: normal 12px Arial, Helvetica, sans-serif;
}


.searchResult {
    padding: 10px 0 0 0;
    font-size: 11px;
    color: #CCC;
}

.searchResult div {
    color: #FFF;
    font-size: 12px;
}

.searchResult h3, .divSearchResults h3 {
    font-size: 13px;
    margin-bottom: 4px;
}



.error {
border:2px dashed red;
color:red;
display:block;
font-weight:bold;
margin:3px;
padding:5px;
text-align:center;
}


.ok {
border:2px dashed #00CC99;
color:#00CC99;
display:block;
font-weight:bold;
margin:3px;
padding:5px;
text-align:center;
}
/* @end */


/*easyblog pink article 6*/

#ln_1 {
}

#top {
}

#header {

}

#ln_2 {

    padding:20px 0 5px 10px;
}


/* @group user */

body {

}

a {
}

#top {
}

#footer {

}

.box-titre {
    padding-bottom: 5px;
}

.beforeArticle {
    padding: 0;
    margin: 25px 0 0 0;
    width: 100%;
    text-align: right;
}

.beforePage {
    padding: 0;
    margin: 25px 0 0 0;
    width: 100%;
    text-align: right;
}

.article {
    margin-top: 5px;
    padding: 0 0 0 0;
    font-size: 1.2em;
    line-height: 1.3;
}
.contenuArticle {
    padding: 0px 0px 5px 5px;
    margin: 0px;
    text-align: justify;   --------------------------------------------ici on modifie le contenu de l'article
}

.page {
    margin-top: 5px;
    padding: 0 0 0 0;
    font-size: 1.2em;
    line-height: 1.3;
}
.date {

}

.titreArticle {

}

.box-content {

}

.box {
}

.commentMessage {

}

.commentOption {
}

.extraitArticle {

}

.dateExtrait {

}

.extrait {

}

.plusExtrait {

}

/* @end */
--------------------------------------------------------------------- ici on ajoute les lignes de modifications qui n'éxiste pas sur la page

}

Pour les débutants voici un décryptage des pages css

pour les thèmes prédéfinis :

Easyblog:

Les couleurs sont en code hexadécimale (ex : # ffff), plusieurs générateurs

de couleurs vous aideront à trouver les bon codes.

En mode classique les modifications se font une fois mais en

mode avancé elles doivent être faite sur les pages acceuil, article, et page.

Cet article est long à mettre en oeuvre et des mises à jours seront

faites régulièrement. Je peux décripter votre css à la demande.

Mes sources sont multiples et une bonne partie de ma petite expérience.