1. JobScore Help
  2. Documentation
  3. Careers Site

Common CSS customizations for JobScore careers sites

Use the CSS Theme Editor to update the appearance of your Careers Site.

This guide covers common customizations. Each customization references the variable you'll need to update to make a desired change and some code you can cut-and-paste into the editor to make things easier.

Note: This guide is written for beginners who have little knowledge of Cascading Style Sheets (CSS) or web programming. Professionals can use the element inspector to identify additional and inject changes.

Common Customizations

Page

Header

Areas

Buttons

Form Fields

Upload Custom Assets

Job List Page

Job Description Page

Other

Diagram of Major CSS Elements
  1. Header
  2. Logo
  3. Breadcrumb
  4. Areas
  5. Area Headings
  6. Footer
  7. Credits

Page

Page Background Color

To change the background-color of the page use the .js-body selector. If you cut and paste the example into the editor it will change the background color to dark gray.

.js-body {
  background-color: #D5D5D5;
}

Page Title Fonts and Sizes

To change page appearance titles use the #js-jobseeker .js-titles-container .js-title or #js-jobseeker .js-titles-container .js-subtitle selectors.

These attributes are only used on the Job Description and Share Job Pages. If you would like to change the subtitle font on other pages edit the font "Area Headings" value (instructions below)

If you cut and paste the example below into the editor it will change the page title font to 28 pixels and page subtitle font to 15 pixels.

#js-jobseeker .js-titles-container .js-title {
  font-size: 28px;
}

#js-jobseeker .js-titles-container .js-subtitle {
  font-size: 15px;
}

Header

Header Height

To change the height of the header use the #js-jobseeker .js-header selector. If you cut and paste the example below into the editor it will change the header height to 100 pixels.

#js-jobseeker .js-header {
  height: 100px;
}

Header Spacing (padding)

To change the appearance of header use the #js-jobseeker .js-header selector. If you cut and paste the example below into the editor it will change the header padding to 20 pixels (top/bottom) and 0 pixels (left/right).

#js-jobseeker .js-header {
  padding: 20px 0 20px 0;
}

Header Logo Justification (justify left, center or right)

To change the appearance of header use the #js-jobseeker .js-header selector. If you cut and paste the example below into the editor it will change the header justification to right.

#js-jobseeker .js-header {
  text-align: right;
}

Header Logo

To use a custom image in your header:
1 - Click on Edit Logo link.

2 - Click or drag and drop to add your logo

3 - Once selected and uploaded, just click on Update button.

Replace Logo with Custom Image

To replace your company logo or company name with a custom image you need upload a custom image and then, use the #js-jobseeker .js-header selector. If you cut and paste the example below into the editor it will set the uploaded image as your header background.

#js-jobseeker .js-header {
    background: url(https://url.for.your/image/here.jpg) center center no-repeat;
}

Notice: Don't forget to hide your company logo or name if it is the case. To do it, copy and paste the following code:

#js-jobseeker .js-company-name,
#js-jobseeker .js-company-logo {
    display: none;
}

Areas

Area Background Color

To change the appearance of areas use the #js-jobseeker .js-area-container selector. If you cut and paste the example below into the editor it will change the area background color to light grey.

#js-jobseeker .js-area-container {
  background-color: #F1F1F1;
}

Area Headings

To change the appearance of area headings use the #js-jobseeker .js-area-heading selector. If you cut and paste the example below into the editor it will change the area headings to black, 16 pixels big and uppercase.

#js-jobseeker .js-area-heading {

  color: #111111;
  font-size: 16px;
  text-transform: uppercase;
}

Area Borders

To change the appearance of areas please use the #js-jobseeker .js-area-container selector. If you cut and paste the example below into the editor it will change the area border to 1px width, solid and grey.

#js-jobseeker .js-area-container {
  border-width: 1px;
  border-style: solid;
  border-color: #CCCCCC;
}

Note: Border width should always be in pixels (px). Border color can use Hexadecimal or RGB formats. Border style can be dashed, dotted, double, groove, inset, outset, ridge or solid.

Area Spacing (padding)

To change the appearance of areas use the #js-jobseeker .js-area-container selector. If you cut and paste the example below into the editor it will change the area padding to 20 pixels.

#js-jobseeker .js-area-container {
  padding: 20px 20px 20px 20px;
}

Note: Values for padding are in the order top, right, bottom and left.

Buttons

Apply buttons

To change the appearance of Apply buttons use the #js-jobseeker .js-btn.js-btn-apply selector. If you cut and paste the example below into the editor it will change the Apply button to blue with white and uppercase text.

#js-jobseeker .js-btn.js-btn-apply {
  background-color: #0069D5;
  color: #FFFFFF;
  text-transform: uppercase;
}

Standard buttons

To change the appearance of Standard buttons use the #js-jobseeker .js-btn selector. If you cut and paste the example below into the editor it will change the Standard button to dark grey white black text.

#js-jobseeker .js-btn {
  background-color: #D5D5D5;
  color: #111111;
}

Login buttons

To change the appearance of Login buttons use the #js-jobseeker .js-btn.js-btn-login selector. If you cut and paste the example below into the editor it will change the Login button to green with white and uppercase text.

#js-jobseeker .js-btn.js-btn-login {
  background-color: #38C56A;
  color: #FFFFFF;
  text-transform: uppercase;
}

Form Fields

Field Labels

To change the appearance of field labels use the #js-jobseeker .js-control-label selector. If you cut and paste the example below into the editor it will change field labels to dark grey and will spacing them 8 pixels from fields.

#js-jobseeker .js-control-label {
  margin-bottom: 8px;
  color: #D5D5D5;
}

Text Fields

To change the appearance of text fields use the #js-jobseeker input.js-form-field selector. If you cut and paste the example below into the editor it will make text fields 6 pixels rounded with 10 pixels of inside spacing and border color black.

#js-jobseeker input.js-form-field {
  padding: 10px 10px 10px 10px;
  border-color: #111111;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

Drop Downs

To change the appearance of dropdowns use the #js-jobseeker select.js-form-field selector. If you cut and paste the example below into the editor it will change the dropdown arrow to the left.

#js-jobseeker select.js-form-field {
  background-position: 5px center;
  padding-left: 17px;
}

Check Boxes

To change the appearance of checkboxes use the #js-jobseeker input[type=checkbox] selector. If you cut and paste the example below into the editor it will space checkboxes 10 pixels from their labels.

#js-jobseeker input[type=checkbox] {
  margin-right: 10px;
}

Radio Buttons

To change the appearance of radio buttons use the #js-jobseeker input[type=radio] selector. If you cut and paste the example below into the editor it will space radio buttons 10 pixels from their labels.

#js-jobseeker input[type=radio] {
  margin-right: 10px;
}

Required Asterisk

To change the appearance of required asterisks use the #js-jobseeker .js-required:after, #js-jobseeker .js-required-icon:before selector. If you cut and paste the example below into the editor it will change required asterisks to red.

#js-jobseeker .js-required:after,
#js-jobseeker .js-required-icon:before {
  color: #f00;
}

Upload Custom Assets

Upload Custom Images

To upload custom images, scroll down the advanced theme panel and:
1 - Click or drag and drop to add an asset link.

2 - Once the file is uploaded, you can use the url of the asset in your custom CSS.

 

Upload Custom Fonts

To upload custom images, scroll down the advanced theme panel and:
1 - Click on Click or drag and drop to add an asset link.

 

2 - Browse and select the font files you want to use.

3 - Once the file is uploaded, you can use the url in the @font-face declaration.

@font-face {
  font-family: 'MyCustomFont';
  src: url('https://s3.amazonaws.com/.../.../.../my-custom-font.eot');
  src: url('https://s3.amazonaws.com/.../.../.../my-custom-font.eot?#iefix') format('embedded-opentype'),
       url('https://s3.amazonaws.com/.../.../.../my-custom-font.woff2') format('woff2'),
       url('https://s3.amazonaws.com/.../.../.../my-custom-font.woff') format('woff'),
       url('https://s3.amazonaws.com/.../.../.../my-custom-font.ttf')  format('truetype'),
       url('https://s3.amazonaws.com/.../.../.../my-custom-font.svg#svgFontName') format('svg');
}

4 - And finnaly, use it on CSS. The selector to be used to set your custom font to entire page is #js-jobseeker:

#js-jobseeker {
  font-family: 'MyCustomFont';
}

Notice: For your custom font work properly in all browsers, you should upload it in all these formats: .eot, .woff2, .woff, .ttf and .svg

Job List Page

Group Headings

To change the appearance of job group headings use the #js-jobseeker .js-job-department selector. If you cut and paste the example below into the editor it will change the job group heading to black and uppercase.

#js-jobseeker .js-job-department {
  color: #111111;
  text-transform: uppercase;
}

Job Titles

To change the appearance of job names use the #js-jobseeker .js-job-title a selector. If you cut and paste the example below into the editor it will change the job names to blue and 16 pixels big.

#js-jobseeker .js-job-title a {
  color: #1C5ABB;
  font-size: 16px;
}

Locations

To change the appearance of job location names use the #js-jobseeker .js-job-location selector. If you cut and paste the example below into the editor it will change the job names to uppercase and will align it to the right.

#js-jobseeker .js-job-location {
  text-align: right;
  text-transform: uppercase;
}

Job Description Page

Right Rail Headings

To change the appearance of job description headings use the #js-jobseeker .js-job-description h1 selector. If you cut and paste the example below into the editor it will change the biggest job description heading to 26 pixels big.

#js-jobseeker .js-job-description h1 {
  font-size: 26px;
}

Note: There are six supported heading styles (h1-h6) which can be selected by replacing ‘h1’ in the selector.

Job Description Body Text

To change the appearance of job description body text use the #js-jobseeker .js-job-description p selector. If you cut and paste the example below into the editor it will change the job description body text to 14 pixels big and its line height 18 pixels.

Change or add the desired property in the following selector. The example below makes body text 14 pixels big and its line height 18 pixels big.

#js-jobseeker .js-job-description p {
  font-size: 14px;
  line-height: 18px;
}

Job Description Links

To change the appearance of job description links use the #js-jobseeker .js-job-description a selector. If you cut and paste the example below into the editor it will change the job description links to green.

#js-jobseeker .js-job-description a {
  color: #1CBB88;
}

Other

Hiding Elements on Pages

To hide an element, find the selector and change the display attribute as shown below in the example. If you cut and paste the example below into the editor it will hide page titles.

.#js-jobseeker .js-titles-container {
  display: none;
}

Comments

Simplify your hiring.


GET STARTED FOR FREE