TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION
SERVICES
JQUERY
EN VRAC
EXEMPLES
En ce moment...

 107582 visiteurs

 2 visiteurs en ligne

 Il est maintenant possible de créer des boîtes libres à volonté ! smile

  • Mise en place
  • style.css
  • configuration secondaire

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

emplacements1.png

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

NOTE : si vous placez une boîte d'articles dans l'entête, le pied-de-page, dans l'éditorial, au-dessus ou en-dessous, celle-ci est considérée comme une boîte centrale, ce qui modifie le style

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

#LeftBoxes colonne latérale gauche
.L1 colonne latérale gauche de la configuration 1
fb79 boîte libre 79

Pour les autres positions :

Boîtes Latérales

Dans
l'entête

Dans le
pied de page

Au-dessus

En-dessous

Page d'accueil
(CONFIG ACCUEIL)

Gauche

Droite

Configuration 1

L1 R1 T1 B1 A1 U1 E1

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

Mots-clés associés

Date de création : 01/07/2013 11:58
Dernière modification : 01/07/2013 21:40
Page lue 5712 fois


Vous êtes ici :   Accueil » Boîte libre