TUTO SKINS

Centre d'Aide GuppY


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

 107655 visiteurs

 1 visiteur en ligne

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

  • Mise en place
  • style.css
  • Items de la boîte
  • Configuration secondaire

Dans le panneau d'administration :

1. Créer la Boîte Menu

  1. onglet STRUCTURE
  2. BOÎTES MENU
  3. Créer une boîte menu

2. Écrire l'article

  1. onglet ADMINISTRATION DES DONNÉES
  2. ARTICLES
  3. On peut maintenant créer un article sans catégorie
  4. N'oubliez pas de sélectionner la configuration

3. Quand l'article est prêt à être publié

  1. Aller dans STRUCTURE - OPTIONS DE MENU
  2. Sélectionner la boîte
  3. Activer l'option correspondant à l'article (à droite)

4. Précisions

  1. Une fois que l'article est enregistré, une OPTION MENU est créée.
     
  2. Si vous décidez de faire des modifications (dans le titre, la catégorie, la configuration, la boîte) :
    elles doivent être faites dans l'option menu.
     
  3. Quand vous modifiez un article, si vous souhaitez mettre à jour la date de modification, pensez à décocher (en haut) "Ne pas modifier la date de mise à jour".
     
  4. Vous pouvez également créer une option menu sans écrire d'article, en indiquant un lien vers une autre page du site ou un site extérieur. Ainsi, ce lien sera intégré à votre boîte d'articles.
     
    1. onglet STRUCTURE
    2. OPTIONS DE MENU
       
  5. Une lettre majuscule prime sur l'ordre alphabétique ou numérique. Par exemple :

article.png

Pour conserver l'ordre que vous voulez, vous pouvez indiquer, au début du titre de l'article (sans espace) :

(<)!--01--> article 1

(<)!--02-->Article 2

Les boîtes menu peuvent être placées partout sauf dans l'éditorial

emplacements2.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.TrMNU79 { /*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.MNU79 { /*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.MNU79 .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, au-dessus ou en-dessous, celle-ci est considérée comme une boîte centrale et prend donc les attributs des boîtes centrales.

Pour conserver le même style en position latérale ou centrale, il faudra donc ajouter ces lignes :

.titre.TrMNU79 { /*titre de la boîte en partie centrale*/
   background: url(img/image.png) no-repeat;
   color: #fff;
   padding-top: 15px;
   height: 35px;
   text-align: center;
}
.tbl.MNU79 { /*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.MNU79 .box { /*texte entre le titre de la boîte et les items*/
   color: #800c3f;
   width: 98%;
   padding: 2px;
   background: #fff;
   border-radius: 8px;
}

Les attributs généraux de la liste des articles sont définis dans style.css à ces lignes :

/******** block box lateral Article (menu list, menu dynamic 1, menu dynamic 2) */


.rubr { /* catégories des articles */
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #961649;
    background-color: inherit;
    text-align: left;
    margin: 1px;
    padding: 4px 2px;
}
p.rubr { /*texte des catégories*/
    padding: 0 2px;
    margin: 1px;
    font: inherit;
    color: #961649;
    background-color: inherit;
    text-align: left;
}
.item { /*article*/
    font: 12px Arial, Helvetica, sans-serif;
    color: #404040;
    background-color: inherit;
    text-align: left;
    list-style: none;
    margin: 0;
    padding: 2px 0;
}
ul.item {
    margin: 0;
    padding: 0;
}
ul.item li.item { /* titres des articles */
    font: 12px Arial, Helvetica, sans-serif;
    color: #404040;
    background-color: inherit;
    text-align: left;
    list-style: none;
    padding: 2px 0 2px 10px;
}
.curr_item { /*article affiché*/
    font: 12px Arial, Helvetica, sans-serif;
    color: #404040;
    background-color: inherit;
    text-align: left;
    list-style: none;
    padding: 2px 0;
}
ul.item li.curr_item a { /* titre article affiché */
    font: 12px Arial, Helvetica, sans-serif;
    color: #404040;
    background-color: inherit;
    text-align: left;
    list-style: none;

     padding: 2px 0 2px 10px;
}
/************************************/

Pour donner des attributs différents dans une boîte d'articles en particulier, il est nécessaire de spécifier le numéro de la boîte, donc ajouter les lignes correspondantes dans le fichier style.css (n'oubliez pas de modifier le numéro de la boîte !) :

.MNU79 .rubr { /* catégories des articles */
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #961649;
    background-color: inherit;
}
.MNU79 p.rubr { /*texte des catégories*/
    font: inherit;
    color: #961649;
}
.MNU79 .item { /*article*/
    font: 12px Arial, Helvetica, sans-serif;
    color: #404040;
    background-color: inherit;
}
.MNU79 ul.item {
    margin: 0;
    padding: 0;
}
.MNU79 ul.item li.item { /* titres des articles */
    font: 12px Arial, Helvetica, sans-serif;
    color: #404040;
    background-color: inherit;
}
.MNU79 .curr_item { /*article affiché*/
    font: 12px Arial, Helvetica, sans-serif;
    color: #404040;
    background-color: inherit;
}
.MNU79 ul.item li.curr_item a { /* titre article affiché */
    font: 12px Arial, Helvetica, sans-serif;
    color: #404040;
    background-color: inherit;

}
/************************************/

Dans le cas où une même boite menu 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 menu 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 de la configuration principale, suivre les indications de l'onglet style.css

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

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

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

Pour les autres positions :

Boîtes Latérales

Dans
l'entête

Dans le
pied de page

Au-dessus

En-dessous

Gauche

Droite

Configuration 1

L1 R1 T1 B1 A1 U1

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

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

Si vous devez également modifier la couleur des items de la boîte, ajoutez les lignes suivantes :

.L1mb79 .rubr { /* catégories des articles */
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #961649;
    background-color: #f2f2f2;
}
.L1mb79 p.rubr {
    color: #961649;
    background-color: #f2f2f2;
}
.L1mb79 .item {
    font: 12px Arial, Helvetica, sans-serif;
    color: #404040;
    background-color: inherit;
}
.L1mb79 ul.item li.item a { /* titres des articles */
    font: 12px Arial, Helvetica, sans-serif;
    color: #fff;
    background-color: inherit;
}
.L1mb79 .curr_item {
    font: 12px Arial, Helvetica, sans-serif;
    color: #fff;
    background-color: inherit;

}
.L1mb79 ul.item li.curr_item a { /* titre article est affiché */
    font: 12px Arial, Helvetica, sans-serif;
    color: #404040;
    background-color: #fff;
}

Mots-clés associés

Date de création : 01/07/2013 09:18
Dernière modification : 17/08/2013 17:47
Page lue 7183 fois


Vous êtes ici :   Accueil » Boîte menu (articles)