ToutouBlog : un blog pour votre chien !

A présent, avec les nouvelles fonctionnalités du compte privilège (voir article suivant pour la présentation de celui-ci) vous avez la possibilité de créer vous-mêmes votre propre graphisme avec la photo de votre chien. Un modèle personnalisé que vous seul pourra utiliser !
Un exemple de personnalisation possible : le blog de Badiane.

Vous venez donc d’investir dans ce nouveau compte, mais arrivé dans la rubrique graphisme, horreur ! Un texte incompréhensible s’affiche !

Pas de panique ! Nous allons vous expliquer simplement comment le modifier pour en faire votre graphisme.

Ces lignes de texte, à priori sans aucun sens, correspondent en réalité au code html du graphisme que vous utilisez actuellement. Il vous suffit alors de modifier certains éléments pour en faire votre propre modèle.

Nous vous conseillons de partir d’un modèle qui a des couleurs comme vous les voulez, cela sera plus simple.


Pour modifier les couleurs :

En html, la façon la plus sûre pour définir une couleur est d'utiliser le code hexadécimal qui définit cette couleur. Ce code se compose de 6 caractères et/ou chiffres et est précédé d'un #.

Exemple pour le noir : #000000

Vous trouverez le code des 256 couleurs sur Wikipédia. Utilisez le code fourni dans la colonne Code Hex :

http://fr.wikipedia.org/wiki/Couleurs_du_Web#Noms_de_couleurs_SVG_1.0

Nous allons maintenant vous indiquer précisément l’endroit où effectuer les modifications. Il vous faut retrouver dans le code les lignes que nous avons copiées et modifier le texte surligné en rouge.

Pour changer la couleur de fond générale :

body {
 margin: 0px;
 text-align: center;
 color: #000000;
 font-family: Georgia, verdana, arial, serif;
 background-color: #000000;
}

Pour la couleur de fond de la colonne de gauche (sous le texte) :

td.leftside {
  padding: 10px;
  border: 1px solid #000000;
  background: #FFFFFF;
  border-top: none;
  border-right: none;
  font-size: 10pt;
  line-height: 20px;
  text-align: left;
}

Pour la couleur de fond de la colonne de droite :

td.rightside {
  background: #FFFFFF;
  padding: 10px;
  border: 1px solid #000000;
  border-top: none;
  font-size: 10pt;
  line-height: 20px;
}

Le style et la couleur du titre du blog : 

h1 {
  margin: 0px;
  font-size: 24pt;
  color: #FFFFFF;
  font-weight: bold;
  font-family: "Trebuchet MS", verdana, arial, serif;
  text-align: left;
}

Le style et la couleur du sous-titre du blog qui sont également les titres des catégories dans la marge de droite :

h2 {
 margin-top: 0px;
 margin-bottom: 0px;
 font-size: 12pt;
 color: #000000;
 font-weight: bold;
 font-family: "Trebuchet MS", verdana, arial, serif;
}

Pour changer la couleur et l'aspect du texte général :

body {
 margin: 0px;
 text-align: center;
 color: #FFFFFF;
 font-family: Georgia, verdana, arial, serif;
 background-color: #000000;
}

La couleur des liens :

a:link { color: #658D07; text-decoration: none; }
a:visited { color: #658D07; text-decoration: none; }
a:hover { color: #658D07; text-decoration: underline; }

La couleur des liens du menu de droite :

a.menu:link { color: #658D07; text-decoration: none; }
a.menu:visited { color: #658D07; text-decoration: none; }
a.menu:hover { color: #658D07; text-decoration: underline; font-weight: bold; }


Pour modifier le modèle :

Les principales modifications se font dans le header (entre les balises et ), au début du code html, dans les feuilles de style.

Pour remplacer l'image de l'en-tête :

Il faut changer l'adresse de l'image qui se trouve ici dans le style td.title:

td.title {
 height: 250px;
 width: 800px;
 padding: 10px;
 background-image: url(./images/templates/berger-portugais/titre.jpg);
 border: 1px solid #000000;
 border-top: none;
 vertical-align: bottom;
 text-align: left;
 background-color: #FFFFFF;
}

Les bandeaux font 800 pixels de large (height). Il est possible de le modifier, mais nous conseillons de laisser la largeur de la page à 800 pixels.

La hauteur est ajustable. Généralement les modèles de Toutoublog utilisent une image autour de 200 pixels.

Il faut ajuster la hauteur (height) dans le code html en fonction de celle de votre image.

Pour mettre votre image, il faut changer l’adresse entre parenthèses dans la partie "background-image".

Pour obtenir cette adresse vous avez deux façons possibles : héberger votre photo sur un site spécial qui propose ce service et copier l’adresse qu’il vous fournira ; ou mettre votre photo dans votre album photo sur Toutoublog. Dans ce dernier cas il vous suffit d’aller voir votre album sur votre blog, de cliquer sur l’image et de copier le lien de la page en haut dans votre navigateur.

On peut également choisir la couleur de la bordure :  border: 1px solid #000000;

Vous pouvez maintenant créer de beaux graphismes rien qu’à vous !

Si vous rencontrez tout de même des difficultés, n’hésitez pas à nous envoyer un message !