Bouge ton blog !

Suite à une forte demande des utilisateurs concernant la personnalisation de la bannière, voici un tutorial qui vous expliquera pas à pas comment procéder pour mettre votre bannière à la place de celle qui existait déjà.

- Dans un premier temps, il vous faut ajouter votre bannière à vos fichiers.
- Récupérez ensuite le lien de votre image (en cliquant sur le nom).

Arrive maintenant la partie la plus difficile mais si vous suivez bien les étapes, tout devrait aller.
- Allez dans les configurations avancées de l'onglet "PRESENTATION" et modifiez votre feuille de style.
Pour plus de sécurité, sauvegarder son contenu dans un éditeur de texte de votre choix avant toute modification.

- Il s'agit maintenant de modifier les lignes de code concernant votre bannière. Pour cela, repérer la ligne #banner.
Vous devriez avoir les lignes suivantes:

Les valeurs qui suivent les ":" peuvent différer suivant les modèles.

- Dans #banner, ajouter une ligne : display:none;. Si cette ligne existe déjà, modifiez sa valeur par none. Ceci permet de faire disparaître la bannière préexistante sans pour autant les enlever ce qui permet de rester référencé.
- A présent, repérez le bloc avec #banner-img et remplacez display:none; par display:block;
- Vous pouvez maintenant ajouter votre image en remplaçant la ligne background:#...... par background:#XXXXXX url("url_de_votre_bannière") no-repeat 0% 0%;
Remplacez XXXXXX par le code hexadecimal de la couleur dominante de votre bannière
- Ajoutez height: hauteur_de_votre_bannière; dans le bloc précédent et dans le bloc div.img-link a {.

Votre feuille de style doit maintenant ressemblez à ce qui suit:


Pour les modifications portées sur le design 4 (en comptant à partir du haut de la gauche vers la droite) uniquement:

* Au niveau des styles "#container .container-decorator1" : remplacez "90px" dans background: transparent url(http://[...]) no-repeat 0% 90px; par la somme suivante : hauteur de votre image + marge de 9px.. Ex : votre image fait 120px en hauteur, le code à insérer est : "129px"


Pour les modifications portées sur le design 5 (en comptant à partir du haut de la gauche vers la droite) uniquement.

* Au niveau des styles "#container .container-decorator1" et ".album-container .container-decorator3" : remplacez "90px" dans background: transparent url(http://[...]) no-repeat 0% 100px; par la somme suivante : hauteur de votre image + marge de 8px.. Ex : votre image fait 120px en hauteur, le code à insérer est : "128px"

Envie de colorer votre calendrier ?

Voici ce que technoblog vous propose :

- Coloration alternée des cases
- Mise en évidence du jour "Aujourd'hui"

Il vous faudra d'abord restaurer votre modèle de calendrier (le code HTML est désormais différent) dans l'onglet Présentation puis éditer votre feuille de style.

Repérer les lignes concernant la boîte calendrier :
TABLE.calendar
Puis sous la dernière ligne concernant le calendrier :
TD.day

Insérez un code de ce type :
TD.even {
background-color: #e8eeee;
}

TD.odd {
background-color: #fff;
}

TD.today, TD.today a, TD.today a:hover {
background-color: #000;
color: #fff;
}

NB : Le design de ce calendrier convient pour un design sur fond blanc. Pour d'autres types de fonds et jeux de couleurs, il vous faudra éditer les codes couleurs #fff (blanc), #e8eeee (gris) et #000 (noir) et les accorder avec votre charte.

Pour aller plus loin :

TABLE.calendar apermet de charter les liens du calendrier sur les jours

TH.day-of-weekpermet de charter la ligne jour de la semaine

Peut-être la connaissez-vous déjà ? Sinon, cliquez à toute vistesse sur Blogbar et ajoutez ça dans une boîte libre de votre blog.

La Blogbar permetait de rechercher une info sur le web directement sur votre blog, et ce parmi les principaux moteurs de recherche du Web (Google, Yahoo, MSN, Exalead) et les moteurs de recherche de blogs (Technorati, BlogPulse, etc...).

La V3 permet maintenant de chercher sur le web ou sur votre blog ! La Blogbar est donc passée de gadget fournisseur de visibilité pour d'autres à un véritable service pour le bloggueur. C'est donc tout naturellement, LE bloc libre à intégrer dans son blog. On peut remarquer que l'intégration sur blogSpirit se fait sans efforts et c'est bien normal puisque les concepteurs de la Blogbar bloguent sur blogspirit (Voir l'annonce de la V3).

Toujours dans la catégorie "Personnaliser son blog", je vous propose maintenant - non pas une nouvelle astuce à intégrer facilement dans votre blog - mais un véritable moyen de connaître les différents éléments qui constituent sa charte graphique.

Voici donc la carte de styles d'un blog de technologie blogSpirit. Il est tout frais et vous permet :

• De connaître les différentes boîtes qui constituent la mise en page globale de votre blog : les colonnes, la bannière, le centre et le container : il s'agit des encadrés.
• De connaître les différents styles qui définissent le style de vos textes et liens. il suffit de cliquer sur un élément textuel pour connaître la ou les classes auxquelles il est rataché.

J'ai vu que des blogs comme celui de Gwenaelle ont un fait un boulot remarquable avec la feuille de style (Il y en a d'autres), j'espère que cette astuce inspirera d'autres graphistes en herbes...

Légende :
La feuille de style de votre blog utilise le modèle des boîtes, voici les principales que vous devez connaître pour personnaliser l'affichage de votre blog.

box : #container, La boîte principale qui contient tout les éléments.

box : #left, #right, #banner, #center : Les 4 boîtes principales pour editer la mise en page globale du blog

box : .sidebar, .content : Styles utilisés pour définir les styles par défaut pour chaque boîte (marges, taille de police, etc...)

box : table.calendar : style propre au calendrier (modèle des tables)

Ce blog statique servira donc de référence pour les différentes astuces abordées ici et sera bien entendu LE support idéal pour personnaliser la feuille de style de votre blog.
Bonne chance !

Voici la première note d'une série d'astuces visant à mieux personnaliser et charter son blog.

Nous allons voir comment "redesigner" ses blocs de colonnes :

Il s'agit d'un exemple simple, qui ne nécessite aucune image de fond, il faut au préalable choisir 3 couleurs qui définiront la charte de son blog. Vous pouvez choisir par défaut les 3 couleurs qui sont assignés à votre modèle de présentation (couleur de la banière, couleur de la colonne, titre, liens etc...) avant de vous lancer dans une vrai création de charte

2 couleurs doivent être dans la même teinte, elles sont utilisées pour les couleurs de fond du titre (#006666 : couleur 1) et du contenu (#009999; : couleur 2). La 3ème couleur doit être choisie comme contraste des 2 premières (#ffffcc : couleur 3)

Voici le code à insérer dans votre feuille de style (Présentation -> configuration avancée) à remplacer par les styles correspondants ou à placer en fin de fichier :


.sidebar h2 {
font-size: 70%;
font-weight: bold;
margin: 0px;
margin-bottom: -2px;
padding: 4px 7px 6px 7px;
background-color: #006666;
color: #ffffcc;
border: 1px solid #006666;
border-bottom: 0px;
}

.sidebar ul {
padding: 5px;
margin: 0px 0px 30px 0px;
background-color: #009999;
color: #FFFFcc;
border: 1px solid #006666;
border-top: 0px;
}

.sidebar li {
margin: 0px 0px 0px 0px;
padding: 2px;
list-style-type: none;
font-size: 65%;
line-height: 150%;
}

.sidebar li.description {
padding: 2px;
text-align: left;
margin: 0px 0px 0px 0px;
font-style: italic;
}

.sidebar li.album {
text-align: center;
}

.sidebar img {
padding: 2px;
border: 1px solid #333;
background: #FFF;
}

.sidebar li.link img {
border: 0px;
padding: 0px;
margin: 0px;
vertical-align: -4px;
}

.sidebar a:link, TABLE.calendar a:link, .sidebar a:visited, TABLE.calendar a:visited {
text-decoration: none;
color: #FFFFcc;
}

.sidebar a:hover, TABLE.calendar a:hover, .sidebar a:active, TABLE.calendar a:active {
text-decoration: underline;
color: #FFFFcc;
}


L'essentiel de la personnalisation se trouve dans les styles .sidebar h2 et .sidebar ul.
Le "padding" vous permet de gérer la marge du texte avec le bord des blocs en pixels.
Le "font-weight" permet de définir des caractères gras avec l'attribut "bold".
Le "border: 1px solid #006666;" permet de définir la largeur des bordure, le style du tracé puis la couleur.

Le calendrier est géré par d'autres styles qu'il faut mettre en conformité avec la charte adoptée :




TABLE.calendar {
background-color: #009999;
color: #FFFFff;
border: 1px solid #006666;
border-top: 0px;
}

TABLE.calendar th {
color: #FFFFcc;
}


A noter qu'il est également possible de réaliser ce type de charte avec 2 couleurs, dans ce cas, il faut privilégier le choix de 2 couleurs contrastes : la première est utilisée pour les bordures et les textes / liens, la seconde pour le fond.