<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet title="XSL formatting" type="text/xsl" href="https://ateliers.klafoutis.org/feed/rss2/xslt" ?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Les ateliers du klafoutis - Mot-clé - pure css</title>
    <link>https://ateliers.klafoutis.org/</link>
    <atom:link href="https://ateliers.klafoutis.org/feed/tag/pure%20css/rss2" rel="self" type="application/rss+xml" />
    <description>Là où Kozlika tricote et détricote le html, les css et surtout Dotclear.</description>
    <language>fr</language>
    <pubDate>Fri, 15 May 2026 16:52:13 +0200</pubDate>
    <copyright></copyright>
    <docs>http://blogs.law.harvard.edu/tech/rss</docs>
    <generator>Dotclear</generator>
          <item>
        <title>Madame Butterfly</title>
        <link>https://ateliers.klafoutis.org/post/2006/07/09/Madame-Butterfly</link>
        <guid isPermaLink="false">urn:md5:3808ac4729721e534974f23ad3fd1bf8</guid>
        <pubDate>Sun, 09 Jul 2006 11:33:00 +0000</pubDate>
        <dc:creator>Kozlika</dc:creator>
                  <category>Thèmes pour Dotclear 1</category>
                          <category>2 colonnes</category>
                  <category>Dotclear 2</category>
                  <category>élastique</category>
                  <category>pure css</category>
                  <category>thèmes</category>
                <description>&lt;p&gt;But&amp;shy;ter&amp;shy;fly est une adap&amp;shy;ta&amp;shy;tion pour Dot&amp;shy;Clear 2 du thème &lt;a href=&quot;https://ateliers.klafoutis.org/post/2004/09/05/3-kimono&quot;&gt;Kimono pour DC1&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;&lt;img src=&quot;https://ateliers.klafoutis.org/public/themes-dc2/butterfly/butterfly.jpg&quot; alt=&quot;butterfly.jpg&quot; style=&quot;display:block; margin:0 auto;&quot; title=&quot;butterfly.jpg, oct. 2008&quot; /&gt;&lt;/p&gt;


&lt;p&gt;Pour per&amp;shy;son&amp;shy;na&amp;shy;li&amp;shy;ser ce thème, je recom&amp;shy;mande d&amp;#8217;ajou&amp;shy;ter les modi&amp;shy;fi&amp;shy;ca&amp;shy;tions ou ajouts dans le fichier cus&amp;shy;tom.css pré&amp;shy;sent dans le réper&amp;shy;toire du thème.&lt;/p&gt;


&lt;p&gt;Ce thème est CSS only (il uti&amp;shy;lise les fichiers html du thème par défaut).&lt;/p&gt;


&lt;p&gt;&lt;a href=&quot;http://themes.dotaddict.org/galerie-dc2/details/Madame-Butterfly&quot;&gt;Télé&amp;shy;char&amp;shy;ge&amp;shy;ment et démons&amp;shy;tra&amp;shy;tion&lt;/a&gt; sur Dotad&amp;shy;dict.&lt;/p&gt;


&lt;hr /&gt;


&lt;p&gt;&lt;strong&gt;Note&amp;#160;:&lt;/strong&gt; Madame But&amp;shy;ter&amp;shy;fly est l&amp;#8217;héroïne de &lt;a href=&quot;http://fr.wikipedia.org/wiki/Madame_Butterfly&quot;&gt;l&amp;#8217;opéra épo&amp;shy;nyme&lt;/a&gt;, com&amp;shy;posé par Gia&amp;shy;como Puc&amp;shy;cini sur un livret de Giu&amp;shy;seppe Gia&amp;shy;cosa et Luigi Illica. L&amp;#8217;ambiance du thème fait bien entendu allu&amp;shy;sion au fait que l&amp;#8217;opéra se situe au Japon. (Euh oui, les idéo&amp;shy;gram&amp;shy;mes sont chi&amp;shy;nois, vous n&amp;#8217;allez pas me chi&amp;shy;po&amp;shy;ter pour si peu&amp;#160;? ;-))&lt;/p&gt;


&lt;p&gt;Enre&amp;shy;gis&amp;shy;tre&amp;shy;ment recom&amp;shy;mandé&amp;#160;: &lt;a href=&quot;http://www.allmusic.com/cg/amg.dll?p=amg&amp;amp;token=&amp;amp;sql=43:53770&quot;&gt;Madame But&amp;shy;ter&amp;shy;fly&lt;/a&gt;, avec Mirella Freni, Luciano Pava&amp;shy;rotti, Christa Lud&amp;shy;wig, le Wie&amp;shy;ner Phil&amp;shy;har&amp;shy;mo&amp;shy;nic Orches&amp;shy;tra, sous la direc&amp;shy;tion d&amp;#8217;Her&amp;shy;bert von Kara&amp;shy;jan. Edi&amp;shy;tions EMI.&lt;/p&gt;</description>
        
              </item>
          <item>
        <title>Kit 1</title>
        <link>https://ateliers.klafoutis.org/post/2005/11/13/21-kit</link>
        <guid isPermaLink="false">urn:md5:5227d8cd91bbe6a3b91a1f69123e1297</guid>
        <pubDate>Sun, 13 Nov 2005 07:41:00 +0000</pubDate>
        <dc:creator>Kozlika</dc:creator>
                  <category>Thèmes pour Dotclear 1</category>
                          <category>1 colonne</category>
                  <category>2 colonnes</category>
                  <category>Dotclear 1</category>
                  <category>fixe</category>
                  <category>fluide</category>
                  <category>kits</category>
                  <category>pure css</category>
                  <category>thèmes</category>
                <description>&lt;p&gt;Un thème de base, des struc&amp;shy;tu&amp;shy;res, un blog dédié pour les per&amp;shy;son&amp;shy;na&amp;shy;li&amp;shy;sa&amp;shy;tions.&lt;/p&gt; &lt;p&gt;&lt;img src=&quot;https://ateliers.klafoutis.org/public/themes-dc1/dotkits/kit1/screenshot.jpg&quot; alt=&quot;screenshot.jpg&quot; style=&quot;display:block; margin:0 auto;&quot; title=&quot;screenshot.jpg, janv. 2008&quot; /&gt;&lt;/p&gt;


&lt;p&gt;Kit est un thème conçu pour les grands débu&amp;shy;tants en css. Volon&amp;shy;tai&amp;shy;re&amp;shy;ment basi&amp;shy;que (une seule cou&amp;shy;leur d&amp;#8217;accom&amp;shy;pa&amp;shy;gne&amp;shy;ment, peu de «&amp;#160;fio&amp;shy;ri&amp;shy;tu&amp;shy;res&amp;#160;», uti&amp;shy;li&amp;shy;sa&amp;shy;tion des fichiers php par défaut), j&amp;#8217;ai essayé de faire en sorte qu&amp;#8217;il soit facile à per&amp;shy;son&amp;shy;na&amp;shy;li&amp;shy;ser et à com&amp;shy;plexi&amp;shy;fier à l&amp;#8217;envi pour les plus har&amp;shy;dis.&lt;/p&gt;


&lt;p&gt;Un &lt;a href=&quot;http://themes.dotaddict.org/kit1/&quot; title=&quot;Personnaliser le thème Kit&quot;&gt;guide de per&amp;shy;son&amp;shy;na&amp;shy;li&amp;shy;sa&amp;shy;tion&lt;/a&gt; livre quel&amp;shy;ques pis&amp;shy;tes pour amé&amp;shy;na&amp;shy;ger son blog sur la base de ce thème, accom&amp;shy;pa&amp;shy;gné d&amp;#8217;exem&amp;shy;ples de codes et de cap&amp;shy;tu&amp;shy;res d&amp;#8217;écran.&lt;/p&gt;


&lt;p&gt;Le thème est livré par défaut en ver&amp;shy;sion fluide avec side&amp;shy;bar à droite. Sui&amp;shy;vez les ins&amp;shy;truc&amp;shy;tions de l&amp;#8217;arti&amp;shy;cle Ins&amp;shy;tal&amp;shy;la&amp;shy;tion du blog asso&amp;shy;cié pour per&amp;shy;mu&amp;shy;ter le side&amp;shy;bar à gau&amp;shy;che et/ou fixer la lar&amp;shy;geur de la page. &lt;a href=&quot;http://themes.dotaddict.org/galerie-dc1/tag/dotkit&quot;&gt;Les liens de télé&amp;shy;char&amp;shy;ge&amp;shy;ment&lt;/a&gt; du thème de base et ses varia&amp;shy;tions sont dis&amp;shy;po&amp;shy;ni&amp;shy;bles sur Dotad&amp;shy;dict.&lt;/p&gt;</description>
        
              </item>
          <item>
        <title>Keldroledenom</title>
        <link>https://ateliers.klafoutis.org/post/2005/05/25/18-keldroledenom</link>
        <guid isPermaLink="false">urn:md5:3f7e4f3546d16cc0c8bd8d24404beb73</guid>
        <pubDate>Wed, 25 May 2005 10:08:00 +0000</pubDate>
        <dc:creator>Kozlika</dc:creator>
                  <category>Thèmes pour Dotclear 1</category>
                          <category>2 colonnes</category>
                  <category>Dotclear 1</category>
                  <category>fixe</category>
                  <category>pure css</category>
                  <category>thèmes</category>
                <description>&lt;p&gt;Volon&amp;shy;tai&amp;shy;re&amp;shy;ment sobre, mono&amp;shy;chro&amp;shy;ma&amp;shy;ti&amp;shy;que dans la gamme des gris avec des illus&amp;shy;tra&amp;shy;tions de type plan&amp;shy;ches natu&amp;shy;ra&amp;shy;lis&amp;shy;tes.&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;https://ateliers.klafoutis.org/public/themes-dc1/keldroledenom/keldroledenom.png&quot;&gt;&lt;img src=&quot;https://ateliers.klafoutis.org/public/themes-dc1/keldroledenom/.keldroledenom_m.jpg&quot; alt=&quot;keldroledenom.png&quot; style=&quot;display:block; margin:0 auto;&quot; title=&quot;keldroledenom.png, nov. 2007&quot; /&gt;&lt;/a&gt;&lt;/p&gt;


&lt;p&gt;Un nou&amp;shy;veau thème &lt;a href=&quot;http://www.kozlika.org/dotclear-chantier/?2005/02/10/38-fixe-fluide-elastique&quot;&gt;élas&amp;shy;ti&amp;shy;que&lt;/a&gt; à adap&amp;shy;ter à vos envies en rem&amp;shy;pla&amp;shy;çant les ima&amp;shy;ges et/ou les cou&amp;shy;leurs. Petit guide à l&amp;#8217;usage de la per&amp;shy;son&amp;shy;na&amp;shy;li&amp;shy;sa&amp;shy;tion&amp;#8230;&lt;/p&gt;


&lt;p&gt;Les ima&amp;shy;ges&amp;#160;: vous pou&amp;shy;vez les rem&amp;shy;pla&amp;shy;cer par des ima&amp;shy;ges de mêmes dimen&amp;shy;sions en glis&amp;shy;sant tout sim&amp;shy;ple&amp;shy;ment vos nou&amp;shy;veaux fichiers dans le réper&amp;shy;toire &lt;code&gt;images/&lt;/code&gt;, soit en ayant pris soin de les nom&amp;shy;mer exac&amp;shy;te&amp;shy;ment de la même façon, soit en modi&amp;shy;fiant le nom des ima&amp;shy;ges dans le fichier &lt;code&gt;style.css&lt;/code&gt; du réper&amp;shy;toire du thème.&lt;/p&gt;


&lt;p&gt;Les cou&amp;shy;leurs uti&amp;shy;li&amp;shy;sées sont tou&amp;shy;tes dans la gamme des blancs et gris. Là encore, vous pou&amp;shy;vez repé&amp;shy;rer les cou&amp;shy;leurs et les modi&amp;shy;fier à votre guise par un cher&amp;shy;cher/rem&amp;shy;pla&amp;shy;cer sur ce même fichier &lt;code&gt;style.css&lt;/code&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;#f5f5f5&amp;#160;: cou&amp;shy;leur du fond de fenê&amp;shy;tre et du fond des bouts de code&lt;/li&gt;
&lt;li&gt;#fff&amp;#160;: cou&amp;shy;leur du fond de page&lt;/li&gt;
&lt;li&gt;#333&amp;#160;: cou&amp;shy;leur du texte&lt;/li&gt;
&lt;li&gt;#666&amp;#160;: cou&amp;shy;leur des liens et des bou&amp;shy;tons de for&amp;shy;mu&amp;shy;laire&lt;/li&gt;
&lt;li&gt;#ddd&amp;#160;: cou&amp;shy;leur des bor&amp;shy;du&amp;shy;res diver&amp;shy;ses (titre du blog, cadre des ima&amp;shy;ges, etc)&lt;/li&gt;
&lt;li&gt;#000&amp;#160;: cou&amp;shy;leur des titres des billets&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Si la taille des carac&amp;shy;tè&amp;shy;res vous sem&amp;shy;ble trop petite, rem&amp;shy;pla&amp;shy;cez &lt;code&gt;x-small&lt;/code&gt; par &lt;code&gt;small&lt;/code&gt; (atten&amp;shy;tion&amp;#160;: la lar&amp;shy;geur de la page en sera un peu aug&amp;shy;men&amp;shy;tée).&lt;/p&gt;


&lt;h4&gt;A savoir&lt;/h4&gt;

&lt;p&gt;Outre les infor&amp;shy;ma&amp;shy;tions et aide à la per&amp;shy;son&amp;shy;na&amp;shy;li&amp;shy;sa&amp;shy;tions don&amp;shy;nées dans le billet pré&amp;shy;cé&amp;shy;dent, sachez que vous dis&amp;shy;po&amp;shy;sez de qua&amp;shy;tre clas&amp;shy;ses sup&amp;shy;plé&amp;shy;men&amp;shy;tai&amp;shy;res à uti&amp;shy;li&amp;shy;ser à votre gré dans vos billets ou dans votre tem&amp;shy;plate si vous y opé&amp;shy;rez des modifs&amp;#160;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;class =&quot;cen&amp;shy;ter&quot;&lt;/code&gt;&amp;#160;: pour cen&amp;shy;trer du texte&lt;/li&gt;
&lt;li&gt;&lt;code&gt;class=&quot;right&quot;&lt;/code&gt;&amp;#160;: pour ali&amp;shy;gner du texte à droite&lt;/li&gt;
&lt;li&gt;&lt;code&gt;class=&quot;peti&amp;shy;tes-cap&quot;&lt;/code&gt; pour des majus&amp;shy;cu&amp;shy;les de taille réduite&lt;/li&gt;
&lt;li&gt;&lt;code&gt;class=&quot;petit&quot;&lt;/code&gt; pour des carac&amp;shy;tè&amp;shy;res plus petits&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Si vous uti&amp;shy;li&amp;shy;sez la syn&amp;shy;taxe wiki et que votre ver&amp;shy;sion de Dot&amp;shy;Clear est la 1.2.1 ou supé&amp;shy;rieure, vous pou&amp;shy;vez uti&amp;shy;li&amp;shy;ser ces clas&amp;shy;ses de la façon sui&amp;shy;vante&amp;#160;:&lt;/p&gt;


&lt;pre&gt;Sai&amp;shy;sie du billet comme à l'habi&amp;shy;tude en wiki avec les bali&amp;shy;ses aux&amp;shy;quel&amp;shy;les 
vous êtes habi&amp;shy;tués
///html
&amp;lt;p class=&quot;cen&amp;shy;ter&quot;&amp;gt;Bon&amp;shy;jour &amp;amp;agrave; tous&amp;lt;/p&amp;gt;
///
et reprise de la sai&amp;shy;sie en syn&amp;shy;taxe wiki.&lt;/pre&gt;


&lt;p&gt;Enjoy, retours bien&amp;shy;ve&amp;shy;nus. :)&lt;/p&gt;


&lt;p&gt;Les liens d&amp;#8217;ins&amp;shy;tal&amp;shy;la&amp;shy;tion et de télé&amp;shy;char&amp;shy;ge&amp;shy;ment se trou&amp;shy;vent &lt;a href=&quot;http://themes.dotaddict.org/galerie-dc1/details/Keldroledenom&quot;&gt;dans le billet dédié&lt;/a&gt; de Dotad&amp;shy;dict.&lt;/p&gt;</description>
        
              </item>
          <item>
        <title>Komtuveux du soir</title>
        <link>https://ateliers.klafoutis.org/post/2004/09/09/Komtuveux-du-soir</link>
        <guid isPermaLink="false">urn:md5:c3dce2a36025061ad480ebbfbe904bee</guid>
        <pubDate>Thu, 09 Sep 2004 14:45:00 +0200</pubDate>
        <dc:creator>Kozlika</dc:creator>
                  <category>Thèmes pour Dotclear 1</category>
                          <category>2 colonnes</category>
                  <category>Dotclear 1</category>
                  <category>fixe</category>
                  <category>pure css</category>
                  <category>thèmes</category>
                <description>&lt;p&gt;Vous pou&amp;shy;vez per&amp;shy;son&amp;shy;na&amp;shy;li&amp;shy;ser ce thème avec l&amp;#8217;image de votre choix de mêmes dimen&amp;shy;sions que cel&amp;shy;les-ci (500 pixels en lar&amp;shy;geur et 300 pixels de hau&amp;shy;teur).&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;https://ateliers.klafoutis.org/public/themes-dc1/komtuveux2/komtuveux2.png&quot;&gt;&lt;img src=&quot;https://ateliers.klafoutis.org/public/themes-dc1/komtuveux2/.komtuveux2_m.jpg&quot; alt=&quot;komtuveux2.png&quot; style=&quot;display:block; margin:0 auto;&quot; title=&quot;komtuveux2.png, nov. 2007&quot; /&gt;&lt;/a&gt;&lt;/p&gt;


&lt;p&gt;&lt;em&gt;Kom&amp;shy;tu&amp;shy;veux du jour&lt;/em&gt; et &lt;em&gt;Kom&amp;shy;tu&amp;shy;veux du soir&lt;/em&gt;, deux varia&amp;shy;tions sur la même struc&amp;shy;ture&amp;#160;: tailles fixes, place pour une grande image. La per&amp;shy;son&amp;shy;na&amp;shy;li&amp;shy;sa&amp;shy;tion devrait être rela&amp;shy;ti&amp;shy;ve&amp;shy;ment facile d&amp;#8217;accès aux débu&amp;shy;tants car le code est beau&amp;shy;coup com&amp;shy;menté.&lt;/p&gt;


&lt;p&gt;&lt;a href=&quot;http://themes.dotaddict.org/galerie-dc1/details/Komtuveux-du-soir&quot;&gt;Fiche des&amp;shy;crip&amp;shy;tive et liens de télé&amp;shy;char&amp;shy;ge&amp;shy;ment&lt;/a&gt; sur Dotad&amp;shy;dict.&lt;/p&gt;</description>
        
              </item>
      </channel>
</rss>
