Les ateliers du klafoutis - Mot-clé - fixeLà où Kozlika tricote et détricote le xhtml, les css, un peu de PHP et surtout Dotclear.2022-08-05T18:53:35+02:00Kozlikaurn:md5:21990cb11f178008a2c4b268539d428aDotclearSauterelleurn:md5:759815b5a4ed1806623efaca69d8909d2007-11-07T14:03:00+00:002009-01-03T14:56:54+00:00KozlikaThèmes pour Dotclear 12 colonnesDotclear 1fixethèmes<p>Sau­te­relle est un thème plus par­ti­cu­liè­re­ment des­tiné aux dia­ris­tes : l’accueil affi­che les billets jour par jour et la navi­ga­tion est plus cen­trée sur la chro­no­lo­gie que sur les caté­go­ries.</p> <p><a href="http://ateliers.klafoutis.org/public/themes-dc1/sauterelle/sauterelle.png"><img src="http://ateliers.klafoutis.org/public/themes-dc1/sauterelle/.sauterelle_m.jpg" alt="sauterelle.png" style="display:block; margin:0 auto;" title="sauterelle.png, nov. 2007" /></a></p>
<p>Pour lais­ser toute la place aux billets, l’habi­tuel menu est déporté sur une page annexe (incluse dans le thème) acces­si­ble depuis l’item « Cen­tre d’aiguillage ». On le modi­fie en édi­tant le fichier <code>plan.php</code>.</p>
<p>Trucs kifon­joli et trucs pra­ti­ques :</p>
<ul>
<li>Le lien de retour à l’accueil (quand on n’est pas à l’accueil, sinon rien) porte la date du billet le plus récent.</li>
<li>Le car­tou­che sous la sau­te­relle con­tex­tua­lise la page affi­chée.</li>
<li>Lors­que plu­sieurs billets ont été écrits le même jour, un car­tou­che en bas d’un billet indi­que les autres de la même date.</li>
<li>Le calen­drier des billets est en forme de “ruban” à plat.</li>
<li>Le cen­tre d’aiguillage con­tient les élé­ments habi­tuels du side­bar, sauf la recher­che et la syn­di­ca­tion qui sont en pied de tou­tes les pages. La divi­sion en deux boi­tes per­met de sépa­rer les liens inter­nes et exter­nes.</li>
</ul>
<ul>
<li>Pour les per­son­na­li­sa­tions :
<ul>
<li>l’image du top est indé­pen­dante de la ban­nière elle-même, suf­fit de met­tre l’image de son choix aux mêmes dimen­sions (225 * 170px) à la place dans le rep des ima­ges du thème.</li>
<li>les cou­leurs s(er)ont lis­tées en haut de la css pour faci­li­ter le cher­cher/rem­pla­cer (en cours, gépo­fini)</li>
</ul></li>
</ul>
<p>Liens de télé­char­ge­ment sur <a href="http://themes.dotaddict.org">the­mes.dotad­dict.org</a>.</p>Papagenourn:md5:31cedf7b4715b618966315555cdb5fc92006-11-11T14:21:00+01:002009-01-03T15:58:07+01:00KozlikaThèmes pour Dotclear 22 colonnesDotclear 2fixefluidethèmes<p>Enten­dez-vous le carillon du <a href="http://fr.wikipedia.org/wiki/Glockenspiel">glo­cken­spiel</a> ?</p> <p><img src="http://ateliers.klafoutis.org/public/themes-dc2/papageno/papageno.jpg" alt="papageno.jpg" style="display:block; margin:0 auto;" title="papageno.jpg, oct. 2008" /></p>
<p>Papa­geno est un thème de lar­geur fixe ou fluide sur deux colon­nes.</p>
<p>Par défaut sa lar­geur est fixée à 87% de la lar­geur de la fenê­tre mais vous pou­vez la fixer en rem­pla­çant la iigne :</p>
<pre> width : 87%;</pre>
<p>par :</p>
<pre> width : 780px; /* ou autre valeur de votre choix */</pre>
<p>Pour per­son­na­li­ser ce thème, je recom­mande d’ajou­ter les modi­fi­ca­tions ou ajouts dans le fichier cus­tom.css pré­sent dans le réper­toire /the­mes/her­mione/, où figu­rent déjà les css néces­sai­res pour la pré­sen­ta­tion du plu­gin Day­Mode.</p>
<p>Merci de me faire part ici de vos remar­ques ou sug­ges­tions. (Les billets de ce blog per­met­tent de tes­ter dif­fé­rents cas de figure.)</p>
<h3>Appel à vos con­tri­bu­tions</h3>
<p>Il reste deux petits bugs con­nus que je n’arrive pas à con­tour­ner. Ils ne sont pas trop gênants donc je le dis­tri­bue quand même mais j’offre une sucette Pier­rot-Gour­mand au cara­mel à celui ou celle qui me four­nira le patch ;)</p>
<ul>
<li>Sous Safari, les deux liens Accueil et Archi­ves ne veu­lent pas se pla­cer côte à côte.</li>
<li>Selon le navi­ga­teur, quel­ques pixels man­quent à gau­che ou à droite pour la cel­lule du nom du mois dans le calen­drier.</li>
</ul>
<p><a href="http://themes.dotaddict.org/galerie-dc2/details/Papageno">Télé­char­ge­ment et démons­tra­tion</a> sur Dotad­dict.</p>
<hr />
<p><strong>Note :</strong> Papa­geno est l’un des per­son­na­ges de l’opéra <em><a href="http://fr.wikipedia.org/wiki/La_Fl%C3%BBte_enchant%C3%A9e">La Flûte enchan­tée</a></em>, com­posé en 1791 par Wolf­gang Ama­deus Mozart sur un livret d’Ema­nuel Schi­ka­ne­der. C’est pro­ba­ble­ment l’un des opé­ras les plus célè­bres du monde, notam­ment pour l’air pyro­tech­ni­que de la Reine de la Nuit.</p>
<p><em>Enre­gis­tre­ment recom­mandé :</em> Il est très dif­fi­cile de choi­sir parmi la plé­thore d’enre­gis­tre­ment de cette œuvre. La magni­fi­que ver­sion, très équi­li­brée, diri­gée par Otto Klem­pe­rer <a href="http://www.fnac.com/Shelf/article.asp?PRID=1126728">rece­vra ma pré­fé­rence</a>.</p>Hermioneurn:md5:baa82899445f5bd4afa01e5a140e5c412006-11-11T10:22:00+01:002009-01-03T15:58:07+01:00KozlikaThèmes pour Dotclear 22 colonnesDotclear 2fixethèmes<p>Nua­ges, nua­ges, le nuage de tags forme les nua­ges de la ban­nière.</p> <p><img src="http://ateliers.klafoutis.org/public/themes-dc2/hermione/hermione.jpg" alt="hermione.jpg" style="display:block; margin:0 auto;" title="hermione.jpg, oct. 2008" /></p>
<p>Les feuilles de style et fichier html néces­sai­res à la pré­sen­ta­tion du plu­gin day-mode sont join­tes au thème.</p>
<p>Pour per­son­na­li­ser ce thème, je recom­mande d’ajou­ter les modi­fi­ca­tions ou ajouts dans le fichier cus­tom.css pré­sent dans le réper­toire /the­mes/her­mione/.</p>
<p><strong>Edit 18 sep­tem­bre 07 :</strong> mise à jour du thème pour modif du fichier _top.html : <code>{{</code><code>tpl:Meta­Per­cent</code><code>}}</code> devient <code>{{</code><code>tpl:Meta­Round­Per­cent</code><code>}}</code>. <a href="http://ateliers.klafoutis.org/post/2006/11/11/Hermione#c8200">Merci Erno</a> !</p>
<p><a href="http://themes.dotaddict.org/galerie-dc2/details/Hermione">Télé­char­ge­ment et démons­tra­tion</a> sur Dotad­dict.</p>
<hr />
<p><strong>Note :</strong> Her­mione, la femme de Leon­tes, roi de Bohême, est l’héroïne de l’opéra <em><a href="http://www.concertonet.com/scripts/review.php?ID_review=145">Win­termär­chen</a></em> (Les con­tes d’hiver), com­posé en 1999 par <a href="http://www.lamediatheque.be/Travers_sons/boesmans.htm">Phi­lippe Boes­mans</a> sur un livret d’après la pièce épo­nyme de William Sha­kes­peare. En voici <a href="http://www.pelleas-artists.com/musique/wintermarchen.mp3">un extrait</a>.</p>
<p><em>Enre­gis­tre­ment recom­mandé :</em> A ma con­nais­sance il n’en existe qu’un <a href="http://www.akamoon.com/index.php?option=com_content&task=view&id=32&Itemid=48">Win­termär­chen</a>, avec Dale Due­sing et la regret­tée Susan Chil­cott, sous la direc­tion d’Anto­nio Pap­pano. Edi­tions Deut­sche Gra­mo­phon.</p>Mélisandeurn:md5:2f8cd35840a2897157b1ca4baff22d7d2006-07-12T11:45:00+00:002009-01-03T14:58:07+00:00KozlikaThèmes pour Dotclear 22 colonnesDotclear 2fixethèmes<p>« Inno­cence de la coquille d’œuf, mys­tère et natu­rel des feuilles d’arbres, élé­gance sim­ple d’une robe de prin­cesse per­due dans la forêt : Méli­sande, bien sûr, ver­sion Debussy. » Dixit <a href="http://www.kozlika.org/kozeries/index.php/2006/07/11/542-faut-trouver-un-nom-au-theme#c13295">Blad­surb</a>.</p> <p><img src="http://ateliers.klafoutis.org/public/themes-dc2/melisande/melisande.jpg" alt="melisande.jpg" style="display:block; margin:0 auto;" title="melisande.jpg, oct. 2008" /></p>
<p>Pour per­son­na­li­ser ce thème, je recom­mande d’ajou­ter les modi­fi­ca­tions ou ajouts dans le fichier cus­tom.css pré­sent dans le réper­toire du thème.</p>
<p><a href="http://themes.dotaddict.org/galerie-dc2/details/Melisande">Télé­char­ge­ment et démons­tra­tion</a> sur Dotad­dict.</p>
<hr />
<p><strong>Note :</strong> Méli­sande est l’héroïne de l’opéra <a href="http://fr.wikipedia.org/wiki/Pell%C3%A9as_et_M%C3%A9lisande">Pel­léas et Méli­sande</a>, com­posé en 1893 par Claude Debussy sur un livret d’après la pièce de Mau­rice Mae­ter­linck.</p>
<p><em>Enre­gis­tre­ment recom­mandé :</em> <a href="http://www.allmusic.com/cg/amg.dll?p=amg&sql=43:78883">Pel­léas et Méli­sande</a>, avec Richard Stil­well, Fede­rica Von Stade, José Van Dam, Rug­gero Rai­mondi, l’Orches­tre phil­har­mo­ni­que de Ber­lin, sous la direc­tion d’Her­bert von Kara­jan. Edi­tions EMI («Great Recor­dings of the cen­tury»).</p>Kit 1urn:md5:5227d8cd91bbe6a3b91a1f69123e12972005-11-13T07:41:00+00:002009-01-02T10:00:07+00:00KozlikaThèmes pour Dotclear 11 colonne2 colonnesDotclear 1fixefluidekitspure cssthèmes<p>Un thème de base, des struc­tu­res, un blog dédié pour les per­son­na­li­sa­tions.</p> <p><img src="http://ateliers.klafoutis.org/public/themes-dc1/dotkits/kit1/screenshot.jpg" alt="screenshot.jpg" style="display:block; margin:0 auto;" title="screenshot.jpg, janv. 2008" /></p>
<p>Kit est un thème conçu pour les grands débu­tants en css. Volon­tai­re­ment basi­que (une seule cou­leur d’accom­pa­gne­ment, peu de « fio­ri­tu­res », uti­li­sa­tion des fichiers php par défaut), j’ai essayé de faire en sorte qu’il soit facile à per­son­na­li­ser et à com­plexi­fier à l’envi pour les plus har­dis.</p>
<p>Un <a href="http://themes.dotaddict.org/kit1/" title="Personnaliser le thème Kit">guide de per­son­na­li­sa­tion</a> livre quel­ques pis­tes pour amé­na­ger son blog sur la base de ce thème, accom­pa­gné d’exem­ples de codes et de cap­tu­res d’écran.</p>
<p>Le thème est livré par défaut en ver­sion fluide avec side­bar à droite. Sui­vez les ins­truc­tions de l’arti­cle Ins­tal­la­tion du blog asso­cié pour per­mu­ter le side­bar à gau­che et/ou fixer la lar­geur de la page. <a href="http://themes.dotaddict.org/galerie-dc1/tag/dotkit">Les liens de télé­char­ge­ment</a> du thème de base et ses varia­tions sont dis­po­ni­bles sur Dotad­dict.</p>Keldroledenomurn:md5:3f7e4f3546d16cc0c8bd8d24404beb732005-05-25T10:08:00+00:002009-01-02T09:57:53+00:00KozlikaThèmes pour Dotclear 12 colonnesDotclear 1fixepure cssthèmes<p>Volon­tai­re­ment sobre, mono­chro­ma­ti­que dans la gamme des gris avec des illus­tra­tions de type plan­ches natu­ra­lis­tes.</p> <p><a href="http://ateliers.klafoutis.org/public/themes-dc1/keldroledenom/keldroledenom.png"><img src="http://ateliers.klafoutis.org/public/themes-dc1/keldroledenom/.keldroledenom_m.jpg" alt="keldroledenom.png" style="display:block; margin:0 auto;" title="keldroledenom.png, nov. 2007" /></a></p>
<p>Un nou­veau thème <a href="http://www.kozlika.org/dotclear-chantier/?2005/02/10/38-fixe-fluide-elastique">élas­ti­que</a> à adap­ter à vos envies en rem­pla­çant les ima­ges et/ou les cou­leurs. Petit guide à l’usage de la per­son­na­li­sa­tion…</p>
<p>Les ima­ges : vous pou­vez les rem­pla­cer par des ima­ges de mêmes dimen­sions en glis­sant tout sim­ple­ment vos nou­veaux fichiers dans le réper­toire <code>images/</code>, soit en ayant pris soin de les nom­mer exac­te­ment de la même façon, soit en modi­fiant le nom des ima­ges dans le fichier <code>style.css</code> du réper­toire du thème.</p>
<p>Les cou­leurs uti­li­sées sont tou­tes dans la gamme des blancs et gris. Là encore, vous pou­vez repé­rer les cou­leurs et les modi­fier à votre guise par un cher­cher/rem­pla­cer sur ce même fichier <code>style.css</code>.</p>
<ul>
<li>#f5f5f5 : cou­leur du fond de fenê­tre et du fond des bouts de code</li>
<li>#fff : cou­leur du fond de page</li>
<li>#333 : cou­leur du texte</li>
<li>#666 : cou­leur des liens et des bou­tons de for­mu­laire</li>
<li>#ddd : cou­leur des bor­du­res diver­ses (titre du blog, cadre des ima­ges, etc)</li>
<li>#000 : cou­leur des titres des billets</li>
</ul>
<p>Si la taille des carac­tè­res vous sem­ble trop petite, rem­pla­cez <code>x-small</code> par <code>small</code> (atten­tion : la lar­geur de la page en sera un peu aug­men­tée).</p>
<h4>A savoir</h4>
<p>Outre les infor­ma­tions et aide à la per­son­na­li­sa­tions don­nées dans le billet pré­cé­dent, sachez que vous dis­po­sez de qua­tre clas­ses sup­plé­men­tai­res à uti­li­ser à votre gré dans vos billets ou dans votre tem­plate si vous y opé­rez des modifs :</p>
<ul>
<li><code>class ="cen­ter"</code> : pour cen­trer du texte</li>
<li><code>class="right"</code> : pour ali­gner du texte à droite</li>
<li><code>class="peti­tes-cap"</code> pour des majus­cu­les de taille réduite</li>
<li><code>class="petit"</code> pour des carac­tè­res plus petits</li>
</ul>
<p>Si vous uti­li­sez la syn­taxe wiki et que votre ver­sion de Dot­Clear est la 1.2.1 ou supé­rieure, vous pou­vez uti­li­ser ces clas­ses de la façon sui­vante :</p>
<pre>Sai­sie du billet comme à l'habi­tude en wiki avec les bali­ses aux­quel­les
vous êtes habi­tués
///html
<p class="cen­ter">Bon­jour &agrave; tous</p>
///
et reprise de la sai­sie en syn­taxe wiki.</pre>
<p>Enjoy, retours bien­ve­nus. :)</p>
<p>Les liens d’ins­tal­la­tion et de télé­char­ge­ment se trou­vent <a href="http://themes.dotaddict.org/galerie-dc1/details/Keldroledenom">dans le billet dédié</a> de Dotad­dict.</p>PDI Collectorurn:md5:b1a3482b1e10f4b085ded7b142ad60292005-05-02T17:31:00+00:002009-01-02T09:57:18+00:00KozlikaThèmes pour Dotclear 13 colonnesDotclear 1fixethèmes<p>Le thème du pre­mier Petit Dot­clear illus­tré, basé sur le thème par défaut de l’épo­que avec l’ajout d’une troi­sième colonne.</p> <p><a href="http://ateliers.klafoutis.org/public/themes-dc1/petitdot-v1/petitdot-v1.png"><img src="http://ateliers.klafoutis.org/public/themes-dc1/petitdot-v1/.petitdot-v1_m.jpg" alt="petitdot-v1.png" style="display:block; margin:0 auto;" title="petitdot-v1.png, nov. 2007" /></a></p>
<p>Un vrai-faux nou­veau thème puisqu’il s’agit de l’ancien thème créé à l’usage du Petit Dot­Clear illus­tré, réa­dapté à une uti­li­sa­tion plus cou­rante et actua­lisé pour le ren­dre com­pa­ti­ble avec la der­nière ver­sion de Dot­Clear 1.2.1.</p>
<p>En « home » un bloc de texte accueille vos visi­teurs. On le modi­fie dans le fichier <code>home.php</code>. En pied de page, un autre bloc de texte, per­ma­nent celui-là, peut con­te­nir un autre texte ; il se trouve dans le fichier <code>tem­plate.php</code>. En le dépla­çant à la fin du <code>fichier list.php</code> vous pou­vez l’uti­li­ser pour la pagi­na­tion par exem­ple. A vous de jouer !</p>
<p><a href="http://themes.dotaddict.org/galerie-dc1/details/PDI-Collector">Télé­char­ge­ment et démo</a> sur Dotad­dict.</p>Komtuveux du soirurn:md5:c3dce2a36025061ad480ebbfbe904bee2004-09-09T14:45:00+02:002009-01-02T10:55:56+01:00KozlikaThèmes pour Dotclear 12 colonnesDotclear 1fixepure cssthèmes<p>Vous pou­vez per­son­na­li­ser ce thème avec l’image de votre choix de mêmes dimen­sions que cel­les-ci (500 pixels en lar­geur et 300 pixels de hau­teur).</p> <p><a href="http://ateliers.klafoutis.org/public/themes-dc1/komtuveux2/komtuveux2.png"><img src="http://ateliers.klafoutis.org/public/themes-dc1/komtuveux2/.komtuveux2_m.jpg" alt="komtuveux2.png" style="display:block; margin:0 auto;" title="komtuveux2.png, nov. 2007" /></a></p>
<p><em>Kom­tu­veux du jour</em> et <em>Kom­tu­veux du soir</em>, deux varia­tions sur la même struc­ture : tailles fixes, place pour une grande image. La per­son­na­li­sa­tion devrait être rela­ti­ve­ment facile d’accès aux débu­tants car le code est beau­coup com­menté.</p>
<p><a href="http://themes.dotaddict.org/galerie-dc1/details/Komtuveux-du-soir">Fiche des­crip­tive et liens de télé­char­ge­ment</a> sur Dotad­dict.</p>Komtuveux du joururn:md5:8bcb4bbf463f9ed0730452ede500f9b12004-09-09T14:30:00+00:002009-01-02T09:55:12+00:00KozlikaThèmes pour Dotclear 12 colonnesDotclear 1fixethèmes<p>Vous pou­vez per­son­na­li­ser ce thème avec l’image de votre choix de mêmes dimen­sions que cel­les-ci (500 pixels en lar­geur et 300 pixels de hau­teur).</p> <p><a href="http://ateliers.klafoutis.org/public/themes-dc1/komtuveux1/komtuveux1.png"><img src="http://ateliers.klafoutis.org/public/themes-dc1/komtuveux1/.komtuveux1_m.jpg" alt="komtuveux1.png" style="display:block; margin:0 auto;" title="komtuveux1.png, nov. 2007" /></a></p>
<p><em>Kom­tu­veux du jour</em> et <em>Kom­tu­veux du soir</em>, deux varia­tions sur la même struc­ture : tailles fixes, place pour une grande image. La per­son­na­li­sa­tion devrait être rela­ti­ve­ment facile d’accès aux débu­tants car le code est beau­coup com­menté.</p>
<p>Vous pou­vez per­son­na­li­ser ce thème avec l’image de votre choix de mêmes dimen­sions que cel­les-ci (500 pixels en lar­geur et 300 pixels de hau­teur).</p>
<p><a href="http://themes.dotaddict.org/galerie-dc1/details/Komtuveux-du-jour">Fiche des­crip­tive et liens de télé­char­ge­ment</a> sur Dotad­dict.</p>