Qwidget Custom Color Skin Instructions

The QuestionPoint Qwidget Builder offers 7 different color choices. You may use the instructions below if you would like to customize the color of the Qwidget to exactly match the color scheme of your web site.

Please note these instructions are written for web designers who have some experience with Cascading Style Sheets (CSS).

Before starting this process, please be sure that you have the necessary access rights to place a file directory on a publicly facing web server.

At a high level, this document will assist you with the following:

  • Creating and modifying a custom CSS file to ‘skin’ the qwidget functionality
  • Modifying the qwidget code segment generated by the Form Manager to use your new skin.

The steps are as follows:

  1. Set up the CSS folder
  2. Download custom.css
  3. Download Icons to the images subdirectory
  4. Edit custom.css
  5. Edit images
  6. Encode custom.css URL
  7. Add custom.css to your Qwidget code
  8. Republish content containing the custom skinned qwidget

Appendix: CUSTOM QWIDGET DECONSTRUCTED

At this point

  1. Your css folder should contain the following
    1. custom.css
    2. images folder 

Before proceeding, confirm using a web browser that your folder available by going to

http://yourURLgoeshere.xxx/css/custom.css

If the browser returns the content of your custom.css file, then your css folder is available. (note be sure that you also do this step from a computer that is not on your network to be sure it is externally facing to the public)

CSS with default color
Area Changed Screenshot with the change in RED

#qpchatwidget{
    border-color: #FF9900;

}

Sets the border color for the entire Qwidget
.qp_institution_name_bar{
    background-color: #FF9900;
Sets the background color for the Qwidget name in the title

.qp_title {
    color: white;

}

Sets the font color for the Qwidget name in the title

.qp_popout_icon{
    background-color: #FF9900;

}

Sets the background color for the popout icon

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

}

Sets the image for the popout icon

.qp_icons_bar{
    background-color: #FFE0B2;

}

Sets the background color for icons bar

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

}

Sets the background and border color for help icon

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

}

Sets the image for the help icon in the icons bar section
.qp_help_icon_title_bar{
    background-color: #FF9900;
}
Sets the background color for help icon in the Qwidget Name title bar section
.qp_widget_help_image_title_bar{
    background-image: url("images/chat_help_retina_black.png");
}
Sets the help icon image in the Qwidget Name title bar section
.qp_email_icon{
    background-color: #FFE0B2;
}
Sets the background color for the email icon
.qp_email_icon_image{
    background-image: url("images/add_email_retina_black.png");
}
Sets the email icon image
.qp_end_chat_icon{
    border-left: 1px solid #FF9900;
    background-color: #FFE0B2;
}
Sets the background color for the end chat icon
.qp_end_chat_icon_image{
    background-image: url("images/closeX_dark_retina_black.png");
}
Sets the end chat image
Main Chat Section
.qp_chat_transcript {
    background-color: white;
}
Sets the background color for the chat
.qp_widget_message_echo{
    background-color:#FF9900;
    color: white;
}
Sets the background color and font color for the text the patron types
.qp_widget_message_remote{
    background-color: white;
    color: black;
    border-color: #F0F0F0;
}
Sets the background color and font color for the text the librarian types
.qp_nudge_message_text_default{
    color: black;
}
Sets the font color for the nudge message
.qp_nudge_message{
    background-color: #FFE0B2;
    border: 1px solid #FF9900;
}
Sets the background color for the nudge message
.qp_librarian_typing_message{
    background-color: white;
    color: #434343;
}
Sets the background color and font color for 'Librarian is typing..' message
.qp_question_input_area{
    background-color: #FFE0B2;
}
Sets the background color for the input box where the patron types the question
.qp_question_input_container{
    border-color: #FF9900;
}
Sets the border color of the Question container
.qp_question{
    background-color: white;
    color: black;
}
Sets the background color and font color for the input box where the patron types the question
.qp_send_button{
    background-color: #FFE0B2;
}
Sets the background color for the send button arrow
.qp_send_button_image{
    background-image: url("images/triangle_right_retina_black.png");
}
Sets the send button arrow image

Initial email overlay

The initial email overlay is the screen displayed when a library makes it mandatory to require an email address before a chat session.

.qp_initial_main{
    background-color: #FFE0B2;
}
Sets the background color for the initial email overlay
.qp_email_address_text {
    background-color: white;
    color: black;
}
Sets the background color and font color for the email address textbox
.qp_initial_question_text {
    background-color: white;
    color: black;
}
Sets the background color and font color for the initial question textbox
.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');
}
Sets the background color gradient, font color and border color for the Send button for various browsers as each handled gradient differently.

End session overlay

When a user clicks on the end session button the end session overlay screen is displayed

.qp_end_session_overlay{
    background-color: #FFE0B2;
}
Sets the background color for the end session overlay screen
.qp_end_session_overlay_content {
    border-bottom: solid 1px #CDCDCD;
    color: gray;
}
Sets the color for the border
.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');
}
Sets the background color gradient, font color and border color for the Email session transcripts button for various browsers as each handled gradient differently.
.qp_end_session_email_transcripts_sent_image{
    background-image: url("images/email_sent_retina_black.png");
}
Sets the email sent confirmation image
.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');
}
Sets the background color gradient, font color and border color for the Fill out a chat survey button  for various browsers as each handled gradient differently.
.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');
}
Sets the background color gradient, font color and border color for the OK button for various browsers as each handled gradient differently.

Offline overlay

Offline overlay screen is displayed when the Librarian is offline and Chat is unavailable

.qp_offline_overlay{
    background-color: #FFE0B2;
}
Sets the background color for the offline overlay screen
.qp_offline_overlay_msg{
    color: black;
}
Sets the background color for the offline message
.qp_offline_email_address_text{
    background-color: white;
    color: black;
}
Sets the background color and font color for the offline email address textbox
.qp_offline_initial_question_text{
    background-color: white;
    color: black;
}
Sets the background color and font color for the offline initial question textbox
.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');
}
Sets the background color gradient, font color and border color for the Send button  for various browsers as each handled gradient differently.
.qp_offline_question_sent_msg{
    color: black;
}
Sets the font color for the email sent confirmation message

Add Email button

This screen is displayed when the user wants to add their email to the chat session, if previously not entered

.qp_email_form{
    background-color: #FFE0B2;
}
Sets the background color for the Add email overlay
.qp_email_form_elem_input{
    background-color: white;
    color: black;
}
Sets the background color and font color for the email address textbox
.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');
}
Sets the background color gradient, font color and border color for the buttons on this screen  for various browsers as each handled gradient differently.
QuestionPoint 24/7 Reference Services

Step 1: Setting Up the CSS Folder

  1. On a publicly facing web server, create a directory called css
  2. Within the css directory, create another direcotry called images

Please note OCLC cannot help you in with this step

 

Step 2: Download custom.css

  1. Download custom.zip and extract custom.css from that .zip file
  2. Add custom.css to your css directory

Step 3: Download Icons to the images subdirectory

  1. Download images.zip and extract the images folder from that .zip file
  2. Add the images folder to your css directory as a subdirectory


Note that within the 'images' folder are the following files:
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

You may recolor the files but if you change the file name, you must also change the file name in custom.css. or risk a Qwidget with a broken image(s).

Step 4: Editing custom.css

  1. Edit the color variables so that they are in the same color scheme as your site.


WARNING:

Make sure when you are using .qp_widget_message_echo (aka message from a librarian) and .qp_widget_message_remote (aka message from a patron) that you alternate your background colors and be sure to use complementary text colors.

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

For example, if you want the background for the librarian reply (.qp_widget_message_echo) to be on a dark color, be sure to use a light color for text.

Also do not use the same background color for both .qp_widget_message_remote and .qp_widget_message_echo

See Appendix CUSTOM QWIDGET DECONSTRUCTED for more details

Step 5: Editing images

As part of Step 3, you were provided a set of black images for use with your custom skinned Qwidget.

As stated in Step 3, you may recolor the files but do not change the file name or size of the file or risk a Qwidget with a broken image(s).

Step 6: Encoding custom.css URL

  1. Take the path to your externally facing css folder (example: http://wilson.edu/css) and encode it using the URL Decoder/Encoder located at http://meyerweb.com/eric/tools/dencoder/
  2. To do this, take the URL to the css folder and paste it into the box.

  3. Click encode and copy the output. You’ll need this for the next step


Our example of http://wilson.edu/css will encode to http%3A%2F%2Fwilson.edu%2Fcss

Step 7: Adding custom.css to your Qwidget code

  1. Using the encoded URL from Step 6, edit your Qwidget code to add &customSkin=ENCODE URL GOES HERE at the end of the Qwidget

Below is an example with the added code highlighted.

new-custom-qwidget-code

Step 8: Republish any content containing the custom skinned qwidget

In order to see the changes to the qwidget, you must republish the pages containing the qwidget code

Appendix CUSTOM QWIDGET DECONSTRUCTED