Mot-clé : 2 colonnes

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 plan.php.

Trucs kifon­joli et trucs pra­ti­ques :

• Le lien de retour à l’accueil (quand on n’est pas à l’accueil, sinon rien) porte la date du billet le plus récent.
• Le car­tou­che sous la sau­te­relle con­tex­tua­lise la page affi­chée.
• 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.
• Le calen­drier des billets est en forme de “ruban” à plat.
• 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.

• Pour les per­son­na­li­sa­tions :
  • 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.
  • 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)

Liens de télé­char­ge­ment sur the­mes.dotad­dict.org.

A la demande de l’ami Biou pour son blog et d’autres aupa­ra­vant, j’ai ter­miné la varia­tion pour deux colon­nes du thème Welsh 2.0.

Il est livré dans le même embal­lage que Welsh 2.0 en trois colon­nes. Pour uti­li­ser la ver­sion en deux colon­nes, créer un réper­toire nommé 3cols-files dans le réper­toire du thème Welsh et y pla­cer les fichiers :

• layout.css
• screen­shot.jpg
• style.css

Puis dépla­cer les trois fichiers con­te­nus dans le réper­toire 2cols-files à la place de ceux que vous venez de reti­rer.

(Pour ne pas nous épar­piller, merci de n’uti­li­ser les com­men­tai­res du pré­sent billet que pour les ques­tions spé­ci­fi­ques à cette varia­tion et de poser vos ques­tions géné­ra­les sur ce thème dans le billet de Welsh 2.0.)

Papa­geno est un thème de lar­geur fixe ou fluide sur deux colon­nes.

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 :

	width : 87%;

par :

	width : 780px; /* ou autre valeur de votre choix */

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.

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.)

Appel à vos con­tri­bu­tions

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 ;)

• Sous Safari, les deux liens Accueil et Archi­ves ne veu­lent pas se pla­cer côte à côte.
• 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.

Télé­char­ge­ment et démons­tra­tion sur Dotad­dict.

Note : Papa­geno est l’un des per­son­na­ges de l’opéra La Flûte enchan­tée, 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.

Enre­gis­tre­ment recom­mandé : 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 rece­vra ma pré­fé­rence.

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.

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/.

Edit 18 sep­tem­bre 07 : mise à jour du thème pour modif du fichier _top.html : {{tpl:Meta­Per­cent}} devient {{tpl:Meta­Round­Per­cent}}. Merci Erno !

Télé­char­ge­ment et démons­tra­tion sur Dotad­dict.

Note : Her­mione, la femme de Leon­tes, roi de Bohême, est l’héroïne de l’opéra Win­termär­chen (Les con­tes d’hiver), com­posé en 1999 par Phi­lippe Boes­mans sur un livret d’après la pièce épo­nyme de William Sha­kes­peare. En voici un extrait.

Enre­gis­tre­ment recom­mandé : A ma con­nais­sance il n’en existe qu’un Win­termär­chen, 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.

Pour per­son­na­li­ser, je recom­mande de faire les modi­fi­ca­tions ou ajouts dans le fichier cus­tom.css pré­sent dans le réper­toire du thème.

Le fichier archive_month.html a été per­son­na­lisé^[1] le reste est en css only.

Télé­char­ge­ment et démons­tra­tion sur Dotad­dict.

Note : Bas­tienne est l’une des deux héros de l’opéra Bas­tien et Bas­tienne, com­posé par Mozart en 1768, soit à l’âge de 12 ans… L’his­toire est lar­ge­ment ins­pi­rée du Devin du vil­lage de Jean-Jac­ques Rous­seau. J’ai choisi ce nom bien évi­dem­ment en rai­son de la “fraî­cheur” - du moins je l’espère, du gra­phisme et du jeune âge tant de Mozart lorsqu’il écri­vit cet opéra que des per­son­na­ges cen­traux.

Enre­gis­tre­ment recom­mandé : Le très joli DVD Bas­tien et Bas­tienne, avec de très jeu­nes inter­prè­tes diri­gés par Nico­las Porte (CLC Pro­duc­tions).

Pour per­son­na­li­ser ce thème, je recom­mande d’effec­tuer les modi­fi­ca­tions ou ajouts dans le fichier cus­tom.css pré­sent dans le réper­toire du thème.

Le fichier archive_month.html a été per­son­na­lisé^[1] le reste est en css only.

Télé­char­ge­ment et démons­tra­tion sur Dotad­dict.

Note : Obé­ron est le héros de l’opéra du même nom, com­posé en 1826 par Karl Maria von Weber sur un livret de James Robin­son Plan­ché, d’après Les Son­ges d’une nuit d’été de William Sha­kes­peare A Mid­sum­mer Night’s Dream. « Le chan­teur Roth, a décrit une pro­me­nade qu’il fit pen­dant l’été de 1824 avec Weber dans la cam­pa­gne de Dresde : la lumière était éblouis­sante et l’on n’enten­dait pas un son, sinon un très léger et loin­tain bour­don­ne­ment d’insec­tes. Weber s’arrêta, mit un doigt sur sa bou­che et mur­mura : Obe­ron. » A. Coe­roy (Source.)

Enre­gis­tre­ment recom­mandé : Obé­ron, avec Steve Davis­lim, Hil­levi Mar­tin­pelto, Mon­te­verdi Choir, Orches­tre révo­lu­tion­naire et roman­ti­que, sous la direc­tion de John Eliot Gar­di­ner. Edi­tions Deut­sche Gram­mo­phon.

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.

Télé­char­ge­ment et démons­tra­tion sur Dotad­dict.

Note : Méli­sande est l’héroïne de l’opéra Pel­léas et Méli­sande, com­posé en 1893 par Claude Debussy sur un livret d’après la pièce de Mau­rice Mae­ter­linck.

Enre­gis­tre­ment recom­mandé : Pel­léas et Méli­sande, 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»).

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.

Ce thème est CSS only (il uti­lise les fichiers html du thème par défaut).

Télé­char­ge­ment et démons­tra­tion sur Dotad­dict.

Note : Madame But­ter­fly est l’héroïne de l’opéra épo­nyme, com­posé par Gia­como Puc­cini sur un livret de Giu­seppe Gia­cosa et Luigi Illica. L’ambiance du thème fait bien entendu allu­sion au fait que l’opéra se situe au Japon. (Euh oui, les idéo­gram­mes sont chi­nois, vous n’allez pas me chi­po­ter pour si peu ? ;-))

Enre­gis­tre­ment recom­mandé : Madame But­ter­fly, avec Mirella Freni, Luciano Pava­rotti, Christa Lud­wig, le Wie­ner Phil­har­mo­nic Orches­tra, sous la direc­tion d’Her­bert von Kara­jan. Edi­tions EMI.

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.

Un guide de per­son­na­li­sa­tion 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.

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. Les liens de télé­char­ge­ment du thème de base et ses varia­tions sont dis­po­ni­bles sur Dotad­dict.

Hotel Room est un thème élas­ti­que (la lar­geur s’adapte à celle de l’écran). L’idée m’en est venue après la lec­ture d’un billet chez Nonal, qui aime Hop­per autant que moi. Pour le voir, on cli­que là, pour tes­ter le rendu des bali­ses xhtml/wiki vous pou­vez affi­cher le billet de test.

Comme pour la plu­part de mes autres thè­mes, j’ai ajouté des clas­ses uti­li­sa­bles lors de la sai­sie des billets : center pour cen­trer, right pour ali­gner le texte à droite, peti­tes-cap pour les peti­tes majus­cu­les.

Si vous uti­li­sez la syn­taxe wiki, il suf­fit de pas­ser le temps de cette mise en forme en syn­taxe html comme dans l’exem­ple sui­vant :

///html
<p class="right">Zan­zi­bar, le 23 jan­vier 1975.</p>
///

Télé­char­ge­ment et démo sur Dotad­dict.

Un nou­veau thème élas­ti­que à 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…

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 images/, 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 style.css du réper­toire du thème.

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 style.css.

• #f5f5f5 : cou­leur du fond de fenê­tre et du fond des bouts de code
• #fff : cou­leur du fond de page
• #333 : cou­leur du texte
• #666 : cou­leur des liens et des bou­tons de for­mu­laire
• #ddd : cou­leur des bor­du­res diver­ses (titre du blog, cadre des ima­ges, etc)
• #000 : cou­leur des titres des billets

Si la taille des carac­tè­res vous sem­ble trop petite, rem­pla­cez x-small par small (atten­tion : la lar­geur de la page en sera un peu aug­men­tée).

A savoir

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 :

• class ="cen­ter" : pour cen­trer du texte
• class="right" : pour ali­gner du texte à droite
• class="peti­tes-cap" pour des majus­cu­les de taille réduite
• class="petit" pour des carac­tè­res plus petits

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 :

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.

Enjoy, retours bien­ve­nus. :)

Les liens d’ins­tal­la­tion et de télé­char­ge­ment se trou­vent dans le billet dédié de Dotad­dict.

Kom­tu­veux du jour et Kom­tu­veux du soir, 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é.

Fiche des­crip­tive et liens de télé­char­ge­ment sur Dotad­dict.