Mot-clé : fluide

Détails du thème

Cliquez sur les vignettes pour afficher la taille réelle.

Constantes

• La boîte de recherche propose dynamiquement des suggestions de résultats ; c'est basé sur le plugin jQuery LiveSearch ; l'implémentation est identique (et pour cause puisque c'est là que j'ai récupéré la fonction ) à celle du thème Noviny.
• Le menu horizontal, tout en haut à droite de la page reprend les quatre items « standard » de ce qu'on trouve sur tous les blogs actuellement. Il présuppose que vous créiez une page (Pages) dont la partie titre de l'url sera About et que vous installiez le plugin Contact Me. Si vous souhaitez modifier ou supprimer tout ou partie de ces liens, éditez le fichier _top.html
• Tous les widgets sont situés en bas de la page, à l'exception de la recherche.

Accueil

La colonne de gauche du billet accueille une vignette de la première image du billet, s'il n'y a pas d'image dans le billet mais que la description de la catégorie à laquelle il appartient en possède une, c'est cette image qui sera affichée. Si ni l'une ni l'autre n'existe cette colonne reste vide.

La colonne de droite est prévue pour un bloc de présentation rapide à l'intention des nouveaux venus sur votre blog. Pour en rédiger le contenu, éditez le fichier _home-aside.html.

Archives

C'est un projet que j'avais depuis longtemps parce que ça me semble plus logique : la page des archives permet de fouiller dans les archives du blog selon trois critères : chronologique, par catégorie, par tag ou d'y effectuer une recherche libre.

Si vous avez des souhaits supplémentaires pour cette page – par exemple si vous avez installé un plugin permettant le tri par auteurs, manifestez-vous dans les commentaires du présent billet pour que je vous aide à ajouter ce critère.

Billet seul

Un autre de mes dadas. Mettre en valeur le chapô (champ Extrait lors de la saisie du billet) traité comme une véritable accroche de l'article. Appuyé sur le flanc gauche du billet il est en caractères serif, plus gros que le corps du billet et en italique. Je décommande du coup l'usage d'images dans ces extraits (ou veiller à ce qu'elles soient petites, sinon ça va être super moche).

Les intertitres de niveau h3 à h6, en petites majuscules, sont également en police serif. Les détails de mise en forme des différentes balises peuvent être observés sur le blog de démonstration de DotAddict (du moins dès que j'y aurai déposé ce thème).

En affichant en taille réelle la réduction ci-contre, vous pourrez également avoir un aperçu du traitement des commentaires.

Résultats d'une recherche, liste des billets d'une catégorie

Ces deux contextes se voient dotés d'un bandeau sur la droite. Ce bandeau accueille dans le premier cas l'ensemble des résultats de la recherche et dans le deuxième cas l'ensemble des billets de la catégorie sous la forme d'une liste des titres des billets concernés. Dans le cas du tri par catégorie c'est en haut de ce bandeau que se trouveront la description et les liens d'abonnement aux billets de la catégorie.

Ce bandeau est présent à l'identique sur toutes les pages du contexte.

Page 404

Vous pourrez encore enrichir cette page à votre idée (en éditant le fichier 404.html) qui comporte d'ores et déjà des liens pour se rendre sur la page globale des archives, vers la page de contact et vers le bloc de recherche.

Pour le bloc de recherche j'ai hésité un peu à le « sortir » du haut de page pour l'intégrer dans le corps de page comme pour les archives. Si d'aucuns d'entre vous le souhaitent j'expliquerai ici comment faire.

On peut le prendre ?

Oui et non. Je suis en vacances et n'ai pas d'Internet Explorer 6 ou 7 sous la main pour tester les pages (je me méfie de l'extension pour Firefox qui s'est révélée ne pas être fiable à 100%).

Je serais donc ravie si quelques-uns des lecteurs de ce billet acceptaient de télécharger le thème (lien zip en pièce jointe) et le soumettre à la torture sur un poste Windows et Internet Explorer pour que je sois informée des bugs éventuels et puisse les corriger avant de le distribuer officiellement sur DotAddict. Je n'ai pas testé ni pu faire tester sous Linux non plus…

Pendant quelques jours

Vous pouvez le visualiser in situ ici (mais pas longtemps car je dois repasser sur Magda pour y bosser et parce que je dois reprendre tous mes articles ici pour les débarrasser de vieilleries qui me servaient sur un autre thème et que j'ai des soucis avec le switcher).

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

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. S’y trou­vent d’ores et déjà les règles néces­sai­res à la pré­sen­ta­tion du calen­drier si vous choi­sis­sez d’ajou­ter le plu­gin Day­Mode.

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 : Gia­como est l’un des per­son­na­ges de l’opéra-comi­que Fra Dia­volo, com­posé par Fran­çois Auber sur un livret d’Eugène Scribe. L’his­toire, aussi enle­vée que la musi­que, évo­que une sorte de Robin des Bois à la sauce ita­lienne.

Enre­gis­tre­ment recom­mandé : Fra Dia­volo, avec Maddy Mes­plé et l’immense Nico­laï Gedda, le Monte Carlo Phil­har­mo­nic Orches­tra, sous la direc­tion d’Alain Lan­ce­ron. Edi­tions EMI.

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.

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

La con­ser­va­tion du wid­get des liens de syn­di­ca­tion dans le ban­deau d’extra est néces­saire à sa bonne pré­sen­ta­tion. Con­tac­tez-moi si vous vou­lez le faire dis­pa­raî­tre pour qu’on trouve une autre solu­tion.

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

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.

Démo et télé­char­ge­ment sur Dotad­dict.

Note : Marie est l’héroïne de l’opéra La Fille du régi­ment, com­posé par Gae­tano Doni­zetti sur un livret de Jules Henri Ver­noy Mar­quis de St-Geor­ges et Jean Fran­çois Alfred Bayard en 1840. Les cou­leurs bleu, blanc et rouge évo­quent l’un des plus célè­bres airs de cet opéra, « Salut à la France ». J’aime beau­coup cet opéra.

Enre­gis­tre­ment recom­mandé : La Fille du régi­ment, avec Beverly Sills, Fer­nando Corena, Grey­son Hirst, l’Ame­ri­can Opera Society, sous la direc­tion de Roland Gagnon. Edi­tions Opera d’Oro.

La con­ser­va­tion du wid­get des liens de syn­di­ca­tion dans le ban­deau d’extra est néces­saire à la bonne pré­sen­ta­tion de ce thème. Con­tac­tez-moi si vous vou­lez le faire dis­pa­raî­tre pour qu’on trouve une autre solu­tion.

Pour le per­son­na­li­ser, 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.

Le fichier archive_month.html a été personnalisé^[1] le reste est en css only.

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

Démo et télé­char­ge­ment sur Dotad­dict.

Note : Lakmé est l’héroïne de l’opéra du même nom, com­posé par Léo Déli­bes sur un livret d’Edmond Gon­di­net en 1883. La fleur de jas­min du top fait réfé­rence au duo célè­bre extrait de cet opéra dit « Duo des Fleurs ». C’est l’un de mes opé­ras pré­fé­rés.

Enre­gis­tre­ment recom­mandé : Lakmé, avec Nata­lie Des­say, Gre­gory Kunde, José Van Dam, l’Orches­tre du Capi­tole de Tou­louse et dirigé par Michel Plas­son. 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.

Comme pro­mis, un autre thème fluide en trois colon­nes, qui doit tout à ce modèle de web pro­du­cer : http://www.web­pro­du­cer.at/flexi­ble-….

His­toire de ne pas lais­ser l’été s’envo­ler, un thème à la gloire des sor­bets… Kiwi Cas­sis peut retrou­ver une allure plus sobre en modi­fiant les cou­leurs ;-). Si vous ne savez com­ment opé­rer ces modi­fi­ca­tions c’est que vous n’avez pas encore appris par cœur Le Petit Dot­Clear illus­tré, notam­ment l’arti­cle « Votre blog à vos cou­leurs », et ça c’est pas bien !

La lar­geur de la page s’ajuste à celle de la fenê­tre du navi­ga­teur en con­ser­vant les mar­ges indi­quées dans la feuille de style (fichier style.sss) par la règle de #page :

#page {
	mar­gin: 24px 36px;
	text-align:left;
	back­ground:#fff;
}

24px est la valeur des mar­ges haute et basse et 36px la valeur des mar­ges gau­che et droite. Ajus­tez-les comme bon vous sem­ble en modi­fiant ces deux valeurs.

Fiche détaillée et liens de télé­char­ge­ment sur Dotad­dict.

Un thème en trois colon­nes pour Dot­clear 1. Le con­tenu de la colonne de gau­che se modi­fie en édi­tant le fichier extra.txt situé dans le réper­toire du thème. Ce fichier inter­prète la syn­taxe wiki.

Ce thème embar­que tout le néces­saire pour affi­cher la barre d’enri­chis­se­ment typo­gra­phi­que pour les com­men­tai­res (aka wiki­bar). Pour sa mise en œuvre, il vous suf­fit d’indi­quer dans la con­fi­gu­ra­tion du blog que vous accep­tez les com­men­tai­res en syn­taxe wiki.

Edit 25/12/2007. Les cou­leurs de ce thème res­pec­taient cel­les du thème par défaut de l’épo­que. Je dois avouer aujourd’hui que s’il me sem­blait oppor­tun de faire ainsi, je n’aime ni ces cou­leurs ni les layouts en trois colon­nes menu-cen­tre-menu. Mais force m’est de cons­ta­ter que ce thème rem­porta un très grand suc­cès :-D

Fiche détaillée et liens de télé­char­ge­ment sur Dotad­dict.