Custom job board styling example (legacy)

Permissions: Basic and above who can manage Job Board related API credentials or can manage all the organization's API Credentials

Product tier: Available to all subscription tiers.

Note: Greenhouse's new job board customization contains built-in styling options that remove the need for custom CSS. Uploading a custom CSS file is only available to organizations still on the legacy job board, and will eventually be removed. Read more about the new job board configuration options here.

Greenhouse Recruiting allows you to upload a custom CSS stylesheet for your hosted or embedded external job board. We allow override-able classes and selectors for most job board elements, like headings, fonts, fields, and buttons.

Sample CSS files

To get you started customizing your careers page, we've provided a few starter CSS files:

  • simple_greenhouse_job_board.css: Basic styling meant for modern job boards. This file also contains some basic instructions if you're new to CSS.
  • serif_font_job_board.css: Similar styles to simple_greenhouse_job_board.css, except with a different font and additional colors.
  • WCAG_2_0_guidelines_job_board.css: A template with simple styles, designed with additional instructions so it's easy to update while staying within accessibility guidelines. 

Download these files using the links above, or the Downloads section on the right side of this article. These files can be uploaded as-is, or updated to fit your organization's standards and branding. Follow the steps below for more information on how to use these files.

Screenshot examples

Simple Greenhouse

A visual example of the simple job board css file

Serif font

A visual example of the serif job board css file

WCAG 2.0 guidelines

A visual example of the WCAG 2.0 job board css file

Using these files

Before you begin, make sure your Greenhouse Recruiting job board is well-positioned to work with this new style. There are two things you should check:

  • Confirm that candidates apply to jobs at a URL like boards.greenhouse.io/companyname instead of something more custom like yourcompany.com/careers. Our sample CSS style is optimized for Greenhouse-hosted job boards and might look a little strange when embedded into a webpage hosted by your company.
  • In Greenhouse Recruiting, navigate to Configure icon > Job Board & Posts > Edit Job Board Settings, and upload a logo that includes your company's full name. Our sample CSS style hides the title of the job board for a cleaner visual experience, but it could make it difficult for candidates to know which jobs they're applying to if your logo only includes an icon.

When that's complete, you can download your .css file in the right panel. 

For ease of customization, we've added two colors near the beginning of the file that you can easily edit to fit your brand. If you know the hex code for the colors, you can use a tool like this to convert it to RGB values.

RGB snippet of CSS file

The first value controls the color of the Apply Now and Submit Application buttons on individual job posts.

Visual display of button styles

The second value controls the hover color on the job board.

Note: We do not recommend removing the .1 value from the lighter color. This adds opacity and makes the hover state less saturated.

Cursor showing hovering styles

Once you have your colors saved in the file, simply upload the CSS file within Greenhouse Recruiting and refresh your job board to view the changes.