QuestionPoint 24/7 Reference Services

Personnalisation des couleurs du Qwidget

Sept agencements de couleurs sont disponibles lors de la création du Qwidget de QuestionPoint. Pour utiliser votre propre agencement de couleurs, suivez les instructions ci-dessous.

Veuillez noter que ces instructions ont été écrites pour des concepteurs de site Web qui connaissent les feuilles de style CSS (Cascading Style Sheets).

Avant de commencer, assurez-vous d'avoir les droits d'accès nécessaires pour créer un répertoire de fichiers sur votre serveur d'applications Web publiques.

Les instructions ci-dessous vous permettront de :

  • Créer et modifier un fichier CSS qui déterminera les couleurs de votre Qwidget.
  • Modifier le code du Qwidget généré dans le gestionnaire de formulaire afin d'appliquer le nouvel agencement de couleurs.

Suivez ces étapes:

  1. configuration du du répertoire CSS
  2. téléchargement du fichier CSS
  3. téléchargement des icônes vers le sous-répertoire images
  4. modification du fichier custom.css
  5. modification des images
  6. encodage de l'adresse URL pour le fichier custom.css
  7. ajout du fichier custom.css au code de votre Qwidget
  8. publication de toutes les pages contenant le nouveau Qwidget

Annexe: Personnalisation du Qwidget étape par étape

Étape 1 : configuration du répertoire CSS

  1. Sur un serveur d'applications Web publiques, créez un répertoire nommé « css ».

  2. Dans ce répertoire css, créez un autre répertoire nommé « images ».

Veuillez noter qu'OCLC ne peut pas vous aider pour cette étape.

Étape 2 : téléchargement du fichier CSS

  1. Téléchargez  le fichier custom.zip et procédez à l'extraction du fichier « custom.css » contenu dans ce fichier .zip.

  2. Ajouter le fichier custom.css à votre répertoire css.

Étape 3 : téléchargement des icônes vers le sous-répertoire images

  1. Téléchargez le fichier images.zip et procédez à l'extraction du dossier « images » contenu dans ce fichier.zip.
  2. Ajoutez le dossier images à votre répertoire css comme sous-répertoire.

Veuillez noter que le dossier images contient les fichiers suivants :
add_email_retina_black.png
chat_help_retina_black.png
chat_popout_retina_black.png
closeX_dark_retina_black.png
email_sent_retina_black.png
triangle_right_retina_black_png

Vous pouvez modifier les couleurs des images, mais si vous modifiez le nom des fichiers, vous devez également modifier le nom des fichiers dans le fichier custom.css sans quoi les liens aux images seront brisés.

VérificationVotre répertoire css devrait maintenant contenir :

  1. le fichier custom.css;
  2. le sous-répertoire images. 

Avant de continuer, assurez-vous (en utilisant un navigateur Web) que votre répertoire est disponible en allant au

http://votre lien URL.xxx/css/custom.css

Si votre navigateur Web présente le contenu de votre fichier custom.css, votre répertoire css est disponible. Note.— Effectuez également cette vérification à partir d'un ordinateur qui n'est pas sur votre réseau afin de vous assurez que le répertoire est affiché publiquement.

Étape 4 : modification du fichier custom.css

1.    Modifiez les valeurs des couleurs afin qu'elles s'agencent, par exemple, aux couleurs de votre site Web.


Mise en garde :

Assurez-vous de ne pas utiliser la même couleur d'arrière-plan pour .qp_widget_message_echo (messages du bibliothécaire) et .qp_widget_message_remote (messages de l'utilisateur) et d'utiliser des couleurs complémentaires pour le texte.

/*Sets the background color and font color for the text the patron types*/
.qp_widget_message_echo{
    background-color:#FF9900;
    color: white;
}

/*Sets the background color and font color for the text the librarian types*/
.qp_widget_message_remote{
    background-color: white;
    color: black;
    border-color: #F0F0F0;
}

Par exemple, si vous choisissez une couleur d'arrière-plan foncée pour les messages du bibliothécaire (.qp_widget_message_echo), choisissez une couleur claire pour le texte.

Voir l'annexe Personnalisation du Qwidget étape par étape pour plus de détails

Étape 5 : modification des images

À l'étape 3, vous avez téléchargé un dossier d'images noires pour personnaliser votre Qwidget.

Vous pouvez modifier la couleur ou la taille de ces images, mais ne modifiez pas le nom des fichiers (images) car les liens aux images pourraient être brisés.

Étape 6 : encodage de l'adresse URL pour le fichier custom.css

  1. Prenez l'adresse menant à votre répertoire css public (exemple : http://wilson.edu/css) et encodez cette adresse en utilisant l'outil disponible au http://meyerweb.com/eric/tools/dencoder/
  2. Pour ce faire, copiez l'URL du répertoire css et copiez-la dans la boîte.

  3. Cliquez ensuite sur le bouton « Encode » puis copiez l'adresse générée. Vous en aurez besoin pour la prochaine étape.

    Exemple : l'adresse encodée pour http://wilson.edu/css sera http%3A%2F%2Fwilson.edu%2Fcss

Étape 7 : ajout du fichier custom.css au code de votre Qwidget

1.    En utilisant l'adresse URL encodée de l'étape 6, ajoutez &customSkin=URL encodée à la fin du code pour votre Qwidget.

Exemple avec le code ajouté en surbrillance.

new-custom-qwidget-code

Étape 8 : publication de toutes les pages contenant le nouveau Qwidget

Pour voir les modifications apportées au Qwidget vous devez republier les pages contenant le code du Qwidget.

Annexe :  Personnalisation du Qwidget étape par étape

CSS avec couleurs par défaut
Section modifiée Écran avec modification en ROUGE

#qpchatwidget{
    border-color: #FF9900;

}

Définit la couleur de la bordure du Qwidget
.qp_institution_name_bar{
    background-color: #FF9900;
Définit la couleur d'arrière-plan de la barre de titre du Qwidget

.qp_title {
    color: white;

}

Définit la couleur du texte dans la barre de titre du Qwidget

.qp_popout_icon{
    background-color: #FF9900;

}

Définit la couleur d'arrière-plan de l'icône pour la fenêtre éclair

.qp_popout_icon_image{
    background-image: url("images/chat_popout_retina_black.png");

}

Définit l'image pour la fenêtre éclair

.qp_icons_bar{
    background-color: #FFE0B2;

}

Définit la couleur d'arrière-plan de la barre d'icônes

.qp_help_icon{
    border-right: 1px solid #FF9900;
    background-color: #FFE0B2;

}

Définit la couleur d'arrière-plan et de la bordure de l'icône d'aide

.qp_widget_help_image{
    background-image: url("images/chat_help_retina_black.png");

}

Définit l'image pour l'icône d'aide dans la barre d’icônes
.qp_help_icon_title_bar{
    background-color: #FF9900;
}
Définit la couleur d'arrière-plan de l'icône d'aide dans la barre de titre du Qwidget
.qp_widget_help_image_title_bar{
    background-image: url("images/chat_help_retina_black.png");
}
Définit l'image pour l'icône d'aide dans la barre de titre du Qwidget
.qp_email_icon{
    background-color: #FFE0B2;
}
Définit la couleur d'arrière-plan de l'icône de courriel
.qp_email_icon_image{
    background-image: url("images/add_email_retina_black.png");
}
Définit l'image pour l'icône de courriel
.qp_end_chat_icon{
    border-left: 1px solid #FF9900;
    background-color: #FFE0B2;
}
Définit la couleur d'arrière-plan de l'icône permettant de mettre fin à la session
.qp_end_chat_icon_image{
    background-image: url("images/closeX_dark_retina_black.png");
}
Définit l'image pour l'icône permettant de mettre fin à la session
Section principale pour session en ligne
.qp_chat_transcript {
    background-color: white;
}
Définit la couleur d'arrière-plan pour la session en ligne
.qp_widget_message_echo{
    background-color:#FF9900;
    color: white;
}
Définit la couleur d'arrière-plan et du texte de la boîte de texte de l'utilisateur
.qp_widget_message_remote{
    background-color: white;
    color: black;
    border-color: #F0F0F0;
}
Définit la couleur d'arrière-plan et du texte de la boîte de texte du bibliothécaire
.qp_nudge_message_text_default{
    color: black;
}
Définit la couleur du texte de la suggestion
.qp_nudge_message{
    background-color: #FFE0B2;
    border: 1px solid #FF9900;
}
Définit la couleur d'arrière-plan de la suggestion
.qp_librarian_typing_message{
    background-color: white;
    color: #434343;
}
Définit la couleur d'arrière-plan et du texte du message « Le bibliothécaire écrit... »)
.qp_question_input_area{
    background-color: #FFE0B2;
}
Définit la couleur d'arrière-plan de la boîte dans laquelle l'utilisateur inscrit sa question
.qp_question_input_container{
    border-color: #FF9900;
}
Définit la couleur de la bordure de la boîte contenant la question
.qp_question_input_area{
    background-color: #FFE0B2;
}

Définit la couleur d'arrière-plan de la boîte dans laquelle l'utilisateur inscrit sa question 

 

lorsqu'une adresse courriel est requise

.qp_send_button{
    background-color: #FFE0B2;
}
Définit la couleur d'arrière-plan pour l'image du bouton permettant d'envoyer la question
.qp_send_button_image{
    background-image: url("images/triangle_right_retina_black.png");
}
Définit l'image du bouton permettant d'envoyer la question
Section initiale pour l'adresse courriel
La section initiale pour l'adresse courriel est présentée lorsque la bibliothèque exige que l'utilisateur il inscrive son adresse courriel avant d'entreprendre la session.
.qp_initial_main{
    background-color: #FFE0B2;
}
Définit la couleur d'arrière-plan de la section initiale pour l'adresse courriel
.qp_email_address_text {
    background-color: white;
    color: black;
}
Définit la couleur d'arrière-plan et du texte de la boîte pour l'adresse courriel
.qp_initial_question_text {
    background-color: white;
    color: black;
}
Définit la couleur d'arrière-plan et du texte de la boîte initiale pour la question
.qp_initial_send_button{
    color: black;
    border: 1px solid #FF9900;
    background-image: -webkit-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -moz-linear-gradient(center top , #FFE0B2, #FF9900);
    background-image: -ms-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -o-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: linear-gradient(top, #FFE0B2, #FF9900);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE0B2', endColorstr='#FF9900');
}
Définit le dégradé de la couleur d'arrière-plan, et la couleur du texte et de la bordure pour le bouton Envoyer
Section de fermeture de la session
Lorsqu'un utilisateur clique sur le bouton pour fermer la session, la section pour la fermeture de la session est présentée
.qp_end_session_overlay{
    background-color: #FFE0B2;
}
Définit la couleur d'arrière-plan de la section pour la fermeture de la session
.qp_end_session_overlay_content {
    border-bottom: solid 1px #CDCDCD;
    color: gray;
}
Définit la couleur de la bordure
.qp_end_session_email_transcripts{
    color: black;
    border: 1px solid #FF9900;
    background-image: -webkit-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -moz-linear-gradient(center top , #FFE0B2, #FF9900);
    background-image: -ms-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -o-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: linear-gradient(top, #FFE0B2, #FF9900);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE0B2', endColorstr='#FF9900');
}
Définit le dégradé de la couleur d'arrière-plan, et la couleur du texte et de la bordure pour le bouton permettant d'envoyer la transcription de la session par courriel
.qp_end_session_email_transcripts_sent_image{
    background-image: url("images/email_sent_retina_black.png");
}
Définit l'image confirmant l'envoi du courriel
.qp_end_session_survey{
    color: black;
    border: 1px solid #FF9900;
    background-image: -webkit-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -moz-linear-gradient(center top , #FFE0B2, #FF9900);
    background-image: -ms-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -o-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: linear-gradient(top, #FFE0B2, #FF9900);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE0B2', endColorstr='#FF9900');
}
Définit le dégradé de la couleur d'arrière-plan, et la couleur du texte et de la bordure pour le bouton demandant de remplir le sondage
.qp_end_session_ok_button{
    color: black;
    border: 1px solid #FF9900;
    background-image: -webkit-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -moz-linear-gradient(center top , #FFE0B2, #FF9900);
    background-image: -ms-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -o-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: linear-gradient(top, #FFE0B2, #FF9900);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE0B2', endColorstr='#FF9900');
}
Définit le dégradé de la couleur d'arrière-plan, et la couleur du texte et de la bordure pour le bouton OK
Section hors ligne
La section hors ligne est présentée lorsque le bibliothécaire n'est pas en ligne et les sessions en ligne ne sont pas disponibles
.qp_offline_overlay{
    background-color: #FFE0B2;
}
Définit la couleur d'arrière-plan pour la section hors ligne
.qp_offline_overlay_msg{
    color: black;
}
Définit la couleur d'arrière-plan pour le message hros ligne
.qp_offline_email_address_text{
    background-color: white;
    color: black;
}
Définit la couleur d'arrière-plan et du texte de la boîte d'adresse de courriel hors ligne
.qp_offline_initial_question_text{
    background-color: white;
    color: black;
}
Définit la couleur d'arrière-plan et du texte de la boîte initiale pour la question hors ligne
.qp_offline_initial_send_button{
    color: black;
    border: 1px solid #FF9900;
    background-image: -webkit-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -moz-linear-gradient(center top , #FFE0B2, #FF9900);
    background-image: -ms-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -o-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: linear-gradient(top, #FFE0B2, #FF9900);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE0B2', endColorstr='#FF9900');
}
Définit le dégradé de la couleur d'arrière-plan, et la couleur du texte et de la bordure pour le bouton Envoyer
.qp_offline_question_sent_msg{
    color: black;
}
Définit la couleur du message confirmant l'envoi du courriel
Bouton Ajouter adresse courriel
Cet écran est présenté lorsqu'un utilisateur veut ajouter son adresse courriel à la session en ligne (s'il ne l'a pas fait au début de la session)
.qp_email_form{
    background-color: #FFE0B2;
}
Définit la couleur d'arrière-plan de la section Ajouter adresse courriel
.qp_email_form_elem_input{
    background-color: white;
    color: black;
}
Définit la couleur d'arrière-plan et du texte de la boîte pour l'adresse courriel
.qp_email_form_btn{
    color: black;
    border: 1px solid #FF9900;
    background-image: -webkit-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -moz-linear-gradient(center top , #FFE0B2, #FF9900);
    background-image: -ms-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: -o-linear-gradient(top, #FFE0B2, #FF9900);
    background-image: linear-gradient(top, #FFE0B2, #FF9900);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE0B2', endColorstr='#FF9900');
}
Définit le dégradé de la couleur d'arrière-plan, et la couleur du texte et de la bordure pour les boutons de cet écran