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 : , , , , , ,

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 : , , , , , ,
22 décembre 2009

Un séparateur d'articles

Cet article est devenu obsolète avec les modifications apportées par Canalblog fin 2012. Reportez-vous plutôt à l'article "Ajouter un séparateur d'articles" qui propose une astuce bien plus souple. Il peut être intéressant de séparer les articles autrement qu'avec un simple trait. On peut afficher une petite image qui va davantage personnaliser le blog. C'est sous les commentaires que l'on va l'insérer. Le sélecteur correspondant aux commentaires est "blogbody .itemfooter". La hauteur de cette zone dépend de la fonte, de sa taille et... [Lire la suite]
Posté par Michal53 à 09:49 - - Permalien [#]
Tags : , , , , , , ,
21 décembre 2009

Une image de fond dans le calendrier

Lorsqu'on insère une image dans un élément au moyen de la propriété "background", il n'est pas possible de spécifier des dimensions qui la réduiraient ou l'agrandiraient. L'image prend automatiquement ses dimensions propres. Si elle est trop grande, une partie seulement s'affiche, si elle est trop petite, elle est répétée pour occuper tout l'espace qui lui est réservé. Il faut donc connaître les dimensions qui lui sont assignées. 1 - Les sélecteurs et propriétés qui déterminent la largeur du calendrier : - la largeur de la colonne :... [Lire la suite]
Posté par Michal53 à 10:20 - - Permalien [#]
Tags : , , , , , ,
11 décembre 2009

Des images de fond

Quelques sélecteurs de la page d'accueil et de la page des archives qui peuvent intégrer (de façon intéressante) un fond (surface ou image). On peut donc y ajouter la propriété "background" : body (corps de la page) container (conteneur principal) content (conteneur des articles) leftbar (colonne de menu de gauche) rightbar (colonne de menu de droite) topbar-logo (bandeau supérieur) topbar (bandeau supérieur) blogbody h2 (date des articles) :   blogbody h3 (titre des articles) :   blogbody .itemfooter (infra... [Lire la suite]
Posté par Michal53 à 09:38 - - Permalien [#]
Tags : , , , , , ,

10 décembre 2009

Des fonds transparents

Si l'on choisit d'afficher une image en fond de page, le texte risque de ne pas apparaître avec suffisamment de relief.   Par ailleurs une surface améliorant la lisibilité du texte cacherait une grande partie de l'image.   Une astuce simple permet de concilier ces deux impératifs.   Il suffit de créer à l'aide d'un logiciel de graphisme une surface colorée transparente et carrée d'environ 100 pixels de côté. Cette image sera ensuite sauvegardée au format png. copie d'écran Paint.Net V3.5   L'image... [Lire la suite]
Posté par Michal53 à 12:54 - - Permalien [#]
Tags : , , , ,
07 décembre 2009

Le bandeau supérieur (3)

Deux images dans le bandeau supérieur du blog. On peut donc les placer l'une au-dessus de l'autre mais aussi l'une à côté de l'autre. Il suffit d'ajouter la propriété "float" avec pour valeur "left" à chacun des deux sélecteurs "topbar-logo" et "topbar". De plus il faudra indiquer la largeur que doit occuper chaque image, soit en pixels soit en pourcentage. illustration : #topbar-logo {           display: block;           background: url(URL de l'image);     ... [Lire la suite]
Posté par Michal53 à 09:00 - - Permalien [#]
Tags : , , , , , ,
06 décembre 2009

Le bandeau supérieur (2)

Il est tout à fait possible d'afficher deux images l'une au-dessus de l'autre dans le bandeau supérieur du blog (ou une image et un rectangle de couleur). Pour cela il faudra provoquer l'affichage de "topbar-logo" et de "topbar", donc leur donner la propriété "display" avec pour valeur "block". illustration : 1- Image dans le "topbar-logo" et rectangle dans le "topbar" : #topbar-logo {           display: block;           background: url(URL de l'image);     ... [Lire la suite]
Posté par Michal53 à 09:12 - - Permalien [#]
Tags : , , , , , , ,
03 décembre 2009

Le bandeau supérieur (1)

On peut placer une image de fond dans les sélecteurs "topbar-logo" ou "topbar". Il faudra tout d'abord provoquer l'affichage de l'élément qu'on aura choisi et interdire celui de l'autre en utilisant la propriété "display". La propriété "display" de l'élément choisi aura pour valeur "block" et l'autre "none". Dans le "topbar-logo" : #topbar-logo {           display: block;           background: url(URL de l'image);           height: Xpx;* } div... [Lire la suite]
Posté par Michal53 à 08:57 - - Permalien [#]
Tags : , , , , , , ,