QuestionPoint 24/7 Reference Services

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

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

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

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)

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.
    500 OakAccess0000: Access denied

    OakAccess0000: Access denied

    Cannot serve request to /content/support/worldwide/en_us/services/questionpoint/documentation/Custom-Qwidget-Instructions.html on this server


    Apache Sling