Personnaliser son blog (Tutoriel)

Quand on a blog, on aime qu'il se démarque des autres n'est-ce pas ? Mais on ne sait pas toujours comment faire pour le personnaliser, ou alors on a peur de faire des bêtises...

C'est pourquoi, j'inaugure aujourd'hui une suite de tutoriels pour personnaliser son blog.
Juste des petits trucs simples et faciles à faire tels que élargir la zone des articles, mettre une bannière et/ou un fond personnalisés...

Beaucoup d'entre nous avons notre blog soit sur over-blog, soit sur hautetfort. Je ferais les explications pour chacun des deux, mais si vous voulez savoir comment faire sur un autre hébergeur, il n'y a qu'à demander !!

On commence par "Comment élargir la zone de texte?" sur over-blog : j'ai envoyé les explications à Cachou, donc c'est deja tout prêt

Tout d'abord, il faut aller dans " Administration> Design> Mode avancé (CSS)> Mon Style
Ensuite cochez la case "Personnaliser" (il n'y a rien dans la case, mais ce n'est pas grave !)
puis "Definitions avancées".
La il doit y avoir 4 nouvelles cases qui s'affichent :
1. Définitons d'affichage du template
2. Définitions d'affichage de la variation
3. Définitions de structure de la variation : c'est cette case qui nous intéresse !!
4. Définitions de stucture du template

Le reste, je vous le mets directement en images ! Vous verrez c'est tout simple !

Petite précision : les dimensions que vous voyez sur les captures sont les dimensions deja modifiées !

Elargissement :


Aperçu :


Je l'ai écrit dans les captures, mais je le redis : il est important que en additionnant la largeur de chacune des colonnes, la largeur totale ne soit jamais dépassé ! Et ce, que votre blog soit avec deux ou trois colonnes !

Si vous voulez voir un aperçu sur un blog, il suffit d'aller voir chez Cachou !


Passons maintenant à Hautetfort.
Tout d'abord, choisissez le thème que vous voulez. Pour l'exemple, j'en ai pris un en 3 colonnes.


Vous savez deja comment mettre une bannière et changer les couleurs, passons à l'élargissement maintenant !

Allez dans "Présentation"> Configuration avancée
Vous voyez alors toute une liste de "Modèles".
Nous, c'est le deuxième qui nous intéresse "Feuille de styles", vous cliquez donc sur "Modifier le template"

A partir de là, ces explications sont valables aussi pour "Canalblog"

Chaque paragraphe que vous voyez correspond à une zone du thème. Pour élargir le milieu, nous nous intéresserons aux paragraphes "Container" et "Center"
Pour élargir le milieu, que le thème soit en 2 ou 3 colonnes, c'est toujours ces deux paragraphes qu'il faut modifier !!

Pour le reste, c'est en images !!

Container :


Center :


Aperçu final :

Merci pour le tuto!!! je pense que tu vas faire des heureuses!!

De rien !! Et j'espère bien faire des heureuses

J'ai mis l'explication pour Hautetfort !

Passons maintenant au fond !

Avant toute chose, vous devez héberger votre image de fond !
Sur https://servimg.com/ par exemple.

On commence par over-blog :

Administration> Design> Mode avancé (CSS)
La suite en images !

Etape 1 :


Etape 2 :


Résultat :


Hautetfort :
Allez dans "Présentation"> Configuration avancée
Vous voyez alors toute une liste de "Modèles".
Nous, c'est le deuxième qui nous intéresse "Feuille de styles", vous cliquez donc sur "Modifier le template"

Procédure :



Peu importe votre hébergeur de blog, le code pour avoir un fond personnalisé est partout la même :
background-image: url("lien de votre image");


Au fait, est-ce que vous voyez arrivez bien à lire ce qu'il y a sur les images ?!

Merciiiiiiii pour les tutos !!
Je ne sais pas si je vais m'en servir tout de suite, mais en tout cas je m'en servirai

Et sur les images que j'ai regardé tout est lisible

Dites les filles savez-vous comment importer un blog blospot sur Hautetfort svp??

De rien Pando !
Tant mieux si tout se voit bien !

Gaelle, je pense avoir découvert comment faire ! Je m'occupe du tuto dans la soirée

merci!!!

Bon, finalement il n'y a pas de tuto à faire ! J'ai retrouvé le lien où tout est expliqué !

http://www.hautetfort.com/migration.php

Bonjour,

Je découvre avec grand bonheur sur le blog de cachou l'existence de ce tutoriel.

Cependant je rencontre un petit souci...

Je ne suis pas allée au bout de la manipulation car quand je demande à prévisualiser , voilà le resultat:



Où est passé le joli vert foncé que j'ai actuellement sur mon blog? ICI

Merci de m'aider!


EDIT : a priori l'herbégeur d'image est dans les choux ...
Disons que sur la prévisualisation, la couleur vert foncé des articles a disparu, il ne reste que le fond vert pâle... comme si les articles étaient publiés en transparence.

Il m'est arrivé la même chose en préparant le tutoriel.

Si tu n'as rien modifié de plus que ce j'ai écrit, alors c'est normal. Il arrive que la prévisualisation ait des ratés.
Normalement, si tu enregistres les modifications, la couleur du fond apparaîtra
Si ce n'est pas le cas, fais-le moi savoir et j'essayerais de trouver d'où vient le problème.

Bon, j'ai enregistré les modifications et mon joli vert a disparu
J'ai remis les chiffres de base mais le vert n'est toujours pas revenu.


EDIT : j'ai retrouvé mon vert en resélectionnant le thème.
Mais du coup, les dimensions se sont remises comme avant.

Le problème vient d'over-blog en général.
Il faut réessayer, ça ne marche pas toujours du premier coup avec over-blog. (c'est pour ça que j'aime pas over-blog, c'est toujours une vraie galère pour modifier...)

J'espère que ça marchera ! Sinon, essaie en mettant la colonne à droite... ça avait marché chez Cachou...

Ca ne marche toujours pas.
Je retenterai demain.

Pffffffffff moi j'ai essayer de changer le fond de la page du blog sur haut et fort mais rien du tout rien a changer si ce n'est que maintenant, au lieu d'un gris banal j'ai un blanc banal c'est tout! Faut dire qu'a chaque fois que j'essaye des nouveaux trucs sur le blog ça marche jamais.
Est ce qu'il faut bien mettre les guillemets et les parenthèses comme sur ton exemples ou faut pas?

Oui, il faut bien mettre les guillemets et les parenthèses et le point-virgule

Est-ce que tu as bien pris le dernier lien sur servimg ?
Celui où il y a marqué : Liens directs // Adresse de l'image

Pandora, quand j'étais sur H&F, je me servais toujours de ce tuto là : http://www.lylyjune.com/archive/2007/05/21/sos-blog-en-detresse.html

Over blog est plus compliqué, mais on m'a bien aidé à dompter la bête en épurant mon design et maintenant j'arrive à faire qqch de pas trop mal

j'utilise casimage comme hébergeur d'image parce que servimg ne veut pas marcher avec moi. y'a plusieurs lien disponible peut être que j'ai pas pris le bon?

Je suis allée sur Casimage : tu dois prendre le lien où il y marqué "pour montrer l'image en grand"

Je vais tester chez moi voir si c'est bien ça


EDIT : J'ai testé, et chez moi aussi le fond n'apparaît pas... je pense que le problème vient du thème d'origine que tu as...

Pour le fond sur hautetfort, Bonnie avait fait un chouette tuto, c'est celui que j'ai utilisé car je n'ai jamais réussi à faire marcher celui de Lily June, allez comprendre!! blonde blonde...
Il faut copier coller ça:

background-image:url('adresse httpmachin de l'image de fond hébrgée soit ici dans les fichiers soit sur servimg.com ou autre.jpg');
background-attachment:fixed;
background-position:center;
background-repeat:repeat

dans votre design avancé! avec une pattern ça marche très bien!

Ahaa, moi c'est le seul que je comprends justement!

Merci pour les conseils je vais essayer je vous dirais si ça marche pour moi! j'ai jamais beaucoup de chance de ce côté là, mais ça va bien finir par marcher!

Pffffffffffffffffff ça ne marche pas j'ai tout essayer, le plus étrange c'est que quoi que je mette dans modifier le template, ça ne change rien du tout à la présentation du blog! c'est très énervant

As-tu essayé en choisissant un autre template ? Le problème vient peut-être venir de là.