Common CSS customizations for JobScore careers sites
Updated 7 years ago
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
 |
Header
Logo
Breadcrumb
Areas
Area Headings
Footer
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;
}