Customizing the look with CSS

Introduction

There are two different CSS files, that can be used to control the look of the public parts of HelpIM:

1. custom.css
2. custom_frame.css The first one is used at flat pages and on the webchat. The second one is used for the questionnaires. These are loaded in a frame. Currently there is no CSS hook to adapt the lay-out of the admin pages.

custom.css

flat pages and chat Additionally to setting background and foreground colors, adding a logo etc, you probably want to adjust the style of the following clases:

.goog-tab-content This is the square where the messagesPanel, rosterPanel and sendTextarea are placed in.

.messagesPanel The panel in which the typed messages appear.

.rosterPanel (Only visible in the staff chat) The panel with the list of online staff members.

.sendTextarea The textarea to type messages in. Note that changing the height of this area and or changing the height of its content, might cause usability issues when multiple lines of text are typed.

.logoutButton, .requestClientButton and .blockParticipantButton The buttons visible in the chat. The button itself is a divison contained by this division. The button itself has the class .goog-flat-button and on mouse over, the class .goog-flat-button-hover is added

.modal-dialog-bg When a pop up message appears, this layer can be used to make the chat in the background grey.

.modal-dialog-title Title area of a pop-up

.modal-dialog Container area of a pop-up

.modal-dialog-content Content area of a pop-up

.modal-dialog-buttons Button area of a pop-up

##custom_frame.css## questionnaires, displayed in a frame Some elements should have a background that is distinguishable from the document background, to separate the questions from each other. These are: form p, ul, li and label. The label should also stand out a bit from the others of these elements, to distinguish the question from the answer (options), e.g. by making it bold. Finally there is the class .errorlist, these contain error messages when submitting the questionnaire and should stand out even more, e.g. by making it bold and red.