CSS - Peut on remplacer le bandeau d'une présentation CSS ?

Le principe est d'importer, de modifier puis de renvoyer dans votre site Oxatis le nouveau bandeau image pour votre présentation.

Pré-requis : Vous devez impérativement avoir importé un modèle de présentation dans vos présentations personnalisées pour pouvoir en modifier le bandeau. La procédure détaillée est décrite dans l'aide en ligne : Comment personnaliser ma présentation CSS ?

Nous vous invitons à consulter également nos conseils pour modifier une présentation CSS avant d'aborder cette page.

Imaginons que vous souhaitiez modifier l'image du bandeau de votre site et que vous ne soyez pas un expert en CSS. En éditant simplement l'image du bandeau utilisé par le modèle de présentation, vous n'avez pas à re-paramétrer toute la feuille de style.
 
 1) Récupérez l'image actuelle du bandeau

Ouvrez un [Aperçu] de votre site avec le navigateur Mozilla Firefox, puis cliquez sur le bouton droit de la souris sur l'image du bandeau. Choisissez l'option "Afficher l'image de fond" pour ouvrir le bandeau image dans le navigateur.
Cliquez sur l'image dans la fenêtre qui s'ouvre avec le bouton droit puis sélectionnez l'option "Enregistrer l'image sous" pour sauvegarder l'image bandeau sur votre ordinateur. Nous conseillons une largeur du bandeau de 980 pixels, ce qui correspond au standard actuel de résolution des écrans (affichage en 1024 sur un écran 17").
 
 2) Modifiez l'image

Le but de cette étape est d'intégrer dans cette image bandeau, votre logo, les couleurs, et les visuels que vous souhaitez voir afficher sur toutes les pages de votre site.

Ouvrez cette image avec votre logiciel de retouche photo préféré et modifiez-là à votre goût. Attention : veillez à ce que sa dimension (hauteur et largeur en pixels) ne soit pas changée par rapport à l'image originale. Le cas échéant, cela impliquerait de modifier les paramètres de votre feuille de style en conséquence.

Pour information, le logiciel Gimp propose des fonctionnalités équivalentes à Photoshop et a l'avantage d'être libre de droit, donc téléchargeable gratuitement.

Sauvegardez votre image avec un format compatible avec le web (Gif, Jpg, Png). Si l'option "Enregistrer pour le web" est disponible sur votre logiciel, nous vous conseillons d'opter pour cette façon de sauvegarder.

Veillez à ce que le nom du fichier image soit compatible avec Internet (pas d'espace, pas d'accent, pas d'apostrophe...). Par exemple : mon-image-header.jpg . Si vous ne respectez pas ces règles, le nom du fichier sera modifié automatiquement par le système lors de l'importation et remplacé par des numéros aléatoires.
 
 3) Importez cette image dans votre galerie

Allez dans le menu [Galeries\Images] et cliquez sur le bouton [Ajouter].

Attention : Veillez à ne pas utiliser la fonction de redimensionnement automatique lors de l'importation.
Sélectionnez l'option de dimension qui permet d'envoyer votre image sans modification :
Dimension : Libre (Aucune modification des dimensions de l'image).

Validez votre image bandeau dans votre galerie d'images.
 
 4) Identifiez la classe concernée

A l'aide de Firebug, analysez votre page pour savoir dans quelle classe CSS est définie l'image de ce bandeau. Pour ce faire, nous vous invitons à lire l'aide en ligne suivante : Conseils pour modifier une présentation CSS.
La classe concernée pour le bandeau horizontal est généralement nommée "headerarea" ou "headercontainer"
L'instruction CSS permettant d'afficher une image de fond dans une classe est : background-image.

Exemple :
background-image:url(/DesignCss/17000/366/header366.jpg);
 
 5) Modifiez le code CSS

Cliquez dans le menu [Site\Présentation], puis cliquez sur le bouton [Gérer les présentations personnalisés] pour pouvoir accéder à l'icône [Éditer les propriétés] de la ligne de la présentation CSS.

Retrouvez la classe concernée dans la zone du contenu CSS, (pensez à vous servir de "Ctrl + F" ou "Cmd + F" pour localiser facilement cette classe dans cette longue zone de texte) et modifiez la ligne de code permettant d'afficher cette image.

Pour appliquer l'image que vous avez importé dans votre galerie, vous devez connaitre son URL relative; pour ce faire référez-vous à l'aide en ligne suivante : Comment trouver l'adresse URL ou se trouvent les images de mon site ?

Si votre numéro de compte était le 12345 et que vous aviez nommé votre nouveau bandeau "mon-image-header.jpg" , cette ligne de code ressemblerait à :

background-image: url(/Files/12345/Img/12/mon-image-header.jpg);

Sauvegardez les modifications de votre présentation sur mesure.
 
 6) Supprimez les images utilisées dans l'entête du site

Nous vous déconseillons d'utiliser les fonctionnalités présentes dans le menu [Site\Entête et logo] lorsque vous faites appel à la technologie des présentations CSS pour votre site. Il est recommandé d'insérer ces visuels directement dans le bandeau que vous utiliserez dans votre présentation personnalisée.

Si vous aviez préalablement ajouté un logo ou une image entête dans le menu [Site\Entête et logo], nous vous invitons donc à les supprimer.
 

Ajouter aux favoris : http://www.oxatis.com/Help/HelpCenterContent.asp?ActionID=1024&TID=55155&MID=55562%7C16001&LangID=0
© 2001-2017 Oxatis. Tous droits réservés.