Comment insérer votre logo sur votre site Yacs

Etape 1 : Format d'image

Votre logo peut être au format .gif, .jpg ou .png.
Question taille (en pixel), c'est vous qui voyez. A titre d'exemple, le logo par défaut de Yacs (skin Alfresco)a une taille de 32X32 pixels.
Supposons, que votre image ait les mêmes dimensions que celles d'un logo standard (32x32 pixels), et qu'elle s'appelle monlogo.gif

Etape 2 : Uploader votre logo

Vous allez transférer votre logo (ou simplement le copier si vous travailler en local) avec les autres fichiers de votre style - celui que vous venez de créer, dans le dossier /skins/mon_style/images.

Donc, à ce stade, vous avez ajouté une image à votre serveur. Pour le vérifier, ouvrez un navigateur web (Internet Explorer, Firefox...) et taper l'adresse complète de l'image pour la faire apparaitre.
Quelque chose comme :

http://serveur/yacs/skins/mon_style/images/monlogo.gif

Si l'image s'affiche, tout va bien. Passons à présent à son insertion dans votre mise en page.

Etape 3 : Modifier la feuille de style

Deux solutions s'offrent à vous : soit vous utilisez votre éditeur de style préféré, soit vous utilisez celui intégré dans Yacs.

Utiliser l'éditeur de style de Yacs :
Revenir à l'index des styles de votre serveur.
Juste au dessus du style mon_style, cliquez sur le lien Modifier ce style pour activer l'éditeur de style.
Sélectionner le fichier avec l'extension .css
Par exemple, si votre nouveau style s'appelle "mon-style", la feuille de style s'appelle "mon_style.css"

Dès que vous avez cliqué sur le bouton avec les chevrons, YACS affiche une zone avec le contenu du fichier, pour le modifier.

Remplacez le logo de Yacs par le vôtre

Cherchez la ligne qui commence par les mots suivants (à peu près au tiers du fichier) :

#header_title a

Il s'agit du style pour le lien qui apparaît dans l'en-tête de page (le header). Quelques lignes en dessous, remplacer l'image utilisée en fond. Il faut changer

background-image: url("images/yacs.gif");

par

background-image: url("images/monlogo.gif");



#header_title a:hover { /* make the yacs blink */
background-image: url("images/yacs.gif");
background-position: 0 -100px;
}

ASTUCE: si vous pensez vous servir de ces lignes plus tard, vous pouvez simplement les désactiver de la manière suivante :
/*#header_title a:hover { /* make the yacs blink */
background-image: url("images/yacs.gif");
background-position: 0 -100px;*/

Etape 4 : Enregistrez et savourez !

Cliquez sur le bouton en bas du formulaire afin que YACS enregistre les changements.

Rechargez la page en vidant le cache (Shift + actualiser avec Firefox, et Ctrl + Actualiser avec IE) pour vous assurer que la nouvelle feuille de style est utilisée, et pour faire apparaitre votre logo en haut de page.

Vous voici promu éditeur de style .CSS, première catégorie... Ce n'est pas rien !