Dans le panneau d'administration :

1. Créer la Boîte libre

1. onglet STRUCTURE
    
2. BOÎTES LIBRES

Les boîtes libres peuvent être placées partout

Les attributs généraux de toutes les boîtes latérales (y compris celles du blog) sont définis dans style.css à ces lignes :

.titrebox { /* Titre de la boîte latérale */
    background-color: transparent;
    border-width: 0;
    padding: 4px;
    white-space: nowrap;
    font: bold 15px Arial, Helvetica, sans-serif;
    color: #000;
    text-align: left;
}
.tblbox {  /* Corps de la boîte latérale */
    color:inherit;
    border-width: 0;
    padding: 4px;
    margin-bottom: 8px;
    text-align:left;
    background: transparent;
}
.tblboxover { /* Corps de la boîte survolé */
    background-color: transparent;
}
.tblboxout { /* Corps de la boîte qui a été survolé */
    background-color: transparent;
}
 

Pour personnaliser une boîte, copier les lignes suivantes dans le fichier style.css (n'oubliez pas de changer le numéro de la boîte !) :

.titrebox.TrFB79 { /*titre de la boîte dans une colonne latérale*/
   background: url(img/image.png) no-repeat;
   color: #fff;
   padding-top: 15px;
   height: 35px;
   text-align: center;
}
.tblbox.FB79 { /*corps de la boîte*/
   border-top: 1px solid #8ea2aa;
   border-left: 1px solid #8ea2aa;
   border-right: 1px solid #fff;
   border-bottom: 1px solid #fff;
   border-radius: 8px;
   margin-left: 9px;
   background: #e2ebee;
}
.tblbox.FB79 .box { /*texte entre le titre de la boîte et les items*/
   color: #800c3f;
   width: 98%;
   padding: 2px;
   background: #fff;
   border-radius: 8px;
}

il faudra donc indiquer :

.titre.TrFB79 { /*titre de la boîte en partie centrale*/
   background: url(img/image.png) no-repeat;
   color: #fff;
}
.tbl.FB79 { /*corps de la boîte*/
   border-top: 1px solid #8ea2aa;
   border-left: 1px solid #8ea2aa;
   border-right: 1px solid #fff;
   border-bottom: 1px solid #fff;
   border-radius: 8px;
   margin-left: 9px;
   background: #e2ebee;
}
.tbl.FB79 .box { /*texte entre le titre de la boîte et les items*/
   color: #800c3f;
   width: 98%;
   padding: 2px;
   background: #fff;
   border-radius: 8px;
}

Dans le cas où une même boite libre est présente dans 2 configurations de page, il est possible lui de donner une apparence différente pour chaque configuration.

Exemple :

• la boîte libre 79 est dans la configuration principale (0) et dans la configuration secondaire (1)
• elle est dans la colonne latérale gauche dans les 2 configurations
   

1. Pour l'apparence dans la configuration principale, suivre les indications de l'onglet style.css

2. Pour l'apparence dans la configuration secondaire (0), ajouter les lignes suivantes :

#LeftBoxes .L1fb79 .titrebox { /*titre boîte libre config 1*/
    background: #1e8fff;
}
.L1fb79 .tblbox, .L1fb79 .tblboxover { /*corps boîte libre config 1*/
    background: #ffcc00;
}

Pour les autres positions :

N'oubliez pas : Si la boîte libre est placée ailleurs que dans les boîtes latérales :

• .titrebox devient .titre
• .tblbox devient .tbl
• .tblboxover devient .tblover