Home > Guides > Technical Guide > Understanding the Careers Component > Cascading Style Sheets

Cascading Style Sheets

Need Help on this Topic? Email Support

Cascading Style Sheets

We often are asked if the fonts/sizes/styles can be updated in the careers pages.  The answer is YES!

Below are the styles in the style sheets which can be updated to control the font attributes in the site.  

​

There are three (3) major sections of the careers section that are controlled by the Style Sheet: links, tables and captions.

Links such as ‘Featured Jobs’ or ‘Browse All Jobs’ are controlled by the Style Sheet for features such as: font, color and size. The colors in this example are ‘black’ if the link has not been clicked and ‘gray’ if it has been clicked. If it is desired to have the colors be ‘blue’ and ‘purple’, this is done through the Style Sheet. The actual words that are used to display the links are controlled within Cyber Recruiter. 

Results tables such as the ‘Search Box’ are controlled by the Style Sheet as well as features such as: font, color and size. If the tables in the rest of the website have a different look and feel than the one displayed above, the changes can be made in the Style Sheet to have it reflect this way on the rest of the careers section of the website. The information in each column is pulled from Cyber Recruiter code tables. 

Captions such as ‘Job Type,’ ‘Location,’ and ‘Schedule’ are controlled by Style Sheets for all the same features: font, color, and size. The words that are displayed can be updated through Cyber Recruiter. 

Each style listed is formatting in the same way and will control different attributes. Each section of the coding is important and if anything is missed or misspelled the style won't work.  For example, forgetting a } or ; will prevent the program from reading the next line and it will make the whole page just use what was assigned before the mistaken.

Let's decipher a style.

There are three (3) style sheets used to control the Careers Portal web pages.

1. CRCareersPage.css - Controls the Intro Page, Job Browsing Page, and Job Description Page.
2. CRCareers.css - Controls the pages of the Self Service Module, the Online Application and the eOffer page
3. Onboarding.css - Controls the tasks list of the Self Service module, questionnaire page and supporting pages which appear to approve fillable forms.

There are two (2) style sheets used to control the Agency Portal web pages.

1. CRVP.css - Controls the pages of the Agency Portal used for viewing jobs and submitting applicants. 
2. CRVPGridStyles.css - Controls the grids displayed in the Portal.

CRCareersPage.css (Job Browsing & Descriptions)

The table below is a guide to the default settings of the cascading style sheet for the Careers Portal up to the Online Application. 

Note: The standard style sheet is lacking two commonly used styles (<p> and <li>) because these normally reference back to the corporate style sheet. If the style sheet for the corporate site is very different from what will be used for the careers site style sheet, two additional styles should be added so the job description formatting stays consistent.  The font, size, weight and color should be updated to reflect the correct formatting for the specific site. 

NOTE: If a font does not look like it is being obeyed and you want it to follow the Cyber Recruiter style sheets put !important between the attribute and ;  For example (FONT-FAMILY: arial!important;).  This will make the css controlling our page use this font instead of something else on the corporate site. This WILL NOT work if the font on the corporate style sheet is also marked as important and the style will need to be changed in the corporate style sheet.  For this reason, it is highly recommended that a website template reference css files which are included in the folder structure for the website so if there is a conflict it can be updated in this specific style sheet without affecting the corporate site. 

p
{ 
FONT-FAMILY: arial;
FONT-SIZE: 10pt;
FONT-WEIGHT : normal;
COLOR: black; 
}


li
{ 
FONT-FAMILY: arial;
FONT-SIZE: 10pt;
FONT-WEIGHT : normal;
COLOR: black; 
} 

In addition, styles for hyperlinks can also be added which would allow the careers style sheet to control attributes to the general hyperlinks on the page. 

a:link {
FONT-FAMILY: arial;
FONT-SIZE: 10pt;
FONT-WEIGHT : normal;
TEXT-DECORATION: underline;
COLOR: #FF0000; 
}


a:visited {
FONT-FAMILY: arial;
FONT-SIZE: 10pt;
FONT-WEIGHT : normal;
TEXT-DECORATION: underline;
COLOR: #FF0000}


a:hover {
FONT-FAMILY: arial;
FONT-SIZE: 10pt;
FONT-WEIGHT : normal;
TEXT-DECORATION: none;
COLOR: #FF00FF;
}

CRCareers.css (Online Application and Self Service Module)

The table below is a guide to the default settings of the cascading style sheet for the Self Service Portal and the Careers Portal AFTER starting the Online Application. 

Note: The standard style sheet is lacking two commonly used styles (<p> and <li>) because these normally reference back to the corporate style sheet. If the style sheet for the corporate site is very different from what will be used for the careers site style sheet, two additional styles should be added so the job description formatting stays consistent.  The font, size, weight and color should be updated to reflect the correct formatting for the specific site. 

NOTE: If a font does not look like it is being obeyed and you want it to follow the Cyber Recruiter style sheets put !important between the attribute and ;  For example (FONT-FAMILY: arial!important;).  This will make the css controlling our page use this font instead of something else on the corporate site. This WILL NOT work if the font on the corporate style sheet is also marked as important and the style will need to be changed in the corporate style sheet.  For this reason, it is highly recommended that a website template reference css files which are included in the folder structure for the website so if there is a conflict it can be updated in this specific style sheet without affecting the corporate site. 

p
{ 
FONT-FAMILY: arial;
FONT-SIZE: 10pt;
FONT-WEIGHT : normal;
COLOR: black; 
}


li
{ 
FONT-FAMILY: arial;
FONT-SIZE: 10pt;
FONT-WEIGHT : normal;
COLOR: black; 
}

In addition, styles for hyperlinks can also be added which would allow the careers style sheet to control attributes to the general hyperlinks on the page. 

a:link {
FONT-FAMILY: arial;
FONT-SIZE: 10pt;
FONT-WEIGHT : normal;
TEXT-DECORATION: underline;
COLOR: #FF0000; 
}


a:visited {
FONT-FAMILY: arial;
FONT-SIZE: 10pt;
FONT-WEIGHT : normal;
TEXT-DECORATION: underline;
COLOR: #FF0000

}


a:hover {
FONT-FAMILY: arial;
FONT-SIZE: 10pt;
FONT-WEIGHT : normal;
TEXT-DECORATION: none;
COLOR: #FF00FF;
}

CROnboarding.css (Self Service Module)

​

CRVP.css (Agency Portal)

The table below is a guide to the default settings of the cascading style sheet for the Agency Portal (this is the site that agents can access to submit candidates). 

​

See also