Kimono sur mesures
Par Kozlika le mercredi 23 juin 2004, 19:55 - Lien permanent
MAJ le 28/9/2004
Les liens et les démos sont désormais regroupés sur le blog Mes thèmes pour DotClear
MAJ le 28/8/2004
- suppression de la ligne de 1px entre main et prelude visible sous Mozilla
- modif des images de gif vers png pour alléger le poids des fichiers
- ajout d'un padding latéral aux titres des billets pour qu'ils ne «collent» pas aux kanjis
MAJ le 19/8/2004
Julien m'a envoyé les images dans un format moins lourd. Je les mettrai dans l'archive dès que... je m'en serai occupée.
Ah et puis j'aime beaucoup ce que dwen en a fait aussi.
MAJ le 1/7/2004
Toujours à faire mumuse avec les css, je viens de finir un nouveau thème, "Kimono". Ce thème est élastique : c'est-à-dire que toutes les mesures sont proportionnelles à la taille de caractères que le visiteur détermine pour son navigateur, se redimensionne s'il demande un affichage avec une police plus grande ou plus petite. Ne pas confondre, donc avec les mises en pages fluides qui, elles, redimensionnent les blocs en fonction de la taille de l'écran.
Je l'ai testé sur les navigateurs que j'ai sous la main : Safari, Firefox, IE5, Mozilla. Apparemment, tout marche.
Le serveur de www.danvine.com est saturé (comme souvent hélas) alors si d'aucuns visiteurs windowsiens ou linuxautes passaient par là et voulaient bien m'informer de la bonne ou mauvaise tenue de ce nouveau costume j'en serais ravie. J'aimerais aussi savoir si les 600x400 ont ou non l'ascenseur horizontal.
Que de questions, que de questions... ;-) A vos navigateurs !
MàJ 26 juin 2004 1. Le thème est disponible en zip et/ou en URL à indiquer dans l'interface d'administration :
- Fichier zip :
http://www.kozlika.org/kozeries/share/theme-kimono-1.1.zip - Installation depuis l'interface d'administration :
http://www.kozlika.org/kozeries/share/theme-kimono-1.1.pkg.gz
Je laisse ici pour quelques jours le thème exactement tel qu'il apparaît avec le template par défaut. J'ai fait 2-3 modifs par rapport à la feuille de style que j'utilise avec le switcher, notamment pour que le calendrier se place bien. Suite à la remarque d'Olivier j'ai essayé d'arranger un peu l'image du bandeau aussi. Mais si vous êtes plus doués que moi, n'hésitez pas à la retoucher et me la renvoyer pour en faire profiter les petits copains ;-)
2. Je me rends compte que quand la ligne d'auteur et date sous le titre du billet est un peu longue, ça cogne dans les caractères japonais. Pour corriger cela, ouvrir la feuille de styles et ajouter un padding-top:0.5em; dans les paramètres de .post-info
MàJ 27 juin 2004
1. ST a gentiment retouché l'image du bandeau, l'image est plus nette et le détourage boooocoup plus propre. Je referai le packaging (avec aussi la modif pour décoller la ligne auteur/date) mais si vous avez déjà installé le thème il suffit de remplacer l'image bonzen.gif d'origine par celle-ci :
http://www.kozlika.org/kozeries/themes/kimono/imgkimono/bonzen.gif
Nettement mieux, non ? ;-)
2. C'est tout ce que j'aime... quand on s'y met à plusieurs le résultat est souvent bien meilleur. Julien d'Un blog inutile de plus nous donne les vrais kanjis pour « écrire, lire, penser » -- ceux que j'avais mis signifiaient en réalité écrire, livre, penser. Et en plus ils sont bien plus proprement calligraphiés. :-) Un blog bien utile finalement, Julien !
MàJ 1er juillet 2004 Le thème a été modifié pour tenir compte de quelques bugs et remplacer les images retouchées.
- Fichier zip :
http://www.kozlika.org/kozeries/share/theme-kimono-1.1.zip - Installation depuis l'interface d'administration :
http://www.kozlika.org/kozeries/share/theme-kimono-1.1.pkg.gz
Modifs efffectuées : - Grace a ST et Julien les images sont mieux detourees et les kanjis sont les bons (ecrire, lire, penser) - Un etat liens visites (a:visited) de couleur differente a ete ajoute - Le survol des menus ne cree plus de renvois en bas de page du sidebar dans Internet Explorer 6 - Un leger espacement a ete ajoute sous le titre des billets pour que la ligne suivante ne chevauche plus les kanjis - Le display:block pour les codes a ete desactive car il buguait pour IE5/Mac. N'hésitez pas à me communiquer d'autres dysfonctionnements ou suggérer des améliorations.
MàJ 28 août 2004
Les liens :
- Fichier zip :
http://www.kozlika.org/kozeries/share/theme-kimono-1.2.zip - Installation depuis l'interface d'administration :
http://www.kozlika.org/kozeries/share/theme-kimono-1.2.pkg.gz
Commentaires
Superbe sous Firefox 0.8 et Windows XP... Quel talent ! Félicitations pour ton travail, ton blog, ton aide toujours précieuse et la manière que tu as de faire partager tes connaissances !
Un fan :-)
Très joli travail, aussi bien en terme de design qu'en terme de technique :)
3 choses à ajouter:
- Petit bug avec Opera, les flèches de la colonne de droite apparaissent après les liens et pas avant (ce navigateur a beaucoup de mal avec les CSS)
- 600x400 çà n'existe pas :P c'est 640x480 et çà passe très bien :) et sans ascenceur horizontal ;)
- pour le test je suis passé quelques instants en résolution 640x480 ... et c'est atroce. Véritabelment invivable o_O
Au delà de son côté élastique... ce thème est haïkesque... très joli, je trouve.
C'est très joli. Une seule remarque, l'image du haut gagnerai être détourée plus proprement. Ça pixellise et c'est un peu dommage.
Sinon, c'est très joli, bravo :)
ST --> Merci cher inconnu. Je vais ajouter Fx/Windows à la liste "qui passe bien". (Eh, fan juste pour rire, hein, j'aurais horreur de ça ;-) )
Angrave --> J'ai modifié le positionnement des flèches en ajoutant les coordonnées horizontales, ça va mieux comme ça ?
Obni --> merci :-)
Olivier --> Je ne suis pas très douée traitement de l'image et je n'ai pas illustrator, donc je détoure avec la gomme et sous Photoshop Element et c'est pas génial, je te l'accorde. Je vais essayer d'arranger ça du mieux que je peux, merci de me l'avoir signalé.
En fait tu n'as pas besoin d'Illustrator. Tu peux le faire je pense avec Photoshop LE. Il faut que tu fasses un masque sur le calque avec ton image. Après tu détoure avec un pinceau pas trop dur. L'avantage du masque c'est que quand tu remplis en noir, ça efface, et en blanc ça remet (ça fait plein d'autres choses mais pour un détourage c'est pratique).
Et puis si Photoshop LE sait pas faire de masque => http://gimp.org/
Toujours hyperactive ! bel effort.
2 points de détail: style-kimono.css comprend à la fois des LF et des CR-LF. Il vaut mieux ne pas mélanger les indicateurs de fin de ligne.
l'adresse est http://citrusmoon.typepad.com/
Hou la, cymago, au secours, cékoidonc des LF et des CR-LF ?
Oui, bien sûr il ne fallait pas entendre "fan" comme "fanatique". C'était juste une manière un brin excessive (je te l'accorde) de dire que "j'aime-beaucoup-ce-que-vous-faîtes". Je te rassure : j'aime beaucoup de monde car je suis très impressionnable, en informatique. :-) La mise en ligne de cette feuille de style est une excellente nouvelle ! As-tu des problèmes avec le "détourage" de l'image ? Si c'est le cas, je veux bien aider.
Ouiiiiiiiiiiiiiiiii :-) volontiers ! Si tu télécharges le fichier zip, l'image est dedans...
Comment t'écrire ?
Je viens de t'envoyer un mail. Comme j'ai installé avec le template par défaut, l'info a disparu. Je la remets aussi ci-dessus dans ma signature de ce commentaire.
Je voulais également te refaire les kanjis pour les rendre plus lisibles (comme ceux que j'ai faits pour mon site web), mais ne lisant pas couramment le japonais, j'ai de la peine à les identifier. Tu ne les aurais pas sous forme textuel (et un encodage quelconque) par hasard ?
Julien :
C'est "écrire, lire, penser". Je l'ai trouvé sur un site d'apprentissage du japonais (me souviens plus de l'adresse) et c'était sous forme d'image. Je crois me souvenir qu'il y a un blogueur franco-japonais chez Dotclear si je le retrouve on peut peut-être lui demander ?
Ah, le voilà : http://www.loisant.org/weblog/
Tu veux bien t'en occuper ?
Kozlika, j'ai copié (toute honte bue) la 1ère page de ton site http://club007france.free.fr/ c'est pour Olivier (un autre). Et c'est pas de l'opéra, ou alors du "space opera".
Pas de problème, cymago, je te propose même une amélioration... retourne voir ma page d'accueil. Mais fais vite, je ne vais pas laisser l'image longtemps ;-)< br/> As d'hab, l'image n'est pas bien détourée... c'est juste pour donner une idée.
merci
c'est fait. Quel boulot. D'abord une nouvelle image avec fond transparent, coller bond, puis baguette magique ...
Cymago --> Ah oui, je suis allée voir. Je préfère comme ça. Et une fois de plus le détourage est nettement plus réussi que par moi. (Il faut vraiment que je me mette plus sérieusement à ces trucs-là... à commencer par installer Gimp, donc X11...). Je trouve que ça serait encore mieux si le rond débordait en haut et à gauche mais chacun ses goûts.
A part ça, je crois que j'ai en partie résolu le pb du haut de ce thème. L'apparence est désormais strictement la même sur mes navigateurs Mac : sidebar et top strictement alignés. L'agrandissement se passe bien, le rétrécissement se passe bien aussi, sauf pour safari ou à un certain taux de réduction, mais pas à tous bizarrement, le titre "calendrier" déborde... Comme il y a peu de risques que quiconque veuille lire en corps 6, on dira que ça va ;-)
Autre problème qu'on m'a signalé : dans windows/IE 6, survoler un lien du menu renvoyait toute la sidebar en fin de col, sous l'alignement du dernier billet. Je crois que j'ai arrangé mais si un windowsien voulait bien confirmer ?
Le précieux http://www.danvine.com/iecapture/ est toujours overloaded :-(
Que reste-t-il encore ? Ah oui, display:block sur les codes marche bien partout sauf dans IE ou ça supprime purement et simplement tout le texte qui suit. A réétudier donc. En attendant j'ai enlevé cette ligne de ma css.
Et quelqu'un peut-il me dire pourquoi Olivier dans sa feuille de style du thème par défaut met toujours padding-top:1px ? Je crois me souvenir que c'est une histoire avec Firefox ?
> Autre problème qu'on m'a signalé : dans windows/IE 6, survoler un lien du menu renvoyait toute la sidebar en fin de col, sous l'alignement du dernier billet. Je crois que j'ai arrangé mais si un windowsien voulait bien confirmer ?
J'ai toujours le même problème.... mais je suppute vraiment un bug de IE 6.0 (je ne suis jamais passé au dernier service pack et je n'ai pas envie de le mettre à jour, puisque de toutes façons, je ne travaille qu'avec Mozilla). Quelqu'un d'autre peut-il confirmer ?
Avec la version actuelle du style, il n'y a plus de problème de sidebar qui passe au bas de la page sous IE6 ^_^
Bon, il y a toujours le problème des kanjis qui ne s'affichent qu'à moitié dès qu'on passe sur un lien par contre ;-)
Tiens, un autre détail que je viens de constater.... (Désolé, je n'ai pas penser à tout du premier coup...) Cette fois-ci avec Mozilla 1.8alpha, le titre du billet n'a pas le même comportement sur l'événement hover que les autres liens de la page, il n'est pas mis en évidence. (Sous IE6, ce lien se comporte comme les autres de la page.)
Me voilà bien perplesque parce qu'il n'est pas prévu que le comportement du survol des titres produise quoi que ce soit ;-)
Essaie d'ajouter ces trois lignes juste après la description de .post-title a
.post-title a:hover {background:none;
}
Je pense que le "cache" des kanjis provient du même bug : le survol ajoute un fond au titre qui vient se superposer au dessin.
Si cela ne marche pas l'autre truc à essayer c'est :
.post-title {margin-left:70px;
margin-right:70px;
(le reste sans changement)
}
Je me demande même si la deuxième solution n'est pas la meilleure, ça éviterait la collision en cas de titre long...
J'ai testé les deux solutions, séparément et de manière combinée.... pas de succès... :-(
Scrogneugneu de scrogneugneu...
Et en remplaçant background:none; par background:transparent; ça donne quoi ? (au fait, pense à vider le cache de ton navigateur sinon les modifs ne seront pas forcément prises en compte tout de suite)
Le transparent ne change rien.... et rassure-toi, je n'oublie pas de vider mon cache à chaque fois... C'est à s'arracher les cheveux cette histoire....
Un grand coup de chapeau à ton sens de l'entraide :
http://stweb.free.fr/ailleurs/index.php?2004/07/05/47-coups-de-chapeau
A +
L'affaire du "kanji masqué" est réglée : il faut ajouter height:100%; dans les spécifications de .post Ouf ! Reste le survol du titre qui fait apparaître dans IE6/windows un surlignage (comme pour les a:hover) alors que j'ai mis .post-title a:hover { background:none; }
Mais on finira bien par en venir à bout !
Salut et bravo pour cette esthétique superbe... Just a little bug... Je suis en train de visualiser ton site sous IE6/Windaube XP et j'ai le menu de droite complétement décalé en bas de page... Amicalement Luc
Ah non ! au secours ! tout marchait bien jusqu'à hier soir !
Question subsidiaire : en allant sur le blog de Julien, tu rencontres le même bug ?
http://www.mudry.org/blog/
Nan, je viens d'aller voir et ca fonctionne chez le sieur Julien!!
Sorry pour toi ;-) Amicalement Luc
Alors j'ai probablement trop tripatouillé dans la feuille de style pour essayer de l'améliorer. Je remets la précédente. Merci Luc.
Salut Everybody... Kozlika, j'ai toujours le même problème sur cette page... Par contre si tu peus jeter un oeil sur le mien SVP, j'utilise une feuille remaniée par les pros du CSS chez mon hébergeur;-) Ca marche partout me reste qu'à savoir sur Mac...
Amitiés Luc
Sorry, ca marche toujours pas, désolé de te décevoir ;-)
Regarde si c'est pas le texte "un peu perdu commencez par là" qui déborde sur la droite d'une manière ou d'une autre, ca fait comme un "décrochage" de la bande du menu... Bizarre, je vais t'envoyer une copie d'écran, ca t'aideras peut être
Je t'ai mis mon mail, envoie moi un msg je te répondrais avec les copies d'écran (j'ai pas trouvé ton mail sur le site;-))
J'y crois pas ! Même avec IE 3 ça fonctionne... ;-) Bon, d'accord... c'est juste un texte noir sur fond blanc qui s'affiche, mais au moins tout le texte est accessible et lisible... ;-) (Je crois me souvenir qu'IE 3 ne supportait pas les CSS... c'est donc normal. Comment ça ? On me dit dans mon oreillette que je viens de faire un commentaire totalement inutile ? Meuh non....)
Meuh non, pas du tout, ça met du baume à mon ego, donc c'est furieusement utile.
[page de pub]Un site bien structuré reste lisible même avec un navigateur obsolète. Le W3C c'est bon, mangez-en ![/page de pub]
Par contre, avec Netscape Communicator 4.8, c'est pas terrible... Aucune image ne s'affiche, les titres de la sidebar non plus, impossible d'ajouter un commentaire (les trois champs pour le nom, email et site s'affichent, mais pas celui pour entrer le commentaire :-? ) Et avec Internet Explorer 5.01, il y a le problème de la sidebar qui fiche le camp au bas de la page (mais pas sur mon site...)
(Pour ceux qui se demandent ce que je fais, oui, je viens d'installer sur mon PC : Netscape Communicator 4.8, Mozilla 1.7.1 et les versions 3, 4.01, 5.01, 5.5 et 6.1 d'Internet Explorer... tout ça uniquement pour tester des sites... je sais, je suis fou...)