Skip to main content
OCLC Support

Qwidget Custom Color Skin Instructions

Overview

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.

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 directory called images.

 Note: OCLC cannot help you 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 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: 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).

At this point

Your css folder should contain the following:

  • custom.css
  • images folder

Before proceeding, confirm that you are using a web browser from which your folder is 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.

 

Step 4: Edit custom.css

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

 Caution: 

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.

Step 5: Edit 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: Encode 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/. To do this, take the URL to the css folder and paste it into the box.
    URL Decoder/Encoder
  2. 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: Add custom.css to your qwidget code

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 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

Main Qwidget configuration
css with default color area changed screenshot with the change in red

#qpchatwidget{
    border-color: #FF9900;

}

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

.qp_title {
    color: white;

}

Sets the font color for the Qwidget name in the title Font color

.qp_popout_icon{
    background-color: #FF9900;

}

Sets the background color for the popout icon Popout icon

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

}

Sets the image for the popout icon Chat popout retina

.qp_icons_bar{
    background-color: #FFE0B2;

}

Sets the background color for icons bar Icons bar

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

}

Sets the background and border color for help icon Help icon

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

}

Sets the help icon image in the Qwidget Name title bar section Chat help retina

.qp_email_icon{
    background-color: #FFE0B2;
}

Sets the image for the help icon in the icons bar section Email
.qp_email_icon_image{
    background-image: url("images/add_email_retina_black.png");
}
Sets the email icon image Add email retina
.qp_end_chat_icon{
    border-left: 1px solid #FF9900;
    background-color: #FFE0B2;
}
Sets the background color for the end chat icon End chat
.qp_end_chat_icon_image{
    background-image: url("images/closeX_dark_retina_black.png");
}
Sets the end chat image Close dark retina
Main chat section
css with default color area changed screenshot with the change in red
.qp_chat_transcript {
    background-color: white;
}
Sets the background color for the chat Chat background
.qp_widget_message_echo{
    background-color:#FF9900;
    color: white;
}
Sets the background color and font color for the text the patron types Echo
.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 Librarian message
.qp_nudge_message_text_default{
    color: black;
}
Sets the font color for the nudge message Nudge message text
.qp_nudge_message{
    background-color: #FFE0B2;
    border: 1px solid #FF9900;
}
Sets the background color for the nudge message Nudge message background
.qp_librarian_typing_message{
    background-color: white;
    color: #434343;
}
Sets the background color and font color for 'Librarian is typing..' message Librarian is typing background and text
.qp_question_input_area{
    background-color: #FFE0B2;
}
Sets the background color for the input box where the patron types the question Patron message box background
.qp_question_input_container{
    border-color: #FF9900;
}
Sets the border color of the Question container Patron message box border inside
.qp_question{
    background-color: white;
    color: black;
}
Sets the background color and font color for the input box where the patron types the question Question background
.qp_send_button{
    background-color: #FFE0B2;
}
Sets the background color for the send button arrow Send arrow background
.qp_send_button_image{
    background-image: url("images/triangle_right_retina_black.png");
}
Sets the send button arrow image Right triangle
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.
 
css with default color area changed screenshot with the change in red
.qp_initial_main{
    background-color: #FFE0B2;
}
Sets the background color for the initial email overlay Initial email overlay
.qp_email_address_text {
    background-color: white;
    color: black;
}
Sets the background color and font color for the email address textbox Email required background
.qp_initial_question_text {
    background-color: white;
    color: black;
}
Sets the background color and font color for the initial question textbox Question background
.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 Send button
End session overly
When a user clicks on the end session button, the end session overlay screen is displayed.
 
css with default color area changed screenshot with the change in red
.qp_end_session_overlay{
    background-color: #FFE0B2;
}    Sets the background color for the end session overlay screen    
Sets the background color for the end session overlay screen End session background
.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. Email session transcript
.qp_end_session_email_transcripts_sent_image{
    background-image: url("images/email_sent_retina_black.png");
}
Sets the email sent confirmation image Email sent
.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 Survey
.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 OK
Offline overlay
Offline overlay screen is displayed when the Librarian is offline and Chat is unavailable.
 
css with default color area changed screenshot with the change in red
.qp_offline_overlay{
    background-color: #FFE0B2;
}
Sets the background color for the offline overlay screen Closed Qwidget
.qp_offline_overlay_msg{
    color: black;
}
Sets the background color for the offline message Closed Qwidget text
.qp_offline_email_address_text{
    background-color: white;
    color: black;
}
Sets the background color and font color for the offline email address textbox Closed Qwidget email background
.qp_offline_initial_question_text{
    background-color: white;
    color: black;
}
Sets the background color and font color for the offline initial question textbox Closed Qwidget question background
.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 Send
.qp_offline_question_sent_msg{
    color: black;
}
Sets the font color for the email sent confirmation message Offline question sent message
Add Email button
This screen is displayed when the user wants to add their email to the chat session, if previously not entered.
 
css with default color area changed screenshot with the change in red
.qp_email_form{
    background-color: #FFE0B2;
}
Sets the background color for the Add email overlay Add email background
.qp_email_form_elem_input{
    background-color: white;
    color: black;
}
Sets the background color and font color for the email address textbox Add email box
.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 Email session

 

  • Was this article helpful?