Cette page explique comment personnaliser l'apparence de votre moteur de recherche à l'aide du fichier de contexte (spécification XML pour votre moteur de recherche).
- Présentation
- L'élément
LookAndFeel
- Attributs de l'élément
LookAndFeel
- Éléments enfants de
LookAndFeel
- Ajouter un logo à une page de résultats hébergée par Google
Présentation
Outre le panneau de configuration Programmable Search Engine, vous pouvez modifier l'apparence de votre moteur de recherche en modifiant le fichier XML de contexte. Pour en savoir plus sur les avantages et les inconvénients de chaque format, consultez la page Principes de base. Si vous ne maîtrisez pas les fichiers de contexte, consultez Contexte: définir un moteur de recherche.
Pour encore plus de flexibilité dans l'affichage de votre moteur de recherche, vous pouvez utiliser le Programmable Search Element, qui vous permet d'intégrer Programmable Search Engine à votre page Web et à d'autres applications à l'aide de JavaScript.
Si vos pages Web contiennent également des données structurées, vous pouvez créer des extraits avec une présentation plus riche et du contenu personnalisé. En savoir plus sur la personnalisation de vos extraits de résultats
Avant de commencer à concevoir l'apparence de votre Programmable Search Engine, consultez les Consignes d'implémentation d'un Programmable Search Engine. Il s'agit d'un document succinct qui vous explique comment gérer la marque et l'attribution Google.
L'élément LookAndFeel
Dans le fichier de contexte, toutes les spécifications d'apparence sont définies par l'élément LookAndFeel
sous CustomSearchEngine
. Cet élément détermine si les annonces sont affichées, le mode d'affichage de la section des résultats de recherche et la façon dont chacun s'affiche. L'exemple suivant présente tous les attributs et les éléments enfants de l'élément LookAndFeel
.
<CustomSearchEngine ... > <Title>...</Title> <Description>...</Description> <Context> ... </Context> <LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif"/> <Logo /> <Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/> <Promotions title_color="#006600" title_visited_color="#663399" url_color="#3366ff" background_color="#FFFFFF" border_color="#ffff33" show_image="true" show_snippet="true" snippet_color="#330000" title_hover_color="#0000CC" title_active_color="#0000CC" /> <SearchControls input_border_color="#BCCDF0" button_border_color="#666666" button_background_color="#CECECE" tab_border_color="#E9E9E9" tab_background_color="#E9E9E9" tab_selected_border_color="#FF9900" tab_selected_background_color="#FFFFFF" /> <Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" /> </LookAndFeel> <AdSense /> <EnterpriseAccount /> </CustomSearchEngine>
Les attributs et éléments LookAndFeel
ne sont pas tous pertinents pour tous les types de moteurs de recherche. Par exemple, l'attribut googlebranding
n'est utilisé que pour les moteurs de recherche hébergés par Google. Il est ignoré si votre moteur de recherche utilise l'option d'hébergement "Search Element".
Lorsque vous téléchargez le fichier de contexte du moteur de recherche depuis la page Présentation du panneau de configuration, vous trouverez une section LookAndFeel
entièrement définie. Même les attributs et les éléments qui ne sont pas pertinents pour le type de moteur de recherche que vous avez choisi ont des valeurs définies. Ce ne sont que les valeurs par défaut. Vous pouvez les ignorer. Soyez attentif aux éléments et attributs qui ont une incidence sur votre type de moteur de recherche.
Les sections suivantes abordent les points suivants:
Attributs de l'élément LookAndFeel
Tous les attributs LookAndFeel
sont facultatifs. Si vous ne les spécifiez pas, Programmable Search Engine utilisera les valeurs par défaut. Par exemple, si vous ne définissez pas l'attribut element_layout
de l'élément LookAndFeel
, Programmable Search Engine interprétera cela comme signifie que la valeur element_layout
est "1"
. Certains attributs ne sont pas pertinents pour tous les types de moteurs de recherche.
Selon la façon dont vous avez défini les valeurs des attributs, Programmable Search Engine génère un ensemble de code pour le champ et les résultats de recherche. Vous pouvez prévisualiser le code généré dans la section Obtenir le code de la page "Vue d'ensemble" de votre moteur de recherche. Vous pouvez copier l'extrait de code généré et l'insérer dans votre page Web.
Voici un exemple d'élément LookAndFeel
avec des attributs complets:
<LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif" />
Le tableau suivant répertorie les attributs de CustomSearchEngine
et leurs valeurs.
Remarque:Ne définissez les valeurs que des attributs pertinents pour l'option d'hébergement sélectionnée. La colonne Options d'hébergement vous indique les options d'hébergement auxquelles ces attributs s'appliquent.
Attribut | Options d'hébergement | Description | Valeur |
---|---|---|---|
googlebranding |
Hébergé par Google | Détermine le champ de recherche de votre moteur de recherche. | Utilisez l'une des valeurs suivantes:
|
element_layout |
Élément de recherche | Détermine la disposition du champ de recherche et des résultats de recherche sur la page. Pour en savoir plus sur les différentes options de mise en page, consultez la section Mise en page de l'élément de recherche. |
Utilisez l'une des valeurs suivantes :
|
theme |
Élément de recherche | Détermine le style de votre champ de recherche et des résultats de recherche. | Utilisez l'une des valeurs suivantes:
|
custom_theme |
Élément de recherche | Pour personnaliser le thème afin d'afficher des couleurs et des familles de polices différentes de celles du thème standard, définissez la valeur sur true . Sinon, Programmable Search Engine ignore la personnalisation que vous effectuez sur les couleurs et les polices, qui sont définies dans les éléments enfants de LookAndFeel . |
Spécifiez l'une des valeurs suivantes:
|
text_font |
Toutes | Définit la famille de polices du texte figurant dans les résultats de recherche. |
Bien que le panneau de configuration ne vous permette de sélectionner que cinq familles de polices, vous pouvez en choisir une plus grande dans le fichier de contexte. Vous pouvez utiliser une liste de familles de polices séparées par une virgule comme valeur pour cet attribut, comme dans l'exemple suivant: text_font="Arial, sans-serif" Si vous avez indiqué plusieurs familles de polices, le navigateur utilise la première. Si le navigateur ne prend pas en charge la première police, il tente d'utiliser la police suivante. Commencez donc par la police de votre choix et terminez par une famille générique, telle que serif ou san-serif. La famille générique permet au navigateur de sélectionner une police similaire dans la famille générique lorsqu'aucune des polices listées n'est disponible. Si vous utilisez une famille de polices dont le nom est composé de plusieurs mots, placez-la entre guillemets ( |
Éléments enfants de LookAndFeel
Tous les éléments enfants de LookAndFeel
, à l'exception de l'élément Promotions
, se rapportent uniquement à Search Element. La plupart des attributs de l'élément Promotions
s'appliquent à tous les types de moteurs de recherche. Dans la plupart des cas, les éléments enfants contrôlent les couleurs des différents composants de votre moteur de recherche. Les valeurs des couleurs correspondent aux notations hexadécimales HTML standards. Si vous ne définissez pas les attributs de l'élément, Programmable Search Engine utilise les valeurs par défaut.
Remarque:Si vous souhaitez personnaliser un élément Search, vous devez d'abord définir l'attribut custom_theme
de l'élément LookAndFeel
sur true
avant de définir les valeurs dans les éléments enfants. Si vous ne définissez pas l'attribut custom_theme
sur true
, toutes les valeurs que vous avez définies dans les éléments enfants (à l'exception de Promotions
) sont ignorées par Programmable Search Engine.
LookAndFeel
comporte les éléments enfants suivants.
Colors
: détermine les couleurs de l'élément de recherche.Promotions
: détermine l'apparence des promotions. Ces paramètres s'appliquent à tous les types de moteurs de recherche.SearchControls
: détermine les couleurs des composants du champ de recherche des éléments de recherche.Results
: détermine les couleurs des composants de la section des résultats du Search Element.
Élément enfant Colors
L'élément Colors
détermine la couleur du composant Search. Pour modifier les couleurs des sous-composants de l'élément Search, tels qu'un résultat de recherche ou des promotions, vous devez définir des valeurs dans d'autres éléments frères.
Voici un exemple d'élément Colors
avec des attributs complets:
<Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/>
Le tableau suivant répertorie les attributs facultatifs de Colors
et leurs valeurs.
Attribut | Couleur du composant |
---|---|
url |
URL au bas de chaque extrait des résultats |
background |
Arrière-plan de l'ensemble de la section des résultats. |
border |
Bordure autour de l'élément de recherche. |
title |
Titre des extraits des résultats. Le titre est la première ligne de chaque résultat. |
text |
Corps du texte de l'extrait des résultats. |
visited |
Lien après que l'utilisateur a cliqué dessus. |
title_hover |
Couleur du titre lorsque l'utilisateur passe la souris sur le lien. |
title_active |
Couleur du titre lorsque l'utilisateur clique sur le lien. |
Élément enfant Promotions
L'élément Promotions
contrôle les couleurs de la promotion, et détermine si les images et les descriptions doivent être affichées. L'aspect général des promotions est défini dans le fichier de contexte, tandis que le contenu des promotions elles-mêmes est défini dans le fichier XML des promotions. Pour en savoir plus, consultez Promotions.
Voici un exemple d'élément Promotions
avec des attributs complets:
<Promotions title_color="#006600" title_visited_color="#663399" url_color="#3366ff" background_color="#FFFFFF" border_color="#ffff33" snippet_color="#330000" show_image="true" show_snippet="true" title_hover_color="#0000CC" title_active_color="#0000CC" />
Le tableau suivant répertorie les attributs facultatifs de Promotions
et leurs valeurs.
Attribut | Couleur du composant |
---|---|
title_color |
Titre de chaque promotion. |
title_visited_color |
Titre après que l'utilisateur a cliqué dessus. |
url_color |
URL en bas de chaque promotion |
background_color |
Couleur d'arrière-plan de l'ensemble de la section des promotions. |
border_color |
Bordure autour de l'ensemble de la section de promotion. |
snippet_color |
Description de la promotion. Si votre promotion ne comporte pas de description, ce paramètre ne change rien. |
show_image |
Pour afficher une image dans votre promotion, définissez cet attribut sur L'image à afficher est définie dans le fichier des promotions. |
show_snippet |
Pour afficher une description dans votre promotion, définissez cet attribut sur Le contenu de la description est défini dans le fichier des promotions. |
title_hover_color |
Titre lorsque l'utilisateur pointe sur le lien. |
title_active_color |
Titre lorsque l'utilisateur clique sur le lien. |
Élément enfant SearchControls
L'élément SearchControls
contrôle les couleurs du champ de recherche et des onglets des affinages dans un élément Search. Si vous avez créé des libellés de suggestion dans votre moteur de recherche, ils apparaissent sous forme d'onglets dans l'élément de recherche. Si vous n'avez pas de libellés de suggestion, les onglets ne s'affichent pas, et Programmable Search Engine ignore les valeurs des attributs.
Si vous souhaitez que Programmable Search Engine effectue la saisie semi-automatique des requêtes, consultez la section décrivant l'attribut autocompletions
de l'élément CustomSearchEngine
dans le fichier de contexte.
Voici un exemple d'élément SearchControls
avec des attributs complets:
<SearchControls input_border_color="#BCCDF0" button_border_color="#666666" button_background_color="#CECECE" tab_border_color="#E9E9E9" tab_background_color="#E9E9E9" tab_selected_border_color="#FF9900" tab_selected_background_color="#FFFFFF" />
Le tableau suivant répertorie les attributs facultatifs de SearchControls
et leurs valeurs.
Attribut | Couleur du composant |
---|---|
input_border_color |
Bordure du champ de saisie pour les requêtes de recherche. |
button_border_color |
Bordure autour du bouton de recherche. |
button_background_color |
Bouton de recherche |
tab_border_color |
Bordure autour des onglets qui ne sont pas au premier plan (non sélectionnés par l'utilisateur). |
tab_background_color |
Onglets qui ne sont pas au premier plan. |
tab_selected_border_color |
Onglet que l'utilisateur vient de sélectionner. L'onglet sur lequel l'utilisateur a cliqué en dernier reprend l'état sélectionné. |
tab_selected_background_color |
Couleur de l'onglet actuellement sélectionné. |
Élément enfant Results
L'élément Results
contrôle la couleur de chaque résultat dans le composant Search. Chaque résultat individuel constitue une unité de titre, d'extrait et de lien. Définir cet élément enfant vous permet de délimiter visuellement les résultats individuels ou de mettre en évidence ceux qui sont sélectionnés par les utilisateurs. Si vous ne souhaitez pas délimiter des résultats individuels ni mettre en surbrillance un résultat, vous pouvez définir les bordures et les arrière-plans de sorte qu'ils correspondent à la couleur de l'arrière-plan de l'ensemble de la section de résultats.
Figure 1:Résultats avec des résultats individuels délimités et des résultats individuels mis en évidence lorsque l'utilisateur pointe dessus.
Les résultats présentent deux états:
- État normal : affichage d'un résultat individuel lorsque le curseur de la souris ne le survole pas.
- État de survol : apparence d'un résultat individuel lorsque le curseur de la souris le survole.
Cet élément contrôle la couleur des résultats individuels. Pour modifier l'arrière-plan de tous les résultats, consultez la section Élément enfant de couleur.
Voici un exemple d'élément Results
avec des attributs complets:
<Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" />
Le tableau suivant répertorie les attributs facultatifs de Results
et leurs valeurs.
Attribut | Couleur du composant |
---|---|
border_color |
La bordure de chaque individu affiche un état normal. |
border_hover_color |
Bordure du résultat lorsque l'utilisateur pointe dessus. |
background_color |
La couleur d'arrière-plan des individus donne un état normal. |
background_hover_color |
Arrière-plan du résultat lorsque l'utilisateur pointe dessus. |
Ajout d'un logo à une page de résultats hébergée par Google
Si vous autorisez Google à héberger votre page de résultats, vous pouvez inclure un logo ou une petite image juste à côté du champ de recherche sur la page de résultats. L'image doit être un fichier .jpg, .png ou .gif hébergé sur un site Web (le vôtre ou un site qui n'est soumis à aucune restriction en matière de droits d'auteur). Vous pouvez associer une URL à l'image pour la rendre cliquable.
Remarque:Si vous utilisez Programmable Search Element pour héberger les résultats de recherche, vous ne pouvez pas ajouter d'image via le panneau de configuration ou le fichier de contexte.
Voici un exemple de page de résultats avec un logo.
Figure 3:Champ de recherche avec une image
L'image et son URL sont définies dans les attributs de l'élément Logo
sous l'élément LookAndFeel
. L'exemple suivant montre comment ajouter un logo à votre page de résultats hébergée par Google.
<LookAndFeel> <Logo url="http://www.ascii.com/logo.gif" destination="http://www.ascii.com/" height="90"/> ... </LookAndFeel>
Le tableau suivant répertorie les attributs de l'élément Logo
.
Attribut | Description et valeur |
---|---|
url |
URL de l'image. Il peut s'agir d'un fichier .gif, .png ou .jpg. |
destination |
Si vous voulez que l'image soit un lien, définissez l'URL de destination. |
height |
Hauteur de l'image en pixels. La hauteur maximale est de 100 pixels. Il n'est pas nécessaire d'indiquer la largeur, car Programmable Search Engine conserve les proportions. Ne prenez pas la peine d'indiquer la hauteur, sauf si l'image est trop grande et que vous souhaitez que Programmable Search Engine la réduit. |