How to Customize the Look and Feel of Your Careers Page

Want to make your Careers Page match your company’s brand vibe or clean up a few things visually? Great news: you can! Whether you're adjusting colors, removing elements, or even renaming fields, your Careers Page is totally customizable with some easy CSS.


Step 1: Navigate to the Customization Panel

To get started:

  1. Go to the Main Menu.

  2. Click on Account Details.

  3. Select Customize & Design.

  4. Choose the Look & Feel tab.

Step 2: Add Your Custom CSS

  1. Scroll to the Advanced Customization section.

  2. Locate the Custom CSS container.

  3. Paste your custom CSS code into this box.

  4. Don’t forget to hit Save!

Common Customizations (And How to Do Them)


Want to hide certain elements on your Careers Page? Here's a cheat sheet:

  • Hide the Intro Text box:

    div#custom-html-container { display:none; }

  • Hide job descriptions:

    .job-description { display:none; }

  • Hide job location:

    .job-location { display:none; }

  • Remove the footer:

    .footer { display:none; }

  • Hide the sign-up widget text:

    .get-updates-copy { display:none; }
Pro Tip: You can swap display:none; with visibility:hidden; if you want the element to remain in place but just be invisible.


Step 3: Renaming Applicant Fields (Advanced Styling)


Want to tweak field labels like changing “First Name” to “Legal First Name”? Here's how to do it:

label[id="user.first_name_label"] {
visibility: hidden;
position: relative;
}
label[id="user.first_name_label"]:after {
visibility: visible;
position: absolute;
bottom: 0.5em;
left: 0;
content: 'Legal First Name (required)';
}

label[id="user.last_name_label"] {
visibility: hidden;
position: relative;
}
label[id="user.last_name_label"]:after {
visibility: visible;
position: absolute;
bottom: 0.5em;
left: 0;
content: 'Legal Last Name (required)';
}


The above CSS can make this:

Show as this:


Step 4: Find CSS Selectors for Other Elements

  1. Right-click on any element you want to change.

  2. Select Inspect.

  3. Right-click on the line of code in the Inspector.

  4. Choose Copy selector.

  5. Paste that selector into the Custom CSS container and style away!

Need Help?

If any of this feels overwhelming or if you’re just unsure what to do next, our friendly Support Team is always here for you. Don’t hesitate to reach out; we love helping!