Help & Support Center
Search:  
Contents
:
IndexPrintBookmark

Home > Guides > Technical Guide > xUnderstanding the Careers Component > xCascading Style Sheets

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

Section of the Style What it does
a.ApplyNowStyle:link This is the name which is referenced in the program and tells the page which style to use
{ This bracket starts the coding telling the program what attributes should be applied.
FONT-FAMILY: arial; "FONT-FAMILY:" controls which font used.  "arial;" is an example of a font by any font can be entered.
FONT-SIZE: 10pt; "FONT-SIZE:" controls the size of the font used. "10pt;" it says use "10 point" but 10px or 10em could be used.  Each will change the size of the font.  So, if the frame use 'em' or 'px' this can be changed so the sizes are similar to the master frame.
FONT-WEIGHT : normal; "FONT-WEIGHT:" will either be "normal" or "bold"
COLOR: blue; "COLOR:" specifies the color to use for the font.  This could be a name of a color or a hex number (#ffffff, for example)
TEXT-DECORATION: none; "TEXT-DECORATION:" will be "none" or "underline" typically.
{ This bracket ends the coding telling the program what attributes should be applied so it can go on to the next 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. 

Location  What When Style Listed 
Intro Page Featured Jobs Link  Standard Link a.HotJobsStyle:link 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : normal; 
COLOR: blue; 
TEXT-DECORATION: none; 
}
Intro Page Featured Jobs Link Visited Link a.HotJobsStyle:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : normal; 
COLOR: purple; 
TEXT-DECORATION: none; 
}
Intro Page Featured Jobs Link Hover Over Link a.HotJobsStyle:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : normal; 
COLOR: blue; 
TEXT-DECORATION: underline; 
}
Intro Page Link for Benefits page 
Link for Self Service login
Link for Online Application
Link Viewing All Jobs
Standard Link a.ApplyNowStyle:link 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : normal; 
COLOR: blue; 
TEXT-DECORATION: none; 
}
Intro Page Link for Benefits page 
Link for Self Service login
Link for Online Application
Link Viewing All Jobs
Visited Link a.ApplyNowStyle:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : normal; 
COLOR: purple; 
TEXT-DECORATION: none; 
}
Intro Page Link for Benefits page 
Link for Self Service login
Link for Online Application
Link Viewing All Jobs
Hover Over Link a.ApplyNowStyle:hover 

FONT-WEIGHT : normal; 
FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
COLOR: blue; 
TEXT-DECORATION: underline; 
}
Intro Page Wording for labels above Search options Standard Wording Label.CaptionStyle

FONT-WEIGHT : normal; 
FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Job Browsing / Search Results pages Links for Group Names
Links for Job Titles
Standard Link a.JobLink:link 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: normal; 
COLOR: blue; 
TEXT-DECORATION: none; 
}
Job Browsing / Search Results pages Links for Group Names
Links for Job Titles
Visited Link a.JobLink:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: normal; 
COLOR: purple; 
TEXT-DECORATION: none; 
}
Job Browsing / Search Results pages Links for Group Names
Links for Job Titles
Hover Over Link a.JobLink:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : normal; 
COLOR: blue; 
TEXT-DECORATION: underline; 
}
Job Browsing / Search Results pages
Table View
Column Headers in a table view Standard Link a.ReqSort:link 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Job Browsing / Search Results pages
Table View
Column Headers in a table view Visited Link a.ReqSort:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Job Browsing / Search Results pages
Table View
Column Headers in a table view Hover Over Link a.ReqSort:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : bold; 
COLOR: black; 
TEXT-DECORATION: underline; 
}
Job Browsing / Search Results pages
Table View
Header Row Always TH.HeaderRow 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-ALIGN: left; 
BACKGROUND-COLOR: #d6d6d6; 
BORDER-TOP: 1px solid black; 
BORDER-BOTTOM: 1px solid black; 
}
Job Browsing / Search Results pages
Table View
Odd Numbered Rows Always TD.MainRow 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
TEXT-ALIGN: left; 
BACKGROUND-COLOR: white; 
}
Job Browsing / Search Results pages
Table View
Even Numbered Rows Always TD.AltRow 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
TEXT-ALIGN: left; 
BACKGROUND-COLOR: #f1f1f1; 
}
Job Browsing / Search Results pages
Complete View

AND

Job Description Page
Titles Displayed for Additional Job Information
Note: Should be the same as span.CaptionStyle. 
This font is used in any tables referencing a caption.
Always TD.CaptionStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Job Browsing / Search Results pages
Complete View

AND

Job Description Page
Titles Displayed for Additional Job Information 
Note: Should be the same as TD.CaptionStyle. 
This font is used when captions are not in a table.
Always span.CaptionStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Job Browsing / Search Results pages 
Complete View 

AND 

Job Description Page
Results for Additional Job Information
Text for Description 
Note: Should be the same as span.MainBodyText. 
This font is used in any tables referencing general text. 
Always TD.MainBodyText 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
}
Job Browsing / Search Results pages 
Complete View 

AND 

Job Description Page
Results for Additional Job Information
Text for Description 
Note: Should be the same as TD.MainBodyText. 
This font is used when general tex is not in a table. 
Always span.MainBodyText 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Job Description Page Job Title Always TD.HeaderStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 12pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Job Description Page Job Description Sections (Job Duties, 
Responsibilities, etc.)
Always TD.JDHeaderStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}

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. 

Location  What When Style Listed 
Self Service Login Page "Please Login Below..."    Always span.LoginBelowStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
}
Self Service Login Page "Click here to retrieve your login information" Standard Link a.ForgotLogin:link 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: normal; 
COLOR: blue; 
TEXT-DECORATION: none; 

Self Service Login Page "Click here to retrieve your login information"  Visited Link a.ForgotLogin:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: normal; 
COLOR: purple; 
TEXT-DECORATION: none; 
}  
Self Service Login Page "Click here to retrieve your login information" Hover Over Link a.ForgotLogin:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : normal; 
COLOR: blue; 
TEXT-DECORATION: underline; 
}
 Self Service Module  Any messages about logging in - cannot find the login, duplication, confirmation, etc.     

span.ErrorStyleSpecial

{

    FONT-FAMILY: Helvetica;

    FONT-SIZE: 10pt;

    FONT-WEIGHT: bold;

    COLOR: Red;

}

Self Service Module
Online Application
Top Right of the Page
Applicant's Name
Always span.AppNameStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 14pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
}
Self Service Module Left-Menu Options / Background Color Non-Current Page TR.MMBackGround 

BACKGROUND-COLOR: white; 
}
Self Service Module Left-Menu Options / Background Color Current Page TD.MMCurrent 

BACKGROUND-COLOR: #d6d6d6; 
}
Self Service Module Left-Menu Options Standard Link a.MainMenu:link 

FONT-FAMILY: arial; 
FONT-SIZE: 8pt; 
FONT-WEIGHT:normal; 
COLOR: blue; 
TEXT-DECORATION: none; 
}
Self Service Module Left-Menu Options Visited Link a.MainMenu:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 8pt; 
FONT-WEIGHT: normal; 
COLOR: blue; 
TEXT-DECORATION: none; 
}
Self Service Module Left-Menu Options Hover Over Link a.MainMenu:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 8pt; 
FONT-WEIGHT : normal; 
COLOR: purple; 
TEXT-DECORATION: underline; 
}
Self Service Module
Online Application
Page Name (Personal Information, Education, etc.) Always span.HeaderStyle 

FONT-FAMILY:arial; 
FONT-SIZE: 12pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-DECORATION: underline; 
}
Self Service Module
Online Application
Header Row of the tables on theses pages:
Jobs Applied To
Job Browsing
Education
Previous Employment
Skills
Military History
Security Clearances
References
Always TH.DDBackground 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-ALIGN: left; 
BACKGROUND-COLOR: #d6d6d6; 
BORDER-BOTTOM: 1px solid black; 
BORDER-TOP: 1px solid black; 
}
Self Service Module 
Online Application
Odd Numbered Rows of the tables these pages: 
Jobs Applied To 
Job Browsing 
Education 
Previous Employment 
Skills 
Military History 
Security Clearances 
References
Always TD.MainRow 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
TEXT-ALIGN: left; 
BACKGROUND-COLOR: white; 
}
Self Service Module 
Online Application
Even Numbered Rows of the tables these pages: 
Jobs Applied To 
Job Browsing 
Education 
Previous Employment 
Skills 
Military History 
Security Clearances 
References
Always TD.AltRow 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
TEXT-ALIGN: left; 
BACKGROUND-COLOR: #f1f1f1; 
}
Job History "Withdraw" link Standard Link a.Withdraw:link 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt;
FONT-WEIGHT: normal;
COLOR: darkgreen;
TEXT-DECORATION: none;
}

Job History
"Withdraw" link
Hover Over Link a.Withdraw:hover

FONT-FAMILY: arial; 
FONT-SIZE: 10pt;
FONT-WEIGHT : normal;
COLOR: darkgreen;
TEXT-DECORATION: underline;
}

Job History
"Complete" Link Always a.Complete

FONT-FAMILY: arial; 
FONT-SIZE: 10pt;
FONT-WEIGHT: normal;
COLOR: green;
}
Job History
"Incomplete" Link Always a.Incomplete

FONT-FAMILY: arial; 
FONT-SIZE: 10pt;
FONT-WEIGHT: normal;
COLOR: red;
}
Job Browsing / Search Results pages Links for Job Titles Standard Link a.JobLink:link 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: blue; 
TEXT-DECORATION: none; 
}
Job Browsing / Search Results pages Links for Job Titles Visited Link a.JobLink:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: purple; 
TEXT-DECORATION: none; 
}
Job Browsing / Search Results pages Links for Job Titles Hover Over Link a.JobLink:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT : normal; 
COLOR: blue; 
TEXT-DECORATION: underline; 
}
Job Browsing / Search Results pages
Table View
Column Headers in a table view Standard Link a.ReqSort:link 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Job Browsing / Search Results pages
Table View
Column Headers in a table view Visited Link a.ReqSort:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT : bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Job Browsing / Search Results pages
Table View
Column Headers in a table view Hover Over Link a.ReqSort:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT : bold; 
COLOR: black; 
TEXT-DECORATION: underline; 
}
Search Results pages
Table View
Internal Positions When Job is Internal TD.InternalRow 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
TEXT-ALIGN: left; 
BACKGROUND-COLOR: pink; 
}
Job Description Results for Additional Job Information
Text for Description 
Note: Should be the same as span.MainBodyText. 
This font is used in any tables referencing general text.
Always TD.MainBodyText 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
}
Job Description Results for Additional Job Information
Text for Description 
Note: Should be the same as TD.MainBodyText. 
This font is used when general tex is not in a table.
Always span.MainBodyText 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Self Service Module
Online Application
Controls the text boxes on top of the pages for instructions.
Acts as a default if nothing is in the wyswyg editor of 
Cyber Recruiter.
Always label.MainBodyText 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Self Service Module
Online Application
Add option for a table Standard Link a.Add:link 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
COLOR: blue; 
TEXT-DECORATION: none; 
}
Self Service Module
Online Application
Add option for a table Visited Link a.Add:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
COLOR: blue; 
TEXT-DECORATION: none; 
}
Self Service Module
Online Application
Add option for a table  Hover Over Link a.Add:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
COLOR: blue; 
TEXT-DECORATION: underline; 
}
Self Service Module
Online Application
Edit option for a table entry Standard Link a.Edit:link 

FONT-FAMILY: arial; 
FONT-SIZE: 8pt; 
FONT-WEIGHT: bold; 
COLOR: green; 
TEXT-DECORATION: none; 
}
Self Service Module
Online Application
Edit option for a table entry  Visited Link a.Edit:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 8pt; 
FONT-WEIGHT: bold; 
COLOR: green; 
TEXT-DECORATION: none; 
}
Self Service Module
Online Application
Edit option for a table entry  Hover Over Link a.Edit:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 8pt; 
FONT-WEIGHT: bold; 
COLOR: green; 
TEXT-DECORATION: underline; 
}
Self Service Module
Online Application
Delete option for a table entry Standard Link a.Delete:link 

FONT-FAMILY: arial; 
FONT-SIZE: 8pt; 
FONT-WEIGHT: bold; 
COLOR: red; 
TEXT-DECORATION: none; 
}
Self Service Module
Online Application
Delete option for a table entry Visited Link a.Delete:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 8pt; 
FONT-WEIGHT: bold; 
COLOR: red; 
TEXT-DECORATION: none; 
}
Self Service Module
Online Application
Delete option for a table entry Hover Over Link a.Delete:hover 

FONT-WEIGHT : bold; 
FONT-FAMILY: arial; 
FONT-SIZE: 8pt; 
COLOR: red; 
TEXT-DECORATION: underline; 
}
Self Service Module
Online Application
Form "blanks" and questions for which the answer is NOT required Always label.CaptionStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Self Service Module
Online Application
Form "blanks" and questions for which the answer IS required. Always label.RequiredCaptionStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: bold; 
COLOR: red; 
TEXT-DECORATION: none; 
}
Self Service Module
Text for error / prompting messages when an ‘error’ message needs to appear – i.e. you need to upload a resume please go back. 
Always span.ErrorStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
COLOR: #191a1a; 
}

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)

Location What  Style Listed 
Self Service Module Task Table

.TaskTableStyle

{
FONT-FAMILY: arial;
FONT-SIZE: 9pt;
FONT-WEIGHT: normal;
COLOR: black;
TEXT-ALIGN: left;
BACKGROUND-COLOR: white;
border: 1px solid gray;
}

Self Service Module Task Table Background
.TaskTableBackground
{
FONT-FAMILY: arial;
FONT-SIZE: 9pt;
FONT-WEIGHT: normal;
COLOR: black;
TEXT-ALIGN: left;
BACKGROUND-COLOR: #dcdcdc;
border-right: 1px solid gray;
}
Self Service Module
Last Column of the Task Table .TaskTableBackgroundLastCol
{
FONT-FAMILY: arial;
FONT-SIZE: 9pt;
FONT-WEIGHT: normal;
COLOR: black;
TEXT-ALIGN: left;
BACKGROUND-COLOR: #dcdcdc;
border:none;
}
Self Service Module
Main row of the Task Table TD.TaskMainRow
{
FONT-FAMILY: arial;
FONT-SIZE: 9pt;
FONT-WEIGHT: normal;
COLOR: black;
TEXT-ALIGN: left;
BACKGROUND-COLOR: white;
border-right: 1px solid gray;
}
Self Service Module
Last Column of the Main row of the Task Table TD.TaskMainRowLastCol
{
FONT-FAMILY: arial;
FONT-SIZE: 9pt;
FONT-WEIGHT: normal;
COLOR: black;
TEXT-ALIGN: left;
BACKGROUND-COLOR: white;
border: none;
}
Self Service Module
Alternating row of the Task Table TD.TaskAltRow

FONT-FAMILY: arial;
FONT-SIZE: 9pt;
FONT-WEIGHT: normal;
COLOR: black;
TEXT-ALIGN: left;
BACKGROUND-COLOR: #f1f1f1;
border-right: 1px solid gray;
}
Self Service Module
Last Column of the Alternating row of the Task Table TD.TaskAltRowLastCol

    FONT-FAMILY: arial;
    FONT-SIZE: 9pt;
    FONT-WEIGHT: normal;
    COLOR: black;
    TEXT-ALIGN: left;
    BACKGROUND-COLOR: #f1f1f1;
     border:none;
}
Self Service Module
Background of the Title row of the Task Table

TH.TaskTitleBackground

{
    FONT-FAMILY: arial;
    FONT-SIZE: 9pt;
    FONT-WEIGHT: normal;
    COLOR: black;
    TEXT-ALIGN: left;
    BACKGROUND-COLOR: white;
     border-bottom: 1px solid gray;
}

Self Service Module
On-boarding Questions Table

.OnboardingQuestionsTable, TD.OnboardingQuestionsTable

{
    BACKGROUND-COLOR: white;
}

Self Service Module
Header for the On-boarding Questions OnboardingQuestionsTableHeader
{
    FONT-FAMILY: arial;
    FONT-SIZE: 10pt;
    FONT-WEIGHT: normal;
    COLOR: black;  
    TEXT-ALIGN: left;
    border: 1px solid gray;
    BACKGROUND-COLOR: white;
}
Self Service Module Title for the On-boarding Questions page OnboardingQuestionsTableTitle
{
    FONT-FAMILY: arial;
    FONT-SIZE: 12pt;
    FONT-WEIGHT: bold;
    COLOR: black;  
    TEXT-ALIGN: left;
    border: none;
    BACKGROUND-COLOR: white;
}
Self Service Module
Main row for the On-boarding Questions OnboardingQuestionRow
{
    FONT-FAMILY: arial;
    FONT-SIZE: 9pt;
    FONT-WEIGHT: bold;
    COLOR: black;  
    TEXT-ALIGN: center;
    border: none;
    BACKGROUND-COLOR: white;
}
Self Service Module
Review row for the On-boarding Questions OnboardingQuestionRowR
{
    FONT-FAMILY: arial;
    FONT-SIZE: 9pt !important;
    FONT-WEIGHT: bold;
    COLOR: red;  
    TEXT-ALIGN: center;
    border: none;
    BACKGROUND-COLOR: white;
}
Self Service Module
Review table for Forms Review

OnboardingReviewTable

{

    BACKGROUND-COLOR: white;
    border: 1px solid gray;
    margin-left: 50px;
}

Self Service Module
Title Row for Forms Review OnboardingReviewTableTitle
{
    FONT-FAMILY: arial;
    FONT-SIZE: 12pt;
    FONT-WEIGHT: bold;
    COLOR: black;  
    TEXT-ALIGN: center;
    BACKGROUND-COLOR: white;
     border: none;
     padding-top: 5px;
     padding-bottom: 5px;
     padding-left: 5px;
     padding-right: 5px;
}
Self Service Module
Instructions for Forms Review OnboardingReviewTableInstructions
{
    FONT-FAMILY: arial;
    FONT-SIZE: 10pt;
    FONT-WEIGHT: normal;
    COLOR: black;  
    TEXT-ALIGN: left;
     BACKGROUND-COLOR: white;
}
Self Service Module
Header for the Table on the Forms Review page OnboardingReviewTableHeader
{
    FONT-FAMILY: arial;
    FONT-SIZE: 9pt;
    FONT-WEIGHT: normal;
    COLOR: black;  
    TEXT-ALIGN: left;
    border: 1px solid gray;
     BACKGROUND-COLOR: #dcdcdc;
}
Self Service Module
Main Row for the Table on the Forms Review page TD.OnboardingReviewTableMainRow
{
    FONT-FAMILY: arial;
    FONT-SIZE: 9pt;
    FONT-WEIGHT: normal;
    COLOR: black;  
    TEXT-ALIGN: left;
     border: 1px solid gray  !important;
     BACKGROUND-COLOR: white  !important;
}
Self Service Module
Alternating Row for the Table on the Forms Review page
TD.OnboardingReviewTableAltRow
{
    FONT-FAMILY: arial;
    FONT-SIZE: 9pt;
    FONT-WEIGHT: normal;
    COLOR: black;  
    TEXT-ALIGN: left;
    BACKGROUND-COLOR: #f1f1f1  !important;
     border: 1px solid gray  !important;
}
Self Service Module
Header on the PDF review page

PDFHeader

{
    FONT-FAMILY: arial;
    FONT-SIZE: 12pt;
    FONT-WEIGHT: normal;
    COLOR: black;  
    TEXT-ALIGN: left;
    BACKGROUND-COLOR: white  !important;
}

Self Service Module
Header for the PDF Disclosure form page

PDFDisclosureHeader

{
    FONT-FAMILY: arial;
    FONT-SIZE: 12pt;
    FONT-WEIGHT: bold;
    COLOR: black;  
    TEXT-ALIGN: left;
    BACKGROUND-COLOR: white  !important;
}

Self Service Module
Text for the PDF Disclosure form page

PDFDisclosure

{
    FONT-SIZE: 9pt;
    FONT-WEIGHT: normal;
    padding: 0 27px 17px;
    COLOR: black;  
    font-family: "Helvetica Neue",Arial,sans-serif;
    BACKGROUND-COLOR: white  !important;

 

​

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

​

Location  What When Style Listed 
Agency Portal Login Page "Please Login Below..."    Always span.LoginBelowStyle 

FONT-FAMILY: verdana; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
COLOR: #191a1a; 
}
Agency Portal Login Page "Click here to retrieve your login information" Standard Link a.ForgotLogin:link 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: normal; 
COLOR: blue; 
TEXT-DECORATION: none; 

Agency Portal Login Page "Click here to retrieve your login information"  Visited Link a.ForgotLogin:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: normal; 
COLOR: purple; 
TEXT-DECORATION: none; 
}  
Agency Portal Login Page "Click here to retrieve your login information" Hover Over Link a.ForgotLogin:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : normal; 
COLOR: blue; 
TEXT-DECORATION: underline; 
}
Listing of Applicants Name of the Applicant in the table Standard Link a.PrevApp:link 

FONT-FAMILY: verdana; 
FONT-SIZE: 10pt; 
FONT-WEIGHT:normal; 
COLOR: darkgreen; 
TEXT-DECORATION: none; 
}
Listing of Applicants Name of the Applicant in the table Visited Link a.PrevApp:visited 

FONT-FAMILY: verdana; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: normal; 
COLOR: darkgreen; 
TEXT-DECORATION: none; 
}
Listing of Applicants Name of the Applicant in the table Hover Over Link a.PrevApp:hover 

FONT-FAMILY: verdana; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : normal; 
COLOR: darkgreen; 
TEXT-DECORATION: underline; 
}
Table of Applicants Header Row Always TH.HeaderRow 

FONT-FAMILY: sans-serif; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
BACKGROUND-COLOR: #9BCBE2; 
COLOR: black; 
}
Table of Applicants Header Row Always TD.HeaderRow
{
    FONT-FAMILY: sans-serif;
    FONT-SIZE: 10pt;
    FONT-WEIGHT: bold;
    BACKGROUND-COLOR: #9BCBE2;
    COLOR: black;
    
 }
Table of Jobs or Applicants Odd Numbered Rows of the table
Always TD.MainRow 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
TEXT-ALIGN: left; 
BACKGROUND-COLOR: white; 
}
Table of Jobs or Applicants Even Numbered Rows of the table Always TD.AltRow 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
TEXT-ALIGN: left; 
BACKGROUND-COLOR: #f1f1f1; 
}
Listing of Jobs Links for Job Titles Standard Link a.JobLink:link 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: blue; 
TEXT-DECORATION: none; 
}
Listing of Jobs Links for Job Titles Visited Link a.JobLink:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: purple; 
TEXT-DECORATION: none; 
}
Listing of Jobs Links for Job Titles Hover Over Link a.JobLink:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT : normal; 
COLOR: blue; 
TEXT-DECORATION: underline; 
}
Listing of Jobs Column Headers in a table view Standard Link a.Sort:link 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Listing of Jobs Column Headers in a table view Visited Link a.Sort:visited 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Listing of Jobs Column Headers in a table view Hover Over Link a.Sort:hover 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT : bold; 
COLOR: black; 
TEXT-DECORATION: underline; 
}
Job Description Job Title Always span.HeaderStyle 

FONT-FAMILY:arial; 
FONT-SIZE: 12pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-DECORATION: underline; 
}
Job Description Job Title Always TD.HeaderStyle 

FONT-FAMILY:arial; 
FONT-SIZE: 12pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-DECORATION: underline; 
}
Job Description Job Description Sections (Job Duties, 
Responsibilities, etc.)
Always TD.JDHeaderStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Job Description Results for Additional Job Information
Text for Description 
Note: Should be the same as span.MainBodyText. 
This font is used in any tables referencing general text.
Always TD.MainBodyText 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
}
Job Description Results for Additional Job Information
Text for Description 
Note: Should be the same as TD.MainBodyText. 
This font is used when general tex is not in a table.
Always span.MainBodyText 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: normal; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Submittal Form Form "blanks" and questions for which the answer is NOT required Always label.CaptionStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: bold; 
COLOR: black; 
TEXT-DECORATION: none; 
}
Submittal Form Form "blanks" and questions for which the answer IS required. Always label.RequiredCaptionStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 9pt; 
FONT-WEIGHT: bold; 
COLOR: red; 
TEXT-DECORATION: none; 
}
Submittal Form Used for the message appears after the person has been submitted. Always span.SuccessStyle 

FONT-FAMILY: sans-serif; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
COLOR: green; 
}
Agency Portal
Text for error / prompting messages when an ‘error’ message needs to appear – i.e. you need to upload a resume please go back. 
Always span.ErrorStyle 

FONT-FAMILY: arial; 
FONT-SIZE: 10pt; 
FONT-WEIGHT: bold; 
COLOR: #191a1a; 
}

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. 

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;
}

See also