Le style de GuppY - Blocs - 2. Corps principal

GÉNÉRAL

Outils
- Webdevelopper
Structure

INDEX

Blocs

Boîtes latérales

Menu Extra (Ajoute-menu)

Ordre alphabétique

Trucs et astuces

Lien dans titre d'article

À noter

Calendrier

Préférences

Se reconnecter
---

40 membres

Connectés :

( personne )

Visites

118324 visiteurs

6 visiteurs en ligne

Blocs - 2. Corps principal

Cet article est disponible en format standard RSS pour publication sur votre site web:
http://cssguppy.astrographisme.com/data/artfr.xml

Les attributs du corps principal sont définis par l'ID #mainContent

Marges internes	padding	3px	voir les possibilités ici
Marges extérieures (entre l’entête et le bas de page)	margin	4px	voir les possibilités ici
Couleur de fond	background	#000000
Image de fond	background	url(image.png)

#mainContent {
background : #FFFFFF;
margin: 0px 0px;
padding: 0;
}

Dans le corps principal se trouvent :

Les boîtes latérales - La boîte principale - Les boîtes optionnelles

Boîtes latérales

Les ID #leftside et #rightside permettent de donner des attributs aux rangées gauche et droite des boîtes latérales. Il peut donc y avoir une couleur ou une image pour la rangée de boîtes et une couleur ou une image différente pour les boîtes en tant que telles... à l'intérieur de la rangée (vous suivez ? rolleyes

)

Cependant, comme le navigateur Internet Explorer mad

ne reconnaît pas l'attribut "transparent", la couleur ou l'image choisie comme fond de rangée sera caché par la couleur de la boîte et ne sera visible que dans l'espace entre 2 boîtes.

#leftside et #rightside permettent aussi de définir les marges intérieures (padding) et extérieures (margin).

#leftside {
margin: 0;
padding : 4px;
}
#rightside {
margin: 0;
padding : 4px;
}

On peut donner des attributs différents aux boîtes de gauche et de droite (voir le message sur le forum)

C'est ici qu'on peut définir la couleur des liens pour les boîtes latérales (merci Méric ! smile ) et la couleur des liens peut être différente pour la rangée gauche et la rangée droite :

#leftside a { /*couleur du lien*/
color : #800000;
}

#leftside a:hover { /*couleur du lien survolé*/
color : #00C000;
}

#rightside a {
color : #1E8FFF;
}

#rightside a:hover {
color : #F58309;
}

La définition des attributs des boîtes latérales en tant que telles se fait avec les classes .titrebox (titre de la boîte) et .tblbox (corps de la boîte)

.titrebox {
font: bold 13px Arial, Helvetica, sans-serif;
color: #1E8FFF;
text-align: center;
width: 187px;
height: 35px;
padding-top: 6px;
margin-bottom: 3px;
}
.tblbox {
color: #000000;
text-align: left;
margin-bottom: 8px;
padding : 0px;
}

EXEMPLES

Il n'y a pas d'images, les attributs se définissent dans la feuille de style

.titrebox {
font: bold 13px Arial, Helvetica, sans-serif;
color: #00C000;
background : #C0FFC0;
text-align: left;
width: 168px;
height: 18px;
padding: 4px;
margin-bottom: 3px;
}
.tblbox {
color: #000000;
text-align: left;
border-top : 1px solid #40FF40;
border-left : 1px solid #40FF40;
border-right : 1px solid #40FF40;
border-bottom : 1px solid #40FF40;
margin-bottom: 8px;
padding : 2px;
}

Image en fond de boîte	Ce que ça donne	Dans style.css
fondlat.png	cliquer sur l'image pour une vue plus globale	.titrebox { font: bold 12px arial, helvetica, sans-serif; color: #8A642B; text-align : left; white-space: nowrap; padding-top: 10px; } .tblbox { background : url(fondlat.png); text-align: left; margin-bottom: 8px; padding: 0px; }

Images de fond	Ce que ça donne	Dans style.css
lhb.png latérale haut de boîte lcb.png latérale centre de boîte lbb.png latérale bas de boîte	cliquer sur l'image pour une vue plus globale	.titrebox { font: bold 13px Arial, Helvetica, sans-serif; color: #000000; text-align: left; width: 182px; height: 22px; padding: 4px; margin-bottom: 0px; } .tblbox { color: #425865; text-align: left; margin-bottom: 8px; padding : 2px; }

Attention, il faut également modifier le fichier skin.inc pour les 3 images (lhb.png, lcb.png et lbb.png) comme ci-dessous :

Dans le fichier skin.inc, les boîtes latérales sont définies par :
- htable1 (haut et centre des boîtes)
- btable1 (bas des boîtes)

Pour mettre les 3 images, il faut mettre ceci dans le fichier skin.inc :

function htable1($tblti) {
global $texte,$meskin;
echo "<table class="htable1" cellspacing="0" cellpadding="0" align="center" width="178">n";
echo "<tr><td align="center" class="titrebox" height="30" style="background-image:url(".$meskin."lhb.png)">".$tblti."</td></tr>n";
echo "<tr><td class="tblbox" style="padding-left: 7px; padding-right: 7px; border-right: #E6B800 0px solid; border-left: #E6B800 0px solid; border-TOP: #FFFFFF 0px solid; background-image:url(".$meskin."lcb.png)">nn";
}

function btable1() {
global $meskin;
echo "n</td></tr>n";
echo "<tr><td style="background-image:url(".$meskin."lbb.png)" height="10"></td></tr></table>nn";
}

width="178" ► largeur de la boîte latérale (et de l'image)

height="30 ► hauteur de l'image du titre de la boîte latérale

height="10" ► hauteur de l'image du bas de la boîte latérale

Pour les textes des boîtes latérales, les attributs sont définis ailleurs :

Boîtes d'articles 1 et 2 :

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

Pour les autres boîtes (visites, devinette, sondage, boîtes libres, etc... et plugin Ajoute-menu) :

.box {
font: 11px Arial, Helvetica, sans-serif;
color: #425865;
padding : 4px;
}
p.box {
font: 11px Arial, Helvetica, sans-serif;
color: #425865;
padding : 4px;
margin: 0;
}
a.box {
font: 11px Arial, Helvetica, sans-serif;
color: #800000;
text-decoration: none;
}
a.box:hover {
font: bold 11px Arial, Helvetica, sans-serif;
color: #153A71;
text-decoration: none;
position: relative;
top: 1px;
left: 1px;
}

haut

Boîte principale

La définition des attributs des boîtes principales se fait avec les classes .titre (titre de la boîte) et .tbl (corps de la boîte)

Exemples :

Pas d'images, les attributs se définissent dans le fichier style.css

.titre {
font: bold 16px Arial, Helvetica, sans-serif;
color: #008000;
background-color : #FFFF40;
background-image : url(titre.png);
white-space: nowrap;
text-align: left;
padding: 0 5px 0 5px;
}

Note : on peut aussi mettre une image en fond de titre

.tbl {
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background-color : #FFFFFF;
border : 1px solid #FFFF80;
text-align: left;
margin-bottom: 8px;
padding: 4px;
}
div ul, ol { /* listes */
margin-left: 16px;
padding: 8px 0 8px 8px;
}
div li {
margin-left: 12px;
padding: 0;
}

Attributs dans style.css + images dans skin.inc

Dans style.css :

.titre {
font: bold 16px arial, helvetica, sans-serif;
color: #C00000;
white-space: nowrap;
text-align: left;
padding: 0 5px 0 5px;
}
.tbl {
font: 12px arial, helvetica, sans-serif;
color: #8A642B;
margin-bottom: 8px;
padding: 4px;
}
div ul, ol { /* listes */
margin-left: 16px;
padding: 8px 0 8px 8px;
}
div li {
margin-left: 12px;
padding: 0;
}

Dans skin.inc, la boîte principale est définie par htable et btable. Dans le fichier, il faut donc indiquer ceci :

function htable($tblti, $largeur) {
global $meskin, $bg_title;
?>
<table cellspacing="0" cellpadding="0" align="center" width="100%" border="0">
<tr>
   <td><img src="<? _fcksavedurl=""<?" _fcksavedurl=""<?" _fcksavedurl=""<?" _fcksavedurl=""<?" _fcksavedurl=""<?" echo $meskin; ?>chg.png" width="52" height="55" border="0" alt=" "></td>
   <td nowrap class="tbl1" width="100%" height="55" style="background-image: url(<? echo $meskin; ?>chc.png);">
   <div class="titre" align="center";style="position:absolute;margin:-20px"><b><? echo $tblti; ?></b></div></td>
   <td><img src="<? echo $meskin; ?>chd.png" width="83" height="55" border="0" alt=" "></td></tr>
<tr>
   <td style="background-image: url(<? echo $meskin; ?>cg.png)"></td>
   <td class="tblbox" width="100%" height="100%" style="background-image: url(<? echo $meskin; ?>cfc.png);">
<?php
}

function btable() {
global $meskin;
?>
   </td>
   <td style="background-image: url(<? echo $meskin; ?>cd.png)"></td></tr>
<tr>
   <td><img src="<? echo $meskin; ?>cbg.png" width="52" height="70" border="0" alt=" "></td>
   <td nowrap class="tbl1" width="100%" height="70" style="background-image: url(<? echo $meskin; ?>cbc.png);"></td>
   <td><img src="<? echo $meskin; ?>cbd.png" width="83" height="70" border="0" alt=" "></td></tr>
</table> 
<?php
}

La largeur de chaque image est définie par width

La hauteur de chaque image est définie par height

Les images sont :

chg.png Centrale haut gauche	chc.png Centrale haut centre	chd.png Centrale haut droit
cg.png Côté gauche	cfc.png Couleur fond central	cd.png Côté droit
cbg.png Centrale bas gauche	cbc.png Centrale bas centre	cbd.png Centrale bas droit

haut

Boîtes optionnelles

Les boîtes optionnelles dans la colonne du milieu ont les mêmes attributs de texte que les boîtes latérales et les mêmes attributs de boîte que la boîte principale.

haut

Date de création : 06/10/2007 @ 22:33
Dernière modification : 17/06/2008 @ 16:30
Catégorie : Blocs
Page lue 5541 fois

Prévisualiser Imprimer l'article

Un jour à la fois ! (Inconnu)

Haut