26 novembre 2007
de retour ^^
Bon bin vu que j'ai pas passé le test pour mon embauche, mon programme est des plus calmes. Faut que je reprenne tout de zéro, donc je pense que je devrai trouver un peu de temps pour le p'tit labo.
Comme dis precedement, je vais faire un véritable pas à pas pour passer d'un blog d'un blog de base (d'ou le skin actuel) à un blog plus travaillé.
Je vais partir d'un blog simple avec une colonne. à droite. puis on la passera à gauche, pour vois montrer que c'est vraiment pas compliqué.
Pis si vous en faites la demande, on pourra voir comment faire pour un blog avec 2 colonnes.
Bon bin... j'vais aller faire chauffer gimp, pis essayer de trouver un truc chympa.
On se revoit tout a l'heure (peut être) avec un screen du skin.
See ya!
20 novembre 2007
Morne plat... de mon côté en tout cas.
Mais chers visiteurs,
C'est avec un réel regret que je ne ferai pas de cours ces prochains jours. J'ai comme qui dirait de petits empêchement professionnels mais j'espère néanmoins pouvoir m'y remettre très vite.
Je vais sûrement espacer un peu les explications brut sur le fonctionnement de CB, et je pense revenir avec une petite méthode pas à pas qui permettrai de vous montrer qu'en fait, le mode avancé n'est pas si compliqué.
Je tiens à remercier tous les fans de mamina qui vienne montrer que je fasi du bon boulot. Y'a pas à dire, ça fait toujours plaisir à voir, à lire.
Ce qui sont venu me demander de l'aide, des conseils... je vais essayer de ne pas vous oubliez, mais si je refait surface ici sans faire attention à vous, relancez moi. ;)
Surfeurs, surfeuses, bonne soirée et ... heu... bonne soirée ^^
19 novembre 2007
Nouveau Skin... pour mamina
Errant sur l'annuaire de CB, je suis tombé sur le site de mamina. Un petit blog de recette avec des photos à faireaj saliver le premier venu, mais un design on ne peut plus limite. Ni une ni deux, je prend contact avec la dame (puis sa fille qui gère le mode avancé) et en un peu moins d'une semaine, je lui livre sont nouveau skin.
Un zoli petit post pour présenter le nouveau skin et son réalisteur, et whouaaaa! des commentaires à foison. Pour résumé, que des "whoua c'est beau", "bien sympa ce nouveau skin" toussa, toussa...
Donc je suis content. C'était mon premier travail pour quelqu'un d'autre. Ca c'est très bien passé, dans une bonne ambience. j'ai fait un screen pour ma collec... Mais je vous conseil d'aller faire un saut sur son blog si vous êtes gourmant.
Mamina, hummmmmm!!! cha a l'air bon che qu'elle fait !
Edit:
Je viens d'aller voir mes stats... mamina m'a apporté plus de visiteurs depuis ce matin que j'en ai eu depuis que j'ai créé le blog... j'suis réellement abasourdit... me demande combien seront fidèles... peu j'imagine. Y'a quand même un gros pas entre la cuisine et le CSS... des points communs... Mais beaucoup de différences.
Merci les visiteurs ^^
18 novembre 2007
[FAQ]Du texte dans ma bannière
Une question de Demolite: Comment mettre du texte dans sa bannière?
Et d'abord pourquoi mettre du texte dans sa bannière?
Après tout, la bannière étant une image, on pourrait tout à fait mettre du texte sur l'image. Oui mais... Si on ne fait pas attention lors de l'enregistrement ou lors du passage sur Canalblog, l'image est mal compressée.
D'ailleurs, le Saviez vous?
CanalBlog, lorsque vous uploader une image, il se permet parfois de la recompresser ou de la redimensionner. Moi, au début, je n'arrivait pas à mettre mes bannières et autre sans que ce maudit site ne les redimensionne. C'est pour ça que toutes mes images sont hébergées sur un autre site. J'aime pas ne pas avoir le contrôle de ce que je fais.
Si vous aviez mis du texte, genre description détaillée du site, avec une police assez petite, les caractères apparaîtront flou, moche. Demolite qui refait le design de son site s'en est rendu compte et je lui avait suggéré de le remplacer par du vrai texte. Oui mais comment faire?
On pourrait faire comme pour ma FAQ. Pour cette dernière, j'ai créer une <div id="FAQ"> et je l'ai fixé dans le coin supérieur gauche du site grâce à l'attribut position: absolute; . Néanmoins, ce n'est pas la méthode la plus propre. On va faire ça dans les règles.
Tout d'abord, allons sur la page d'accueil en mode avancée, et voyons les div qui concernent la bannière. Nous en avons 3. tobar-logo, qui représente l'image, logolink qui représente le lien et topbar, qui est l'affichage du titre du blog et de sa description entrée dans les préférences.
Constatez que logolink et inclut dans tobar-log et qu'ensuite vient la div topbar. Cette méthode est un peu bancale. En effet, je trouverai plus logique de permettre à l'utilisateur de mettre non plus une couleur de fond, mais une image de fond. Et le texte se superposerai. Qu'importe, nous allons le faire !
Coupez la ligne qui ressemble à:
<div id="topbar">
<h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1> <h2><$BlogDescription$></h2>
</div>
Et Collez là juste avant le <div class="logolink">. Le texte est donc dans la bannière.
Ajoutez votre texte/description dans dans cette div (en supprimant ou non ce qu'il y'avait avant). Mettez le dans une balise <p>...</p> pour que cela soit plus propre.
Validez. Voila, c'est fait.
Il ne vous reste plus qu'a créer la classe #topbar dans la feuille de style générale, et de l'implémenter pour l'afficher. Pour positionner le texte, utilisez margin-right, margin-left, margin-top, margin-bottom. pour que votre texte soit à gauche, centré ou justifié, utilisés text-align: left/center/right/justify;. Choisissez la couleur qui le fera bien ressortir grâce à l'attribut color. Et choisissez sa taille avec font-size. jetez un coup d'oeil ici et ici pour voir tous les attributs imputable à un texte.
Après libre à vous de l'encadrer ou d'en faire n'importe quoi.
valaaaa.
17 novembre 2007
Nouveau Skin Yoshi
Pourquoi un skin Yoshi?
Tout simplement parce que je me suis acheté une nintendo DS il y'a peu et avec le jeu Yoshi's Island DS.
Pis vu que Yoshi doit être l'un de mes personnages nintendo préféré, il est tout a fait logique que je fasse un 'ti design avec mon héro.
Quoi de particulier sur ce design:
- modification de la config général pour pouvoir mettre des bordure automatiques à droite et à gauche sans encadré la bannière.
- modification du code des messages pour pouvoir mettre la date sur tous les messages et non pas que sur le premier message du jour.
Mon seul problème, est que je n'arrive pas à supprimer la petite marge tout en bas.
16 novembre 2007
[Tuto6b]Menu de navigation Droite
Et zou, quoi y s'passe du côté de ma barre de droite? on y trouve tous les autres blocs.
photo, liste des membres, contact par mail, liste des amis, flux RSS et liste des fils d'actualités.
La photo de l'auteur:
<CBOwner>
<BlogOwnerPictureURL>
<div class="image">
<a href="<$BlogOwnerProfileURL$>"><img src="<$BlogOwnerPictureURL$>" border="0" /></a>
</div>
</BlogOwnerPictureURL>
</CBOwner>
Une div image pour pouvoir positionner la photo tranquillou, et un lien bête vers la page de l'auteur (<$BlogOwnerProfileURL$>). L'image est bien entendu celle de Paramètre/Profil Public/Votre image de présentation. On lui supprime les bords en ajoutant le code de style dans la balise, mais on aurait pu (du) le faire dans la classe image tant qu'a faire.
La liste des auteurs:
<div class="title">Auteurs</div>
<ul>
<CBMembers>
<li><a href="<$BlogMemberProfileURL$>"><$BlogMemberAuthorNickName$></a></li>
</CBMembers>
</ul>
On parcours la base de donnée des membres du blogs (<CBMembers>) et on ajoute un lien vers le profil avec le nom du membre adéquat.
Le mail:
<div class="item">
<script type="text/javascript">
<!--
document.write('<a href="<$BlogOwnerNoSpamEmailLink$>">Contactez l\'auteur</a>'); // -->
</script>
</div>
Une chouette petite classe item. Cette classe permet de gérer le texte et l'affichage des informations. Si vous ajoutez quelque chose, genre liens, ou commentaire perso, veillez à les mettre dans une div item, et non pas forcément un paragraphe. La div item à un espace au dessus et en dessous à la base ce qui évite également les sauts de ligne en html (<br />).
Après, dans note petite div, on trouve un script qui affiche le liens pour envoyer un courrier à l'adresse indiqué dans votre profil (<$BlogOwnerNoSpamEmailLink$>). L'utilisation du javascript permet de passer outre les robots qui parcours le net pour recueillir des adresses mail et envoyer des spams (courriel indésirables).
La liste des amis:
<BloggerFriendLinks>
<BlogFriendLinkHeader>
<div class="title"><$BlogFriendLinkCategoryName$></div>
<ul>
</BlogFriendLinkHeader>
<li><a href="<$BlogFriendLinkURL$>"><$BlogFriendLinkName$></a></li>
<BlogFriendLinkFooter>
</ul>
</BlogFriendLinkFooter>
</BloggerFriendLinks>
On va chercher dans votre base de donnée tous les Liens enregistrés sur la page Contenu/Lien d'amis. CB affiche cette liste d'amis sous forme de liste. Pratique étant donné que l'on peut diviser les liens en catégories.
De fait, chaque nouvelle catégorie(<$BlogFriendLinkCategoryName$>) donne lieu à la création d'une nouvelle liste. Ensuite dans les lignes de la liste, on mets un lien(<$BlogFriendLinkURL$>) vers un ami avec comme texte le champ Nom du site (<$BlogFriendLinkName$>). On fait tous les amis de la même catégorie, quand il n'yen a pus on ferme la liste et on passe à la catégorie suivante.
Le Flux RSS:
<BlogSiteFeed>
<div class="item">
<a href="<$BlogSiteFeedURL$>" title="Syndiquez ce blog">Version XML</a>
</div>
</BlogSiteFeed>
J'ai expliqué ici à quoi servait le flux RSS. Et bien ceci en est le code. <$BlogSiteFeedURL$> pointe vers http://votreblog.canalblog.com/rss.xml. Vous remarquerez qu'il se trouve dans une div item ;-)
La liste des fils d'actualités:
<CBFeeds>
<BlogFeedHeader>
<div class="title"> <a href="<$BlogFeedURL$>"><$BlogFeedTitle$></a> </div>
</BlogFeedHeader>
<$BlogFeedHeadLines$>
</CBFeeds>
Permet d'afficher les X derniers titres de message d'un blog. Les blogs voulu sont ajouter dans Outils/Syndication, le nombre de message est fixé juste après avoir entré l'adresse du site ou du flux rss.
<$BlogFeedTitle$> est le nom du site (repris grace a l'information dans le <title></title> du <head> du site.
<$BlogFeedURL$> est l'adresse du flux rss.
<$BlogFeedHeadLines$> sont en fait les X derniers liens vers les articles du bloc concernés.
et voila.
Vous avez dans les tutos 6a et 6b le code de tous les blocs de CB. Très utile quand on est apssé en mode avancé et qu'on veut pas se battre avec le code de CB pour les retrouver.
ZenGarden, ou toute la beauté du CSS
En discutant avec demolite par mail, je me suis soudainement rappellé l'existence du Zengarden. Ce petit site à comme particularité de mettre a disposition de tous son code, html et CSS afin de permettre à tous de créer son style ZenGarden.
Au fil du temps, ce petit jardin c'est vu enrichir de plusieurs dizaines (204 actuellement) de style différents. Le seul point commun: tout est géré via une feuille de style.
Un bonheur pour les yeux, pleins d'idées pour Tous.
A voir absolument !!!
15 novembre 2007
[FAQ]Comment marche le skin Bamboo pour Demolite
Le second skin du p'tit labo. Je me remettais a peine dans le CSS, je découvrais chaque jour les fonctionnalités de canalblog... Ce qui fait que le code n'est p'tet pas des plus jolis... des balises qui ne servent a rien, ou des class qui ne sont pas utilisés... mais tant que ça marche...
Demolite voulait savoir comment il marchait... je ne sais pas trop ce que tu attend exactement, mais je vais essayer d'expliquer un peu comment tout marche:
Le but de ce skin et de méler fond et contenu. L'effet et totalement réussi, il faut le reconnaître. Il ne faut tout d'abord pas oublié que le blog est divisé en blocs (les div) et que c'est avec ceci qu'il faut jongler.
J'ai commencé par faire le skin entièrement sous Gimp (mon logiciel d'infographie préféré). Ensuite, une phase de découpage. La premiere version donnait ça: skin puis j'ai changer pour aller vers l'actuel.
Il y'a le fond, la bannière et le container.
Le fond, (les bambous ). le fond est fixe (background-attachement: fixed;) centré en haut de la fenêtre (background-position: center top;). Il ne se répète pas et je mets en couleur de fond la couleur de fond de l'image. Comme ça, quand elle s'arrète, hop, ça se voit pas trop (vu que je fini proprement le dessous).
Ensuite, la bannière, je la découpe bien et je la mets, normalement. Je pousse le vice à mettre dedans et les liens (liste déroulante avec fonction javascript) et le calendrier (pour combler un peu le vide). Vu que j'ai supprimé les marches de la page, ça colle parfaitement avec mon fond.
Enfin, je crée une image avec le petit bout de branche dedans, que je mets dans ma div container à 150px du haut. L'illusion est faite.
Ensuite, pour les messages, j'ai la fleur de lotus qui est marrante. Je voulais qu'il y'ai un réel mélange entre la fleur et le texte. Tout d'abord, j'ajoute lors de la gération du code devant la date ceci:
<img class="puce" src="http://membres.lycos.fr/riesseg/canalblog/bamboo/Lotus.png" alt="lotus"/>
Ensuite, grace au CSS et ma classe .puce, je gère sa position pour qu'elle soit en dessous du titre.
La date elle, est fixée à droite, pour que ce soit un peu original et je mets une bordure au dessus. Je place ensuite correctement le tout grâce au paramètre margin Pour que la ligne soit collée au titre du blog et ne dépasse pas la fleur de lotus. Le titre du blog recouvre la fleur de lotus qui recouvre le trait de la date.
Pour le kanji caché derrière le commentaire, même méthode.
<img class="puce" src="http://membres.lycos.fr/riesseg/canalblog/bamboo/Lotus.png" alt="lotus"/>
placé avant le lien du commentaire, et je le place grâce au CSS.
Et voila. Après, rien de bien extraordinaire. Je change la bannière en fonction de la page grace a plusieurs classe (une classe par catégorie) et le tour est joué.
En espérant que tout cela réponde a tes question Demolite.
FAQ
Je vais mettre en place une FAQ sur le petit labo. Car les cours vont avancés selon une logique évolutive, mais peut être que ceci vous barbe ou que vous connaissez déjà tout cela.
De fait Ici, vous pouvez poser vos questions ou faire vos demande sur des choses et autre concernant le design de votre blog (ou du miens).
[Tuto6a]Menu de navigations Gauche
Vi, je suis un peu fatigué, donc je ferai le second demain :-)
Donc au menu dans cette barre de navigation:
- la classe navlinks,
- la classe title,
- Calendrier, archives, categories, album photo, derniers messages, derniers commentaires.
Donc la class navlinks sert a la mise en forme de tout ce qui est dans le menu. Nénanmoins, on peut échapper a ce formatage en mettant du contenu hors de cette div. Elle a comme classe fille title qui se retrouve utilisée... pour tous les titres du menu... des blocs quoi. Mais elle sert également à définir le style des listes en appliquant un style à .navlinks ul et .navlinks li. Pourquoi je laisse .navlinks devant? Car si on mettait une liste dans un billet par exemple, le billet ne contenant pas la div navlinks, la liste ne prendrai pas le même style que celui des menus.
Enfin, nous avons .item pour ce qui n'est pas une liste.
Ensuite, le code des blocs commentés:
- le calendrier:
<CBCalendar>
<$BlogCalendar$>
</CBCalendar>
Généré automatiquement par CB, il affiche le calendrier dans une div avec id="calendar". Cette div comporte un tableau (table), portant en titre le mois en cours (caption), en titre de colonnes les jours de la semaine (th) puis les jours numérotés chacun dans une case individuelle (td) et sur plusieurs lignes (tr).
Au final, le code ressemble à cela:
<div id="calendar">
<table>
<caption> <a href ="lien vers mois précédent"><< </a>Mois Année </caption>
<tr> <th>dim</th><th>lun</th><th>mar</th><th>mer</th><th>jeu</th><th>ven</th><th>sam</th> </tr>
<tr><td> </td><td> </td><td> </td><td> </td><td>1 </td><td>2 </td><td>3 </td></tr><tr><td>4 </td><td>5 </td><td>6 </td><td>7 </td><td>8 </td><td>9 </td><td>10 </td></tr>
<tr><td>11 </td><td>12 </td><td>13 </td><td>14 </td><td>15 </td><td>16 </td><td>17 </td></tr><tr><td>18 </td><td>19 </td><td>20 </td><td>21 </td><td>22 </td><td>23 </td><td>24 </td></tr>
<tr><td>25 </td><td>26 </td><td>27 </td><td>28 </td><td>29 </td><td>30 </td><td> </td></tr>
</table>
</div>
-les catégories:
<ul>
<CBCategories>
<li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
</CBCategories>
</ul>
Une liste qui se génére automatiquement. CB repère les balises et va chercher dans la base de donnée les informations pour pouvoir implémenter la liste.
- les archives:
<ul>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<li><a href="<$BlogArchiveFileName$>">Toutes les archives</a></li>
</ul>
Même méthode de remplacement. <$BlogArchiveFilmName> indique la page http://pseudo.canalblog.com/archives/index.html.
- album photo:
<ul>
<CBAlbum>
<li>
<a href="<$BlogAlbumURL$>">
<img src="<$BlogAlbumCoverURL$>" width="75" height="75" alt="<$BlogAlbumTitle$>" /></a><br />
<a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a>
</li>
</CBAlbum>
</ul>
et bien... je pense que vous commencez à comprendre. trouver les balises, aller faire une recherche dans la base de donnée...
On met le lien sur une image, le lien sur le titre de l'album en dessous, et voila. Si il y'a plusieurs album, on recommence à la balise <CBAlbum>.
Pis quand y'en a pus, on passe </CBAlbum> et on ferme la liste.
- Derniers Messages:
<ul>
<CBLastPosts>
<li><a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastPosts>
</ul>
Bis repetitas. une liste des X derniers messages.
- Derniers commentaires:
<ul>
<CBLastComments>
<li><a href="<$BlogCommentURL$>"><$BlogCommentTitle$></a> sur <a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastComments>
</ul>
Toujours tout pareil. un lien vers le com avec le titre du com en texte, puis le lien vers le billet avec le titre du billet en texte.
Vous constatez que le code est relativement simple. Si vous êtes en mode avancé et que vous voules les ajouter, il vous suffit d'un p'tit copié/collé. Vous pouvez modifier à loisir après... Mais ne touchez JAMAIS aux balises <CB[qqch]></CB[qqch]>. Elles sont très importantes, c'est sur elles que reposent tout le système du blog.
Valaaaa.