remplacer le title par une image

Comment remplacer le "title" de son site par une image réactive, c'est à dire qui ramène au "home" dés que l'on clique dessus?

C'est certainement indiqué quelque part dans le site mais je ne le trouve pas.
D'avance merci pour la formulation exacte, à insérer dans template.php ?

Files

ExempleGnapZ.zip 564 bytes, 88 downloads
Edited by GnapZ on Apr. 13 2007
Zoom

1 file

Comments

Page bottom

GnapZ from Caribbean 2970 posts	on Apr. 11 2007 Je ne crois pas que ce soit "réellement" documenté si ce n'est dans les scripts eux-mêmes. Il est dit que nous pouvons remplacer le titre par une image via CSS. Franchement, je n'ai jamais réussi uniquement dans le CSS car le titre est nécessaire (titre de la fenêtre du navigateur) mais il sort toujours au premier plan d'une image. Bref, voici ce que j'ai opté: Dans le Template.php: `// the site name can be replaced, through CSS, by an image // access key 1 if($context['site_name']) { $local['label_en'] = 'Home'; $local['label_fr'] = 'Accueil'; echo '<p id="header_title"><a href="'.$context['url_to_root'].'" accesskey="1"><img src="'.$context['url_to_root'].'skins/my/images/logo.jpg" width="138" height="60" alt="Accueil - Home" border="0" /></a></p>'."n"; }` et dans le CSS: `#header_title { /* appears towards the top of the page -- see template script / position: absolute; top: 0; left: 0; margin: 0; / need for IE Mac */ padding: 10px 0 0 20px; font-size: 1.3em; font-weight: bold; color: #5F697E; background: transparent;` Maintenant, les goûts et les couleurs ... mais ça a le mérite de fonctioner. Edited by Fernand on Apr. 11 2007
Fernand from Paris 1287 posts	inspired from GnapZ on Apr. 11 2007 GnapZ :Merci de ta réponse rapide. Je fais un essai (demain), puis un retour... Et si le retour est positif... Un bout de documentation. A bientôt.
Fernand from Paris 1287 posts	inspired from Fernand on Apr. 13 2007 Fernand : Pour le moment - après plusieurs heures d'essai, je n'arrive pas à faire fonctionner cette chose. Pourtant, ça ne devrait pas être bien sorcier.
Tof from Grenoble-Chambery 500 posts	on Apr. 13 2007 Bonjour Fernand, Je ne vois pas de problème apparent dans le code de Gnapz.. Néanmoins, Je te propose une solution alternative (basée sur le skin skeleton de la 7.3). Dans le css, ajoute l'image de fond sur le titre : #header_title { /* appears towards the top of the page -- see template script / position: absolute; top: 0; left: 0; margin: 0; / need for IE Mac */ padding: 12px 0 0 20px; font-size: 1.3em; font-weight: bold; color: #5F697E; background: transparent url="tonchemin/tonimage.png" no-repeat; } Dans le template.php, si tu ne veux pas que le titre apparaisse dans l'image, remplace la ligne : // the site name -- can be replaced, through CSS, by an image -- access key 1 if($context['site_name'] && is_callable(array('i18n', 's'))) echo '<p id="header_title"><a href="'.$context['url_to_root'].'" title="'.encode_field(i18n::s('Return to front page')).'" accesskey="1">'.$context['site_name'].'</a></p>'."\n"; par : // the site name -- can be replaced, through CSS, by an image -- access key 1 if($context['site_name'] && is_callable(array('i18n', 's'))) echo '<p id="header_title"><a href="'.$context['url_to_root'].'" title="'.encode_field(i18n::s('Return to front page')).'" accesskey="1"> </a></p>'."\n"; Ca devrait marcher, n'hésites pas à me faire remonter si ce n'est pas le cas. A+ ----- Tof
Fernand from Paris 1287 posts	inspired from Tof on Apr. 13 2007 Tof : C'est quand-même curieux ! Je n'arrive pas à rendre l'image réactive et à ce qu'elle renvoie à l'accueil lorsque l'on clique dessus... Pour le reste, ne pas faire apparaître le titre, je n'ai aucun problème.
Tof from Grenoble-Chambery 500 posts	inspired from Fernand on Apr. 13 2007 Fernand : quand tu testes, vérifie le code généré en affichant la source (click droit sur ta page, puis afficher source); si tu ne trouves pas, fais un copier/coller du morceau du source généré correspondant à l'affichage de ton image et poste le ici. ----- Tof
GnapZ from Caribbean 2970 posts	inspired from Tof on Apr. 13 2007 Tof : C'est en effet plus simple mais alors qu'en est-il de la zone cliquable ? Je fais la même chose sauf que j'intègre l'image dans le template (où tu places un simple espace) car cela permet de rendre l'image entièrement cliquable. Le CSS ne sert alors qu'à positionner cette image. A tous: Evitez de poster du code ici avec `[PHP]` car il supprime encore des caractères dedans. Préférez ajouter un fichier texte zippé, au moins il n'y a pas de perte possible. C'est sûrement la raison pour laquelle Fernand a des pb de fonctionnement. D'ailleurs, je le fais pour mon exemple ci-dessus en tête de ce fil.
Lasares from L'Île-Bizard à Montréal, Québec 697 posts	on Apr. 13 2007 Fernand : Excusez-moi d'arriver si tard dans cette discussion, j'étais pris à l'extérieur (le congrès de l'organisme pour lequel j'ai réalisé un site le mois dernier !) Je crois que la solution à votre problème consiste simplement à faire de la place pour l'image dans le padding de l'ancre du titre pour la rendre réactive. Par exemple, dans le code suivant, j'affiche à la fois le titre et une image carrée de 75px à sa gauche. L'image est rendue visible et positionnée par le padding de l'ancre, en conjonction avec les autres réglages. #header_title { /* appears at the top of every page -- see template script / position: absolute; top: 0; / use anchor padding to place header_title text, to leave room for header_image / left: 10px; / offset for header_image as well as header_title text / margin: 0; / needed for IE Mac / padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; / to make sure it does not inherit something else / font-size: 30px; / not to be resized by browser / font-weight: bold; background: transparent url("images/header_image.png") 0px 2px no-repeat; / to set and position header_image / } #header_title a { / link to the home page / display: block; / to add margins and padding / position: relative; padding: 10px 0px 35px 90px; / left padding makes room for header_image width, vertical padding plus font-size equals header_image height / color: #36a; / set to "even" color to display text of title or to background color to hide it / } Si je veux afficher seulement l'image, sans le texte du titre, je règle font-size* à zéro dans le header_title et j'augmente le padding vertical pour compenser, par exemple en fixant le bottom-padding de l'ancre à 65px (35px originellement + 30px de la hauteur de la police disparue). Notez qu'on peut tout aussi bien modifier le top-padding, l'important c'est que le total du padding vertical fasse place à l'image. Enfin, je règle la couleur de l'ancre à la couleur du fond (pour éviter qu'IE affiche un petite tache de couleur là où aurait normalement vu le texte du titre). Tout ça en CSS, sans toucher `template.php`. Donnez-m'en des nouvelles.
Tof from Grenoble-Chambery 500 posts	on Apr. 13 2007 Gnapz : Je suis allé un peu vite dans ma réponse et je n'ai pas testé mon exemple mais avec le recul, ça doit effectivement merdouiller. Lasares : bel exemple d'utilisation du css, même si je ne suis pas un fanatique des "trucs" comme le font-size à zéro. Uniquement parce que les feintes sont pratiques lors du codage mais peuvent conduire à de l'arrachage de cheveux (oups, pardon lasares) plus tard lorsqu'on reprend le code. En tout cas, quand on fait une feinte de ce type, il faut toujours la décrire précisément dans les commentaires. ----- Tof
GnapZ from Caribbean 2970 posts	inspired from Lasares on Apr. 13 2007 Lasares : Oui, belle maîtrise du CSS mais comme je n'ai toujours pas assimilé les padding, margin et leurs variantes je reste frileux. Je ne sais pas pourquoi mais il y a des termes (et pas leurs fonctions) qui ne rentrent pas. Idem pour les "layout", "behaviors", "handle" et autres "anchor". Je comprends bien à quoi ils servent et comment ils marchent mais impossible d'assimiler les mots. Si une âme charitable pouvait me donner des synonymes ou simplement une trad claire ... C'est bien toutes ces contributions car du coup, on a l'exemple par le template et par le CSS !
Fernand from Paris 1287 posts	on Apr. 13 2007 GnapZ : Bon, peut mieux faire, mais voici concernant les padding A ne pas confondre avec les pudding... Je sais, je sais En bref, le padding, c'est la marge intérieure d'un bloc. L'ancre, dans ce cas, c'est lorsqu'il y a marqué header_title a, au lieu de seulement header_title. Il s'agit d'une référence CSS à l'ancre en html. De mon côté, je me suis dit: bon sang mais c'est bien sûr, il a raison le GnapZ... Et j'ai repris ton code depuis ton exemple zippé.... Le copier-coller depuis YACS ou un e-mail glissant souvent des erreurs au niveau indentation. Bien, j'ai été gentil avec lui mais il ne veut pas fonctionner pour le moment. Je ne me décourage pas.
Fernand from Paris 1287 posts	inspired from Fernand on Apr. 13 2007 Lasares : Oui, votre solution marche très bien ! Elle me convient d'autant mieux que j'admire particulièrement la mécanique des CSS. Elle correspond à mon esprit un peu simple... Il faut dire. Afin de vous remercier, je vous ordonne non seulement du Quebec, mais aussi pour l'Amérique du Nord. (J'ai le droit en tant que fou du Roy YACS). Tof: D'accordo avec toi Mais dans ce cas précis, la solution proposée par Lasares me paraît assez sioux... Car elle ne fonctionnera pas si l'on occulte l'écriture du titre qui est prévue dans YACS par défaut. De plus, la zone réactive est réglable et l'on peut envisager à partir de là pas mal de combines. Il n'en reste pas moins que la formule correcte dans le template nous est nécessaire. Et je n'arrive pas à la faire fonctionner pour le moment. Je tâtonne, tatillonne.
Fernand from Paris 1287 posts	on Apr. 13 2007 Premières conclusions: Nous avons besoin d'établir un tableau des classes et identificateurs de style dans YACS et de les situer géographiquement sur les principaux types de skins utilisés par YACS: deux colonnes fixes, trois colonnes fluide, etc. En parllèle, il nous faudrait commencer une "collection" des codes de correspondance aux styles, pour template.php ainsi que skin.php Ceci pourrait donner lieu à un chantier dans les pages perso de l'un (ou l'une) d'entre-nous... Il serait installé, une fois avancé, près de la skin factory.
Bernard from nearby-an-airport Associate, 6674 posts	on Apr. 20 2007 Et hop, je débarque dans la discussion avec retard. En réalité, il y a plusieurs moyens d'arriver au résultat recherché. Les PHPeux regarderont du côté de `template.php`, tandis que les CSSeux lorgneront sur les feuilles de style. Qu'importe le flacon, pourvu qu'on ait l'ivresse... Pour le franglais, je suis désolé, mais la compacité de certains termes anglais les rend presque intraduisibles en Français. "padding" d'un côté, "marge interne" de l'autre...
Fernand from Paris 1287 posts	inspired from Bernard on Apr. 20 2007 Bernard : Merci pour cette réponse claire, nette, précise. J'en retiens que l'utilisateur averti de YACS est soit un PHPeux, soit un CSSeux. S'il est les deux, c'est parfait. N'hésitez pas à me contredire sur ce point, s'il vous plaît, car je risque fort de reproduire cet argument à l'extérieur pour tenter de mieux expliquer YACS à nos contemporains.
Agnès from le Grésivaudan (grenoble-chambéry) Associate, 2012 posts	inspired from Fernand on Apr. 20 2007 Fernand : pour ma part, ni l'un ni l'autre, juste quelques bégaiements Par contre, j'adhère à l'idée de la récolte des class, id et autres codes php. D'ailleurs, j'aurai mauvaise mine de pas l'être, puisque j'en avait parlé il y a... ouf. pas mal déjà, et j'avoue que c'est pas grâce à moi que c'est entamé comme besogne. Mais les choses se précisent dans ma 'tite tête, je vais pas tarder à m'y coller - d'autant que j'ai des progrès à faire sur ces aspects là, et que j'aime bien étudier les codes quand le boulot est à ma portée, ce qui devrait être le cas ici. Promis, des nouvelles concrètes très bientôt, et que ceux qui veulent s'y coller aussi commencent à réfléchir. ----- Agnès Il n'y a pas de problèmes, que des solutions.
Tof from Grenoble-Chambery 500 posts	on Apr. 20 2007 rapprochez vous de Lesage Alain; il me semble qu'il maitrise les css de yacs et qu'il a des suggestions pour que ça soit encore mieux. ----- Tof
Bernard from nearby-an-airport Associate, 6674 posts	on Apr. 22 2007 Le plus facile, pour bien rentrer dans le CSS de YACS, est sans doute d'utiliser l'extension Web Developer de Firefox. Une fois l'outil installé, il suffit de survoler un élément à l'écran pour identifier les styles et classes associés. Et en cliquant, on obtient carrément l'extrait des feuilles de style cascadées qui s'appliquent à l'élément. Pour "décoder" et "déverminer" une mise en page, c'est l'arme absolue. Disponible sous forme d'électrons recyclés parlant anglais...

18 comments

Rate this page
Posted by Fernand on Apr. 11 2007, commented by Bernard on Apr. 22 2007, (popular)