Web Recruitment Module Customisation

Transcription

1 Web Recruitment Module Customisation Introduction The People Inc. Web Recruitment add-on enables users to publish details of vacancies on their web site. This information is integrated seamlessly into the client s existing web site using this module and is styled to match the rest of the site. When candidates apply online via this add-on, their details are then recorded automatically within the People Inc. database. This document describes how to make changes to the appearance so that it may match the client s web site. Using an example design, the whole process of changes to the Standard design to will be covered. Design The functionality is normally provided via 4 web pages; Vacancy list page Vacancy detail page Application form Confirmation page The majority of the style for the web pages is defined within the rdwebmodule.css file in the styles folder. This can be edited using Notepad. To adjust parts of the individual aforementioned pages that aren t controlled within the CSS file, you can edit the.aspx files using Notepad. Note: If you are making changes to the live files, it is a good idea to have the web page open and refresh it after every change to see exactly what, if anything, is changing. CSS (Cascading Style Sheet) This document is relatively short and provides the styles for all areas of the web site, except where styles are specified within the.aspx pages themselves. The Standard design is fairly plain and the first thing that you may notice is that the text is right against the edge of the page. As a starting point, this can be resolved with a simple Transparent border around the entire page which will keep the contents of the web page away from the edge. To do this, find the body tags and insert border-style:solid; border-width:15px; border-color:transparent; before the closing

2 The web page will now look like below. Vacancy page - border In order to maintain a theme on the page, it may be a good idea to change the background of the Vacancy items from a pale orange to something more uniform. A background can be given to all rows, alternate rows, or removed altogether. In this example, they will remain alternate but the colour will be changed. Find the vacancyitem and vacancyaltitem tags to determine the background colours of each. To change the colour, produce a hex code for a chosen colour (there are many websites that can produce these e.g. { background-color: #CCE6FF;.vacancyaltitem { background-color: Transparent Overwrite the existing hex code or word with the new code. It is a good idea to also set an alternate items colour to Transparent if there is no background colour or a very faint background colour/image. The page will now look like this:

3 Vacancy page item background At this stage the page is already starting to look themed and tidy. The next thing you may want to do is change the colour of the text, hyperlinks, and background. You can also add headers, images, and informative text to the first paragraph on the Vacancy page. The example will maintain the blue theme and will now be given a fading background, with transparent vacancy items. Find the body tag again and choose 2 particular colours in order to create a fade from one to the other. There are numerous web tools available that will automatically generate code based on a number of colours that are chosen, as well as the direction of the fade e.g. vertical, horizontal, diagonal, circular. Insert the following code into the body tag with your chosen colour codes. The background itself is set to black so that you will be able to see if there are any issues with the code (as it will just appear black). This example is a simple linear (horizontal) fade from pale blue to white (see below). background: #FFF; background-repeat: no-repeat; background-attachment: fixed; background: #7abcff; background: -ms-linear-gradient(top, #7abcff 0%,#ffffff 100%); background: linear-gradient(to bottom, #7abcff 0%,#ffffff 100%); To make sure that the colour covers the entire page, it is vital that the following is added to the very top of the CSS file. html {

4 height: 100%; Vacancy page gradient background If you would prefer a solid background colour, simply remove the 2 linear-gradient lines of code. From here, the next thing might be to change the colour of the heading and hyperlinks, and perhaps start changing some of the text. To change the colour and style of the Heading, make changes to the tag for h2 like below. h2,.h2 { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 16px; color: #000066; font-weight: bold; To change the colour and style of the hyperlinks for Details and Apply, find the following tags. A {color: #000066; text-decoration: none; A:hover, A:active {text-decoration: underline; color: #6699FF input, select, textarea { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #006;

5 Vacancy page font changes The changes that have been applied have copied the text colour from the Vacancy items so that they all match. To manage the style of the table items themselves and text/labels on the other 3 pages you can open their.aspx files in Notepad. The headings and paragraphs can still be managed within CSS according to the tags on each page. ASP.NET (.aspx) Following the same method as the CSS file the design and layout of individual page components can be changed in Notepad too. Important Note: A better tool to use for editing ASP.NET pages is SharePoint Designer 2007, which is a free download from Microsoft. I would recommend installing this so that adjusting tables and adding text and styles is easier. In this example changes will be made to the Candidate Details page (Application) using SharePoint Designer. Initially, the Application page looks very sparse with small fields. Within the Designer you can click and drag or extend the size of the fields to make the page look fuller and provide more on-screen space for information.

6 Application page - layout You can also add additional text into the top line of text so that it is more unique and suited to your needs.