REDUIRE LA LARGEUR DES CADRES DES TITRES DE VOS MESSAGES ET DE VOS BLOCS

14 octobre 2008

REDUIRE LA LARGEUR DES CADRES DES TITRES DE VOS MESSAGES ET DE VOS BLOCS

A la demande de Sylpo (Tiens...ça faisait longtemps) voici comment réduire la largeur des cadres qui entourent le titre de vos messages, le titre de vos blocs ou encore la date...

Sans_titre_4

Car lorsque l'on ajoute des border...dans les blocs correspondants, les cadres font toute la largeur de la colonne ou bien toute la largeur de la page centrale des messages (#Content).

Si l'on veux ajuster ces cadres, il faut faire comme ceci :

Commencez par enlever les border que vous avez dans le bloc qui correspond, par exemple pour les blocs comme Albums photos, Derniers messages etc...c'est ce bloc là :

.navlinks .title {
font-family: 'Trebuchet MS', Verdana, sans-serif;
color: #CC0000;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
text-align: left;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 0px;
border-color: #FFFFFF;
padding: 0px;
}

Les lignes en rouges permettent d'afficher le cadre, passez tout simplement le border-width à 0px.

Pour le titre de vos messages c'est le bloc .blogbody h3 { et pour la date c'est celui là .blogbody h2 {passez également le border-width à 0px.

Voilà, nos anciens cadres ont disparu, nous allons pouvoir installer les nouveaux.

Ouvrez votre feuille de style, puis ajoutez bloc suivant :

.message tbody td {
width: 230px;
border: 2px #FFFFFF solid;
}

Tel qu'il est renseigné votre cadre sera blanc, avec une épaisseur de 2px et il sera large de 230px.
La valeur de width est à changer en fonction de la taille désirée pour vos cadres.

Pour encadrer le titre de vos messages, ouvrez votre page d'accueil et descendez sur cette ligne de code (Ctrl+F pour lancer une recherche dans la page):

Il faut entourer cette ligne avec les codes suivants en rouges pour obtenir ceci :

Si vous visualisez votre cadre est en place, mais vous devez retourner dans la feuille de style pour régler la largeur (width).

Pour la date le principe est le même, sauf que vous devez entourer cette ligne :

<h2><$BlogDateHeaderDate$></h2>

Comme ceci :

Par contre si vous voulez donner une largeur différente, vous devez créer un nouveau bloc identique au premier mais en ajoutant un 1 comme ceci :

.message1 tbody td {
width: 300px;
border: 2px #FFFFFF solid;
}

Dans ce cas vous devez également ajouter le 1 dans le code de la page d'accueil :

Même chose pour le titre de vos blocs...vous ajoutez un troisième bloc dans la feuille de style, en ajoutant un 2 :

.message2 tbody td {
width: 180px;
border: 2px #FFFFFF solid;
}

Pensez à mettre le width à 180px car les colonnes font souvent 200px.

Dans la page d'accueil, repérez tous les codes comme ceci, ce sont les titres de vos blocs :

<div class="title">Albums photos</div> , <div class="title">Derniers messages</div>, <div class="title">Catégories</div>...

Etc...et ajoutez les codes de la même façon :

<table class="message2">
<tbody>
<td>
<div class="title">Albums photos</div>
</td>
</tbody>
</table>

Voilà, pour tout ce que vous voulez encadrer il faut ajouter un bloc avec un numéro différent pour les cadres de différentes largeurs dans votre feuille de style, et placer ensuite les balises (<table class="message ">...</table>) pour afficher le cadre autour de la bonne balise dans vos pages...
Pensez à faire de même dans la page des archives et celle d'un message.

Voici ce que ça donne :

Sans_titre_5

Pour obtenir un cadre comme celui ci-dessous, il faut modifier le bloc .navlinks .title qui gère les catégories, comme Albums photos, Derniers messages, Derniers commentaires etc...

Sans_titre_4

Il faut modifier le bloc, pour centrer le titre dans le cadre en mettant center et aussi modifier le padding sur 10px pour agrandir le cadre.

.navlinks .title {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCC;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 10px;
}

Pour mettre en forme le cadre de la date vous devez modifier ce bloc :

.blogbody h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #999;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-bottom: 10px;
padding: 10px;
}

Pour le titre des messages c'est celui là :

.blogbody h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCC;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: center;
margin-bottom: 10px;
margin: 0px;
padding: 10px;
}

Voilou...

Posté par Demolite à 08:00 - Commentaires […] - Permalien [#]

Tags: cadre, Blocs, titre, date, largeur