22 mars 2013

Ajouter un séparateur d'articles

Je vous avais proposé il y a longtemps (le 22 décembre 2009) une astuce permettant d'insérer une image à la fin de chaque article (voir Un séparateur d'articles). On peut bien sûr obtenir le même résultat en modifiant le HTML mais c'est plus ardu et surtout pourquoi se priver d'utiliser un moyen simple : modifier quelques lignes de la feuille de style (en mode avancé). Cette astuce est devenue pratiquement obsolète avec la possibilité d'ajouter ou non "une barre de partage en fin de message" et/ou "une barre de vote à la fin de... [Lire la suite]
Posté par Michal53 à 10:02 - - Permalien [#]
Tags : , , , , , , , ,

09 février 2010

Structure des pages d'accueil et d'archives

Voici un schéma représentant la structure de ces pages. Chaque zone de couleur figure un sélecteur de la feuille de style. L'emboîtement de ces zones de couleur en indique la hiérarchie.  
Posté par Michal53 à 09:50 - - Permalien [#]
Tags : , , , ,
28 janvier 2010

Deux colonnes à gauche

Pour afficher les deux colonnes latérales à gauche de la colonne des articles, il faut juste s'atteler à un petit calcul.   On ajoute la propriété margin-left aux sélecteurs content et rightbar. Pour content la valeur de margin-left sera égale à la largeur (width) de rightbar. Pour rightbar la valeur de margin-left sera égale à la somme des largeurs de content et rightbar précédée du signe "moins". Exemple : #content {           float: left;           width : 340px;... [Lire la suite]
Posté par Michal53 à 10:19 - - Permalien [#]
Tags : , , , , , ,
28 janvier 2010

Deux colonnes à droite

La disposition classique d'un modèle comportant trois colonnes veut que les colonnes latérales de menu soient disposées de chaque côté de la colonne des articles. Comme il est possible de le voir dans certains modèles présentés dans ce blog, on peut regrouper ces colonnes à droite sans rien modifier dans les pages HTML. un exemple de dispositiondes colonnes latérales La marche à suivre ne nécessite qu'une seule modification : On fait passer la colonne de gauche (leftbar) tout à droite en changeant simplement la valeur de la... [Lire la suite]
Posté par Michal53 à 10:18 - - Permalien [#]
Tags : , , , , , ,
22 janvier 2010

Une image de fond pour les commentaires

Il peut être intéressant d'insérer les commentaires des articles dans une image de fond. exemple de commentaires avec image de fond La méthode employée est pratiquement la même que pour afficher un séparateur d'articles (voir cet article). La différence réside dans l'image qui sera utilisée. Elle devra avoir une hauteur plus importante que nécessaire pour répondre à tous les besoins, en particulier lorsqu'il y a beaucoup de tags et donc plusieurs lignes. l'image de fond D'autre part, puisque la hauteur est variable il ne faudra... [Lire la suite]
Posté par Michal53 à 09:19 - - Permalien [#]
Tags : , , , , , ,
19 janvier 2010

Titre et date dans une même image de fond

Le titre et la date d'un article peuvent avoir chacun une image de fond. On peut aussi les afficher ensemble dans une même image. exemple d'une seule image de fondpour la date et le titre d'un article   Voici la marche à suivre : 1- Créer une image suffisamment haute et de la largeur voulue. Pour connaître cette dernière il suffit de faire une petite soustraction avec les propriétés width (largeur) de content et padding (marge intérieure) de blogbody : #content {           width: 650px; }... [Lire la suite]
Posté par Michal53 à 08:56 - - Permalien [#]
Tags : , , , , , , ,


11 janvier 2010

Afficher des puces dans les sous-menus

Le sélecteur correspondant à l'affichage des puces dans les sous-menus est navlinks ul. Par défaut, il est réglé pour ne rien (none) afficher : .navlinks ul {           list-style-type: none; } On peut facilement afficher de petites images en remplaçant simplement la valeur none par : disc pour un disque plein, circle pour un disque creux ou square pour un carré. On peut en afficher d'autres en remplaçant list-style-type par list-style-image. Exemple : .navlinks ul {        ... [Lire la suite]
Posté par Michal53 à 09:30 - - Permalien [#]
Tags : , , , , , ,
07 janvier 2010

Afficher les sous-menus dans un cartouche

La présentation des sous-menus latéraux peut être agréablement personnalisée par l'ajout d'un cartouche. sans cartouche avec cartouche Voici la procédure à suivre : 1- Créer une image complète du cartouche à la bonne largeur (voir cet article). Elle doit être assez longue dans le sens de la hauteur, plus que ce qu'on en verra : 2- La diviser en deux images raccordables, l'une pour le titre :  image-titre et l'autre pour la liste :  image-liste 3- Ajouter les indications d'insertion d'image dans... [Lire la suite]
Posté par Michal53 à 09:41 - - Permalien [#]
Tags : , , , , ,
31 décembre 2009

Une image de fond pour le titre ou la date des articles

On peut personnaliser le titre ou la date des articles de différentes façons. Avec un fond :     Ou avec une image en début de ligne :     Dans les deux cas, le sélecteur concerné est "blogbody h3" pour le titre des articles et "blogbody h2" pour la date. * ** 1- S'il s'agit d'un fond représentant une bande de couleur avec un dégradé, il suffit de créer une image de quelques pixels de large (ou même d'un seul pixel !) : Puis d'ajouter dans le sélecteur : .blogbody h3 {     ... [Lire la suite]
Posté par Michal53 à 08:49 - - Permalien [#]
Tags : , , , , , , , ,
29 décembre 2009

Une image de fond pour les titres du menu

Il peut être intéressant de mettre en valeur les titres du menu latéral. Ajouter une image de fond est une solution facile à mettre en place. sans image de fond avec image de fond Voici les étapes de mise en place d'une image dans les titres du menu latéral. 1- Déterminer la largeur exacte de l'image. Deux sélecteurs permettent de la calculer, leftbar (ou rightbar) qui donne la largeur de la colonne et navlinks qui donne la largeur de la marge intérieure : #leftbar {        ... [Lire la suite]
Posté par Michal53 à 09:13 - - Permalien [#]
Tags : , , , , , ,


  1  2  3  4  5    Fin »