Customizing the look and feel of the application is usually done in two steps:

1. Customize esup-helpdesk's CSS styles to match your other web sites look & feel. For example, if you installed esup-helpdesk as a portlet, you may want to define other colors and fonts. This way esup-helpdesk will gently fit in your portal (i.e. your portlet container).
2. Create your own images, then replace the original images provided along with the application.

Editing the CSS styles

There are only 3 CSS files and they are located in : /webapp/media/ and deployed into: /deploy/media/

• commons.css
• helpdesk.css
• portlet.css

How can i know which style class I should edit in the CSS ?

Tip : We recommend to make good use of the Web Developer Toolbar (a Mozilla Firefox extension).

Enable the "View Style Information" feature under the "CSS" menu. Then, as you mouse over an element inside the page, the style class associated with it, will be displayed. If you click on a red highlighted element, it'll open the CSS file (in a new tab) right to style class. It's an easy way to find out which style class you need to edit.

"Edit CSS" is the other awesome feature of the Web Developer Toolbar. It will split the window in two panes : the upper one shows the web page, the lower one shows the attached CSS files. This way you can edit any style class you want and see it all happen on the fly. You can even save your changes to a file!

Changing the images

All the images can be found under: /webapp/media/images/ and deployed into: /deploy/media/images/

• Create our own set of images.
• Name each new image file under the name of the original file you want to replace.
• Overwrite the original image files with your own files.

– to be continued –