remplacer le title par une image

// 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";
}

#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;

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

Tof - 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">&nbsp;</a></p>'."\n";

 Ca devrait marcher, n'hésites pas à me faire remonter si ce n'est pas le cas.

A+

-----
Tof

---

Christophe Battarel - Société altairis -

Tof - 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

---

Christophe Battarel - Société altairis -

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

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

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

Agnès - 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.

---

Agnès
Il n'y a pas de problèmes, que des solutions.

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