Overblog
Editer l'article Suivre ce blog Administration + Créer mon blog

Paris, photo, humeurs, un peu de HTML/CSS pour faire sérieux. Feinte innocence et vraie naïveté (ou vice-versa). Encore un blog qui agite ses petits bras en couinant "Viens me lire !"

Un billet en page d'accueil (et seulement là)

Note : la version primitive de cet article (avril 2008) reposait sur une technique que j'ai généralisée dans cet article, la question traitée ici n'en est plus qu'une application particulière.

Autre note : technique inutilisable au niveau Confiance, désolé.


À quoi bon faire un article sur cette histoire de billet et de page d'accueil ? L'admin OB permet de distinguer la page d'accueil des autres, de les configurer et les styler différemment. Alors où est le problème ? Dans la définition de ce qu'est une page d'accueil

Vous avez dit  accueil  ?

D'abord faites-moi plaisir : le mot s'écrit accueil (prononcé akeuye) et pas acceuil (qui se prononcerait axeuye). Merci.

Ensuite…

Chez OB, l'  accueil  d'un blog désigne non seulement la page monblog.overblog.com/ mais aussi toutes les pages de suite monblog.overblog.com/n-index.html auxquelles on accède via le bandeau de pagination, dont la présence est optionnelle.

Si l'on renonce à ce bandeau, pour faire une page d'accueil et une seule franchement différente du reste du blog, il n'y a plus de problème et aucun besoin de la suite de cet article.

Mais ce bandeau est si commode… Si on le garde, le message d'accueil figurera bien sur la page d'accueil  naturelle , la page  d'entrée , mais aussi sur toutes les pages de suite. Pour faire un blog (comme l'était celui-ci) où toutes les pages sauf une ont la même allure, je n'ai pas trouvé d'autre solution que d'examiner l'URL de la page pour décider de ce qu'on lui fait subir. Cette tâche incombe au gadget décrit dans l'autre article, le reste n'est qu'un classique travail de CSS et de configuration du blog.

Préparatifs

Le billet d'accueil est le module de texte libre que propose l'admin pour ça.

Il faut seulement, pour la suite, lui donner un identifiant. Marche à suivre : dans l'admin, allez dans le menu  Configurer , puis dans le sous-menu  Options Globales  et dans les  Réglages avancés . Cochez la dernière case  Permettre la configuration des id XHTML des modules  si ce n'est pas déjà fait.

Toujours dans la configuration, mais maintenant celle du module : il y a une case  Id XHTML  sous la fenêtre de texte, c'est l'endroit pour donner un identifiant au message d'accueil. Faites simple et expressif, par exemple msgBienvenue.

À ce stade, le billet apparaît sur toutes les pages d'accueil du blog ou sur toutes les pages, selon que la configuration est  avancée  ou  classique .

Solution

Installez le gadget décrit dans l'autre article : un fichier à remonter dans votre admin et une ligne à rajouter dans le source HTML de l'en-tête du blog.

Une fois ce gadget en place, le body de chaque page du blog porte des classes nouvelles la décrivant. Les pages d'accueil portent la classe pg_index, la première page d'accueil (la  vraie ) porte en plus la classe pgnum_0.

Il va falloir ajouter deux lignes dans votre CSS  global  ou  accueil , elles ne dépendent que de ce que vous souhaitez proposer à vos lecteurs s'ils naviguent sans JavaScript.

Sans JS, je tolère le billet sur les pages de suite

C'est la situation actuelle. Il faut ajouter ceci au CSS :

 .pg_index #msgBienvenue {display:none} .pg_index.pgnum_0 #msgBienvenue {display:block} 
Sans JS, je préfère qu'il n'y ait pas de billet du tout

Demandez-vous au passage si vous avez vraiment envie de ce billet, mais admettons.

Il faut alors ajouter ceci au CSS :

 #msgBienvenue {display:none} .pg_index.pgnum_0 #msgBienvenue {display:block} 
(vous avez remarqué la subtile différence ?)
C'est déjà fini ?

Ben oui. Mine de rien, l'est assez génial mon gadget à estampiller les pages de blog…


Merci à Cln qui m'a donné l'idée initiale et à Bill qui, en se lançant dans l'aventure, m'a aidé à corriger une petite erreur de rien du tout… qui flanquait tout par terre.

Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
S
Bonjour Bren !<br /> <br /> Voilà, je viens un peu t'ennuyer.<br /> Je suis en train d'ouvrir mon site sur e-monsite. http://lemiroirauxessences.e-monsite.com<br /> <br /> J'ai refait à l'identique ta combinaison pour cacher mon header sur les pages suivantes. Tel qu'on en avait déjà parlé si tu te souviens. Pas de problème avec le processus, monSite c'est idem OB,<br /> sans avoir oublié d'archiver ton fichier et de remplacer l'url OB par celle de MonSite dans ton script.<br /> Seulement, hier ça marchait, à savoir que le header se cachait bien à l'ouverture de l'article, pourtant aujourd'hui, sans rien toucher le header n'apparaît plus du tout à l'ouverture du blog ni<br /> après bien sûr.<br /> Je ne comprends pas pourquoi. Car sur Monsite, on a accès à la css pareil.<br /> Est-ce que tu aurais une petite (ou grande) idée ?<br /> Bien cordialement Bren,<br /> Si tu pouvais me trouver la solution car j'aimerais aussi refaire mes modules cliquables. Mais il faut déjà que je règle ce problème.<br /> Pour l'instant je le préfère sans header du tout, ce qui est, plutôt qu'avec le header en continu.<br /> A bientôt...
Répondre
S
Tu termines exactement avec ce qu'il faut. L'article presque en totalité dans le module texte libre et le lien vers l'ajout de coms de l'article à coucous. Mais il faudrait que ce lien arrive<br /> directement à l'endroit où écrire les coms, sans le texte au-dessus puisqu'on vient de le lire... tu me suis...<br /> Ta formule pour l'article d'accueil escamotable sur les pages suivantes marche à merveille. Page accueil, et page articles, ci-dessous :<br /> .pg_index #msgBienvenue {display:none}<br /> .pg_index.pgnum_0 #msgBienvenue {display:block}<br /> #msgBienvenue {display:none}<br /> .pg_index.pgnum_0 #msgBienvenue {display:block}"<br /> est magique.<br /> Je vais enfin pouvoir alléger mon blog d'huiles essentielles.<br /> <br /> A bientôt Bren. Merci encore.
Répondre
A
<br /> <br /> Pour le lien, je fais un essai ici même :<br /> <br /> <br /> Peut-être mon livre d'or ?<br /> <br /> <br /> Observations : ça ne marche que partiellement mais ça peut s'arranger. Ce lien ouvre tout de suite le popup d'ajout de comms mais celui-ci vise mon 'article à coucous' ! Ce qui implique un<br /> 'assez' gros travail de JS pour personnaliser ce popup précis. Je le ferai sans doute parce que c'est amusant (maso !) mais pas tout de suite. A défaut, ce lien peut renvoyer vers la fin des<br /> comms du livre à coucous, où on trouvera un lien 'ajouter un comm'  :<br /> <br /> <br /> Encore mon livre d'or ?<br /> <br /> <br /> Observation : après quelques hésitations ce lien marche !<br /> <br /> <br /> <br />
S
Coucou Bren,<br /> Ok pour tes codes, pour faire disparaître ou non le module d'accueil avec ce qu'on y a mis dedans.<br /> Par contre l'article splash était bien, mis-à-part l'histoire de l'ordre chronologique, dans le sens où c'était un article, à savoir qu'il était possible de poster des commentaires en bas (mi je<br /> tiens bcp bcp à ces commentaires...). Ce qui n'est pas faisable avec un module texte libre.<br /> Si on veut faire la même chose avec un article qui reste ou non à l'accueil, il faut donc lui donner un identifiant ? Soit même trame que pour le BG différent par catégories ? J'ai pensé à ça mais<br /> je ne sais pas si je vois juste. Mais ça complique.<br /> Ce qui serait plus simple serait la possibilité de poster des commentaires en bas de ce module texte libre. Le Maître aurait-il la formule magique...<br /> Car, à mon sens, le plus important quand quelqu'un arrive sur une page d'accueil d'un blog / pour qu'elle soit utile, (je dis bien un blog et non pas un site), c'est de pouvoir y poster un<br /> commentaire. Les gens ne veulent pas se fatiguer à aller chercher le dernier article. A moins qu'on arrive à ce tour de force qui est le tien de tomber illico sur l'article annoncé. Mais ce ne sera<br /> jamais le même, celui dans lequel (ou l'endroit dans lequel) les habitués aiment te laisser un bonjour. De plus, c'est valorisant, on te poste des commentaires toujours sur le même article, tu peux<br /> arriver à un grand nombre de ceux-ci. Pour moi le but de la page d'accueil est là.)<br /> A l'occasion...<br /> *****<br /> Merci pour tout Bren.
Répondre
A
<br /> <br /> Ah... Voilà beaucoup de renseignements intéressants en une seule fois !<br /> <br /> <br /> 'Splash' signifiait pour moi quelque chose de décoratif/informatif/etc mais 'stérile' : on le voit (ou on le court-circuite) et ensuite seulement on arrive au vif du sujet. Puisque tu veux<br /> quelque chose d'interactif où les habitués peuvent laisser un mot, il n'y a en effet pas 36 choix possibles : il faut un vrai article et pas un module de texte libre. Et si cet article doit être<br /> toujours le même, il est inévitable que ce soit le plus vieux d'un blog présenté par ordre chronologique, c-à-d ce que tu as fait.<br /> <br /> <br /> L'ordre antichronologique (le mien) a cet avantage évident que le visiteur tombe sur la production la plus fraîche, sur l'actualité du blog.<br /> <br /> <br /> Rêvons à voix haute, histoire de se préciser les idées : l'idéal (en tout cas le tien) serait d'avoir un blog antichrono (pour mettre l'actualité à la une) où l'on pourrait choisir d'avoir, de<br /> plus, un certain "vrai" article, toujours le même, à la une (pour faire coucou).<br /> <br /> <br /> Cela ne serait possible que si l'admin/config d'OB le permettait, ce qui n'est pas le cas. Et cette limite ne peut se contourner en JS : un programme JS travaille sur ce qui est dans la page<br /> affichée à l'écran, il ne peut pas aller explorer les serveurs d'OB pour en remonter l'article à coucous (aussi appelé "livre d'or"). Tout ce qu'on peut espérer fabriquer est donc un palliatif le<br /> moins malcommode possible.<br /> <br /> <br /> MAIS on peut imaginer : partons d'un blog en ordre antichrono, comme le mien. On peut y mettre un texte libre, plus ou moins plantureux, "Bienvenue ici", cependant l'article à coucous se trouvera<br /> quelque part dans les tréfonds du blog.<br /> <br /> <br /> Idée, pas neuve : mettre dans ce texte libre un lien vers l'article à coucous. Inconvénient évident : le visiteur doit cliquer sur ce lien, puis ensuite sur le lien 'ajouter un com' de l'article<br /> à coucou ou sur le lien 'voir les coms' pour lire la prose des autres visiteurs.<br /> <br /> <br /> 1ère amélioration, que j'utilise ici dans mon icône livre d'or (menu abonnements et autres) : faire un lien directement vers les commentaires de l'article. Cette icône est aujourd'hui enfouie<br /> dans un menu, ce qui ne la met vraiment pas en évidence, mais même lorsqu'elle était immédiatement visible elle n'a pas eu grand succès.<br /> <br /> <br /> 2ème amélioration, à laquelle je viens de penser : que le module texte libre contienne l'essentiel (voire la totalité) de l'article à coucous et, pour finir, le lien vers l'ajout de comm de cet<br /> article à coucous (code source à recopier dans la page de l'article à coucous). Ainsi le module de texte libre devient presque un 'vrai' article. Qu'en penses-tu ?<br /> <br /> <br /> <br />
W
<br /> Vi, la bigleuse voit plus clair maintenant.<br /> <br /> Dommage que tu ne fasses pas l'école. Les élèves iraient en classe avec joie. Je retourne dans le labo.<br /> Merci et à bientôt.<br /> <br /> <br />
Répondre
A
<br /> C'est à voir... les profs sympa sont aussi les plus épuisants ! Bon courage tout de même :-)<br /> <br /> <br />
W
<br /> Ça veut dire donc que le fameux billet d'accueil,<br /> <br /> - par défaut, il aura l'allure d'un Post-It ?<br /> - Et il sera aussi placé à cet endroit?<br /> - Et que si on veut l'enlever, il faudra repasser par le CSS?<br /> <br /> Je trouve dommage que ta bannière soit cachée au premier regard parce qu'elle est chouette à voir.<br /> <br /> A dire vrai, je croyais au début que ton Post It, c'était un truc qui venait de l'extérieur et non de toi. Un de ces trucs horripilants qui cachent la vue et qu'on doit supporter.<br /> <br /> J'ai essayé d'expérimenter. Mais, tu vois, ça ne m'a donné qu'un mal de crâne jusqu'à présent.<br /> <br /> Et puis, est-ce que cela veut dire que les Post It, il pourrait y en avoir une dizaine dans chaque section (accueil, articles, pages) ?? Parce que je vois le fameux ID dans plein de modules.<br /> <br /> Remarque, Noël arrive. C'est une façon originale de décorer. Surtout que les boules, c'est pas raplapla. Est-ce qu'on peut changer la couleur du Post It? Je suis folle. Je parle de couleurs alors<br /> que je ne sais même pas comment les faire apparaître, ces messages...<br /> <br /> Si ton blog explose, c'est que je me serai trop attardée dessus pour essayer de m'imprégner de la substantifique.<br /> <br /> Merci d'avoir répondu aussi vite.<br /> <br /> <br />
Répondre
A
<br /> -Non<br /> -non<br /> -non<br /> <br /> Il faut expliquer, hein ? :D<br /> ------------------------------------<br /> L'allure de postit c'est moi qui l'ai choisie, j'aurais aussi bien pu mettre une carte à jouer ou une fille nue. L'emplacement, peut-être discutable, est aussi un choix à moi.<br /> Aspect et emplacement résultent d'un travail de CSS, donc entièrement au choix du blogueur.<br /> Pour supprimer le postit, le plus simple est encore... de le supprimer ! dans la config du blog.<br /> <br /> Pour fixer les idées : le postit, chez moi, est le même élément de blog que "the wolof-multilanguage live dictionary project" chez toi. Chez toi il figure sur toutes les pages : c'est logique en<br /> effet, au vu de son contenu.<br /> Cadeau : un bout de CSS pour jouer à le "postifier"<br /> #articleAccueil {background:yellow; border:1px solid gray; width:300px; position:absolute;margin-top:-50px;margin-left:200px}<br /> Le résultat sera TRES LAID ! mais tu verras ce pavé bouger et venir se placer à cheval sur le reste du blog.<br /> <br /> Ce postit, comme tu vois, n'est pas (pas du tout) un gadget importé mais une cuisine entièrement maison. Ce n'est jamais qu'un module de texte libre (TL) parmi les autres. Réflexion faite,<br /> d'ailleurs, rien n'oblige à utiliser l'article d'accueil pour le fabriquer. N'importe quel DIV prélevé dans un module de TL pourrait convenir. Ce qui, au passage, répond aussi à une autre de tes<br /> questions : oui, on peut faire un arbre de Noël en Postit ! On fait d'abord un module TL dans lequel on met quatre ou cinq ou vingt DIV analogues. Résultat = une colonne de postit dans les<br /> modules... Ensuite chacun de ces modules reçoit un identifiant et, dans le CSS, un position:absolute pour le placer à l'endroit voulu (tu me donnes une idée, d'ailleurs...)<br /> <br /> Le présent article NE parle PAS de la manière de faire un postit (il y a un article chez AnnaK là-dessus) mais, plus pointu, de la manière de choisir les pages de blog où l'on veut le voir.<br /> <br /> Ca aide un peu ?<br /> <br /> <br /> <br />
W
<br /> J'avoue ne pas comprendre le pourquoi du comment et ce que ça donne. Surtout que je viens de voir ce fameux Id XHTML aussi dans le module ARCHIVES.<br /> <br /> En plus, alors que je mettais msgBienvenue dans la section article, un message m'a dit qu'il fallait un autre nom parce que msgBienvenue servait déjà à un autre endroit.<br /> <br /> Est-ce que le message de bienvenue, c'est ce qu'on voit sur ton site, tout en haut : Jus des méninges ....?!?<br /> <br /> Je te souhaite un bon weekend.<br /> <br /> <br />
Répondre
A
<br /> Merci de cet aveu ! Il me signale un point que j'aurais dû clarifier.<br /> "Jus de méninges" est l'en-tête du blog, une bannière tout à fait classique.<br /> Le "billet d'accueil", sur ce blog, est le postit jaune présent sur la page brendufat.overblog.com et seulement sur elle. En termes de config OB c'est le module texte libre qu'on peut ajouter avant<br /> ou après le module articles. Sans le bout de JS ce postit figurerait sur toutes les pages de suite.<br /> L'id msgBienvenue (ou tout à fait autre chose) se donne au module texte libre, pas au module articles. En plus il est facultatif puisque ce texte libre, par défaut, porte déjà l'identifiant<br /> articleAccueil.<br /> Est-ce plus clair ainsi ?<br /> <br /> <br />