Avant d'aller plus loin
Par Kozlika le samedi 15 mai 2004, 20:30 - Lien permanent
Je me rends compte que je suis passée directement du premier billet au changement de fond en oubliant quelques petites indications et recommandations. Alors avant de se lancer dans la personnalisation il y a quelques petites choses que j'aimerais vous dire.
(Il va falloir que je trouve un moyen de réorganiser les billets, c'est la pagaille complète là-dedans. Antidater peut-être ? Bof, ça ne me plaît pas beaucoup de faire ça. Je trouverai peut-être une autre solution. Passons et revenons à nos moutonssssss comme disait l'ami Jouvet.)
Le premier billet est fait. C'est à ce moment-là que vous vous sentez un véritable professionnel du blog, n'ayons pas peur des mots. Du coup, l'obstacle de la « première fois » franchi, vous vous sentez pousser des ailes et décidez de poser votre emprunte personnelle dans la présentation.
Vous allez donc effectuer des modifications sur la feuille de styles style.css. Peut-être même voudrez-vous en faire dans le template.php, c'est-à-dire dans le code html de la page, qui détermine la structure et le contenu de votre blog. Cela va nécessiter des essais, des tâtonnements. Un peu de méthodologie pour pouvoir revenir à l'état pro ante est indispensable.
Ne pas toucher au thème par défaut
Dans la sauvegarde que vous avez conservée sur votre disque dur, suivre le chemin Dotclear -> theme -> default.
- Créer un dossier - n'importe où pour le moment - intitulé, par exemple themeperso, dans lequel vous mettrez une copie de style.css, une copie de template.php et une copie de desc.xml. C'est sur ces fichiers-là que vous travaillerez.
- Ouvrir le fichier desc.xml avec un éditeur de textes et faire les modifs suivantes :
<?xml version="1.0" encoding="ISO-8859-1"?>
<theme name="themeperso" version="1.0" active="true">
<author>Votre nom</author>
<label>Un nom pour le thème</label>
<desc> Un descriptif succinct ou un commentaire !</desc>
</theme>
Ce qui est important c'est que le theme_name soit exactement le même que le nom que vous avez attribué à votre nouveau dossier.
Choisir ce nouveau thème
Téléchargez ensuite ce nouveau dossier dans votre espace personnel en suivant le chemin Dotclear -> themes. Votre dossier doit être au même niveau que le dossier default.
Dans votre navigateur, rendez-vous à l'adresse : http://VotreLogin.free.fr/dotclear/ecrire/auth.php
Entrez votre login et mot de passe. Voilà, vous êtes dans votre espace d'administration du blog. Cliquez à droite le dernier onglet (ou dernier lien selon votre navigateur) qui s'appelle Outils puis sur le lien Gestionnaire de thèmes, le nom du thème que vous avez créé figure dans la liste, il suffit de cliquer sur "Utiliser ce thème''. Désormais les changements que vous effectuerez seront visibles dans votre blog.
Vous vous souvenez avoir indiqué à votre client ftp le dossier (répertoire) où vous souhaitez que les fichiers soient placés quand vous les transférez de votre espace en ligne à votre disque dur ? Placez-y le dossier "theme perso" que vous aviez créé avant de le transférer.
Ne pas se mélanger les pinceaux
Ranger/classer
Selon votre client ftp (?) vous pourrez ou ne pourrez pas effectuer de modifications directement dans les fichiers qui sont dans votre espace personnel chez votre fournisseur d'accès. Moi je ne peux pas - ou je n'ai pas trouvé comment faire. Si vous êtes comme moi, le risque majeur est de transférer un fichier à la place d'un autre, d'écraser une version plus récente avec une plus ancienne, etc. Il existe sûrement plusieurs méthodes pour éviter cela. Voici la mienne :
Lors de la première intervention, pas de souci. Vous double-cliquez l'icône de style.css de votre dossier "themeperso" de votre site et le fichier vient se loger dans votre disque dur. Vous vous souvenez avoir indiqué à votre client ftp le dossier (répertoire) où vous souhaitez que les fichiers soient placés quand vous les transférez de votre espace en ligne à votre disque dur ? C'est là qu'il viendra se loger. Pour l'instant il est tout seul, donc tout va bien ! Vous y apportez quelques modifications (par exemple changer l'image de fond comme dans Personnalisation 1). Vous voulez voir ce que ça donne ? Pas de problème, vous glissez l'icône de votre fichier modifié de votre disque dur vers le dossier "themeperso" de votre espace en ligne... et remplacez l'ancien style.css par le nouveau.
Vous avez désormais trois feuilles de style personnelles : celle qui est dans votre espace en ligne, celle qui est dans le sous-dossier "themeperso" dans votre dossier de destination des téléchargements et celle qui est à la racine de ce dossier téléchargement. C'est cela qui va demander un peu de rigueur pour ne pas faire de bêtises.
MàJ du 10 juillet : il y a quand même plus simple ;-) Trouvez un client ftp qui autorise l'édition et la modification distante. il en existe pour toutes les plates-formes. Vous pourrez ainsi tripatouiller à loisir avec votre feuille de styles et visualiser les résultats en direct. En cas de panique, vous pourrez toujours recharger la feuille de styles qui est restée sur votre disque dur dans la sauvegarde !
Et du coup, crac :
--!Sécuriser
Pour plus de commodité dans les explications qui vont suivre j'appelerai fichier_A celui qui est dans votre espace perso, fichier_B celui qui est dans le dossier "themeperso" de votre disque dur, fichier_C celui qui est à la racine de votre dossier d'accueil des téléchargements.
Les modifications se passent donc comme ça :
Rapatriez fichier_A sur votre disque dur.Il devient (ou écrase et remplace) fichier_C. Effectuez les modifs que vous souhaitez essayer.
Uploadez fichier_C dans le sous-dossier themeperso de votre espace en ligne.Il devient (ou écrase et remplace) le fichier_A.
La modification vous plaît ? Remplacez le fichier_B par le fichier_C (qui devient fichier_B, vous me suivez ?Il ne vous reste désormais que deux versions (identiques) : fichier_A et fichier_B.
La modification ne vous convient pas ? Remplacez le fichier_A par le fichier_B et jetez le fichier_C.Vous reviendrez ainsi à la version qui vous convenait avant les dernières modifications. Et vous n'avez là aussi que deux versions identiques, la A et la B.
Je sais, c'est un peu rebutant quand on le lit mais en fait c'est simple à mettre en oeuvre et ça permet de se lancer dans des essais sans craindre de tout perdre si ça ne marche/convient pas.
Maintenant que les arrières sont assurés, on peut aller patouiller sans crainte dans la feuille de styles :
Etape 4. Première ouverture de style.css
Commentaires
Je regarde le source de cette page web. Je vois link rel="stylesheet" type="text/css" href="/dotclear//themes/df/style.css" media="screen"
Il y a un / de trop
On peut déjà visualiser les billets par rubrique en cliquant sur les liens adéquats à droite là- bas
>Sinon pour anti-dater, c'est dans la base de données que çà se passe (via phpmyadmin) mais lire des messages dans une base de données c'est pas ce qu'il y a de plus confortable ;-)
cymago: Tu parles du / à la fin de la ligne ??
Si c'est celui-là il est parfaitement à sa place. C'est ce qu'il FAUT marquer à la fin d'une balise unique en XHTML strict ;-)
Pour changer de date, l'outil d'édition des billets de Dotclear est facile à utiliser.
-> cymago : J'ai affiché le code source de la page. Je vois de quoi tu veux parler : il y a deux // entre dotclear et themes. Je ne vois pas ce que je peux y faire d'ici parce que le premier est induit par le chemin que j'ai réglé dans les Outils -> Configuration de Dotclear -> Emplacement de l'application : Olivier précise bien dans ses explications qu'il faut le mettre ; si je le supprime ça va dysfonctionner ailleurs, non ? Et pour le deuxième slash, je ne peux pas intervenir (il me semble) ça se fait automatiquement et il n'est pas présent dans le template (oui ? non ?). Dans le template la ligne est comme ça : <link rel="stylesheet" type="text/css" href="<?php dcInfo('theme'); ?>/style.css" media="screen" />
--> Angrave : Je sais bien qu'on peut visualiser les billets comme ça mais ça n'empêchera pas le bazar dans l'ordre des billets au sein d'une même rubrique (par exemple que "Personnalisation 0" va se retrouver après "Personnalisation 2"... Mon idée serait plutôt d'inscrire les liens en dur dans le menu comme s'il s'agissait de liens externes - en créant une rubrique entre "Rubriques" et "Archives" par exemple. Le tout c'est que j'aille copier-coller l'adresse de chaque billet et que je les réinscrive dans l'ordre que je souhaite ? Je vais essayer ça tout à l'heure. L'autre solution à laquelle j'avais pensé était de faire réellement un lien externe et d'extraire tous les billets dans une page à part mais du coup je perdrais la possibilité que vous laissiez des commentaires et ça, ça m'embêterait beaucoup.
--> Angrave et Obni : je sais comment antidater les billets en les éditant/modifiant mais je trouvais que ça dénaturait le principe de l'éphéméride. Mais c'est peut-être quand même ce que je ferai - après tout, je n'ai pas encore inauguré le blog ;-)
kozlika, le cadre autour de la rubrique "Recherche" et "Ajouter un commentaire" vient de la feuille de style, regarde au niveau de la classe p.field essaye de mettre border: none; (j'ai des doutes si c'est à ce niveau là) sinon c'est du côté de l'attribut fieldset, rajoute simplement border: none;
Merci Olivier.
En fait je suis un peu découragée aujourd'hui, je crois que je vais plutôt aller me balader. J'ai vérifié sur la feuille de styles : pas de p.field et l'attribut fieldset est déjà en border:none :-(
Il faut vraiment que je reprenne tout de zéro en partant de la feuille de style et du template par défaut plutôt que par l'autre thème qui n'est guère limpide pour les néophytes comme moi...
Puis la mise en pages ne me semble pas si terrible que ça... Bon, je sature, quoi.
Ne te décourage pas. Puisque tu es partie (comme moi) du thème df. Tu le retélécharges puis tu remplace dotclear.ini, template.php (pour les liens de ta blogoliste), ton dossier images qui est à la racine... il ne te restera à modifier que quelques bricoles comme les couleurs des rectangles devant les rubriques...
J'ai rédigé un petit pensum sur mon site à la fin de mon billet du jour.
Bon courage.
Dans Configuration, j'ai Emplacement de l'application /dotclear et dans dotclear.ini ; Emplacement de l'application (depuis la racine du site) dc_app_url = /dotclear
en suivant à la lettre ton mode d'emploi, je m'aperçois qu'il faut aussi copier list.php dans le dossier themeperso
Petite correction: "décidez de poser votre emprunte personnelle dans la présentation." emprunte => empreinte Et oui: ça ne s'écrit pas pareil, ça ne veut pas dire la même chose et surtout ça ne se prononce pas de la même façon.
Hu hu, toutafé ! Heureusement que je ne suis pas correctrice hein...
(Ah si ? ben merdalors !)