Net : Canalblog et le mode avancé
Suite à une question de bonome, en privé, concernant la personnalisation de Canalblog, je fais un lien pour celles que ça intéresserait vers un billet de mon 3eme blog (puisque celui-ci est le 4eme...comment ça j'ai du mal à rester stable ?! Ne riez pas, je prépare le 5eme sur Wordpress parce que Canalblog et ses pubs à la noix me gonfle).
>> Canalblog et le mode avancé <<
Edit février 2009 : je copie/colle mon article ici :)
- Comment faire ?
- Ce qui va changer : Vous n'aurez plus les parties "Style/Apparence générale/Blocs" qui seront remplacées par des fichiers éditables. Vous ne pourrez plus mettre ce modèle en "normal" avec recours au "Style/Apparence générale/Blocs"
- Mes conseils : créer un modèle "test" ne bidouillez pas sur votre modèle actuel. Faites un copier/coller sous Word par exemple des fichiers du modèle test, en cas d'erreur, vous pourrez recommencer à zéro facilement en copiant/collant vos fichiers Word.
- Comment fonctionnent-ils ? Il y en a de 3 sortes : ceux qui concernent la forme du blog (Page d'acceuil, page de l'index des archives, page des archives, page d'un message, page du profil) ceux qui concernent les albums (page d'une photo, page de l'index de l'album) et enfin la feuille de style.
Le premier groupe a une structure à peu près identique : voici la structure générale d'un modèle à 3 colonnes. Des éléments en plus ou en moins sont ensuite placés dans cette grande structure : des balises de blocs et des balises de contenus.
Le second groupe a une structure proche du premier groupe avec des éléments très différents. Mais le principe est le même.
Le troisième type, la feuille de style, utilise un autre langage : le CSS. Cette page dicte à l'ensemble des éléments du blog les couleurs, taille etc... La feuille de style est organisée.
Quelques indications complémentaires pour se repérer là-dedans :
- les "a:" c'est pour les liens, qu'on peut décorer, changer de couleurs
- les "border-quelquechose" font référence à une bordure (couleur (color), largeur en pixel (width), style)
A noter que pour changer les couleurs, on utilise des couleurs hexadécimales de la forme #000000 (noir).
Je pars de la bannière, c'est elle qui va conditionner
les couleurs du blog. J'utilise des images libres de droit (donc
attention, dans Google Images les images ne le sont pas forcément !
Respectez le travail des autres !). Je vais généralement sur StockExchange, là encore attention, certains auteurs demandent à être prévenus de l'utilisation et crédités. Lisez bien.
Pour la police d'écriture je vais sur Dafont. Je la télécharge et l'installe sur mon ordinateur (Panneau de config > Polices et vous glissez la police dans le dossier).
Je bidouille ma bannière sous Photofiltre (gratuit). La largeur de votre bannière doit être la même que celle indiquée dans la feuille de style ici :
#container { width: 800px; Je l'insère ensuite dans les pages du groupe 1 et 2 en remplaçant ce code (situé juste après la balise "Body") :
<div id="topbar"> <h1><a
href="<$BlogURL<div id="topbar"> <h1><a
href="<$BlogURL$>"><$BlogTitle$></a></h1>
<h2><$BlogDescription$></h2> </div>gt;"><$BlogTitle<div id="topbar"> <h1><a
href="<$BlogURL$>"><$BlogTitle$></a></h1>
<h2><$BlogDescription$></h2> </div>gt;</a></h1>
<h2><$BlogDescription<div id="topbar"> <h1><a
href="<$BlogURL$>"><$BlogTitle$></a></h1>
<h2><$BlogDescription$></h2> </div>gt;</h2> </div>
par celui-ci <div id="topbar"><a href="<$BlogURL<div id="topbar"><a href="<$BlogURL$>"><img border="0" src="adressedemonimage"></a></div>gt;"><img border="0" src="adressedemonimage"></a></div>
(hébergez vos images dans un brouillon par exemple...il vous suffit
ensuite de copier l'adresse de l'image à la place de
'adressedemonimage').
A l'aide de la pipette de Photofiltre, vous pouvez sélectionner des couleurs de la bannière pour les utiliser
pour les liens, les titres, le texte etc... Il vous suffit de remplacer
les couleurs hexadécimales présentes dans la feuille de style et de les
remplacer par les vôtres. Autre astuce, moi j'utilise Colorzilla, un plugin de Mozilla qui intègre au navigateur une pipette...très pratique !
Après les couleurs, le texte : c'est à modifier directement
dans les pages du groupe 1 et 2 (remplacer "laisser un commentaire" par
"laisser un message" etc...). Si vous voulez des images-titres : créez-les avec Photofiltre, hébergez-les sur votre blog, et insérez-les dans les pages du groupe 1 :
Ex pour l'image-titre "archives" :
Chercher et remplacer le code suivant <div class="title">Archives</div> par <div class="title"><img src="adressedemonimagedarchives"></div>
Après plusieures heures normalement c'est tout bon ! Vous avez un blog à votre image !
Je rappelle un truc très important qu'on oublie souvent : la sauvegarde ! (sous Word, le bloc-note ou un éditeur de texte) Une des fichiers de départ, puis alterner sur 2 sauvegardes des fichiers à chaque modification (pour éviter de recommencer à zéro à cause d'une malheureuse manip). Et on ne modifie pas les fichiers utilisés actuellement par le blog, on crée un modèle test !
Amusez-vous bien !
Liste non-exhaustive de liens utiles :
Généraux sur les langages et autres :
Spécialisés pour Canalblog :
/https%3A%2F%2Fstorage.canalblog.com%2F25%2F86%2F440422%2F58989621_o.jpg)
/https%3A%2F%2Fstorage.canalblog.com%2F70%2F63%2F440422%2F58888706_o.jpg)
/https%3A%2F%2Fstorage.canalblog.com%2F11%2F30%2F440422%2F58596981_o.jpg)
/https%3A%2F%2Fstorage.canalblog.com%2F17%2F67%2F440422%2F58558000_o.jpg)