Can I change the styling options for the embedded job widget?


When you embed the Workable job widget on your website, it will automatically inherit the CSS (i.e. things like font and color choices) you use on your site. There's no need to do any further editing if you want to keep a consistent style on your careers page.

However, if you want to make further changes to the CSS for the job widget we‘ve added some special classes as ‘hooks’ on the HTML elements so that you can use them to apply CSS without affecting the rest of your website styling.

1. List of jobs

The embedded jobs are displayed in an unordered list:

<ul class=”whr-items”>...</ul>

Each job is a list item in this list:

<li class=”whr-item”>...</li>

Each job has 3 parts: An h3 header with its title (and a link to the job opening on your company’s mini-site on Workable), an unordered list with its meta information (code, location, department, creation date) and a div with its full description, if you have chosen to include that (by selecting “Show full descriptions” in the Workable widget).

<h3 class=”whr-title”>...</h3>
<ul class=”whr-info”>
<div class=”whr-description”>...</div>

The .whr-info list has some more special classes of its own:

<ul class=”whr-info”>
<li class=”whr-code”><span>Code:</span> ...</li>
<li class=”whr-dept”><span>Department:</span> ...</li>
<li class=”whr-location”><span>Location:</span> ...</li>
<li class=”whr-date”><span>Creation date:</span> ...</li>

Each .whr-info item uses a label wrapped label in a <span>…</span> so you can style them differently or even hide them with CSS.

If you select to group by location or department, then the .whr-items list described at the beginning of this section will be broken down in separate lists (the groups), each preceded by a group heading, displayed as an h2:



Note that when you select a group by location/department or if you select “list of locations” or list of departments” in the Workable widget, the location or department item respectively is not shown in the section .whr-info since it is already mentioned in the headline above it.

2. List of locations & list of departments

In these two cases, the embedded jobs are grouped and initially hidden. Only the list of locations or departments is shown. For each individual location or department, you get a header like this:

<h2><a href="#">…</a></h2>

It’s just like the one you get when simply grouping the jobs, only this time the headings are links, and when clicked they reveal the corresponding list of items below them, marked up as explained in the previous section. When a heading is clicked and expands the list of jobs that correspond to it, it also gets a .whr-active class so you can style it accordingly.

3. No jobs?

If no jobs are available, a message appears in the following markup:

<p class=”whr-empty-text”>No positions available</p>

Again, this has special hook class so that it can easily be styled.

4. Sample CSS

In the scrolling box below, you can find a simple stylesheet to get you started styling your own job listings:

 body {
  background: #f1fbff;
  font-family: Helvetica, Arial, sans-serif;
  color: #666;
a { color: #196492; }
h1 { color: #124666; }

h2 { color: #196392; }
h3 { color: #6ca329; }
h3 a { color: #6ca329; }
#whr_embed_hook .whr-items, #whr_embed_hook .whr-item, #whr_embed_hook .whr-info { background: none; list-style: none; margin: 0; padding: 0; }
#whr_embed_hook .whr-item { margin-bottom: .5rem; }
#whr_embed_hook .whr-item:last-child { margin-bottom: 0; }
#whr_embed_hook .whr-items { padding: 0 1rem 1rem; }
#whr_embed_hook .whr-group { margin: 0 padding: .2rem .4rem; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #e8f1f5; }
#whr_embed_hook .whr-toggle { margin-top: .5rem; }
#whr_embed_hook .whr-toggle a { display: block; } #whr_embed_hook .whr-toggle:hover { background: #dce5e9; }
#whr_embed_hook .whr-toggle:first-child { margin-top: 0; }
#whr_embed_hook .whr-active { background: #dce5e9; }
#whr_embed_hook .whr-active + .whr-items { background: #e8f1f5; }
#whr_embed_hook .whr-info { }
#whr_embed_hook .whr-info li { background: none; display: inline; margin: 0 .2rem 0 0; padding: .1rem .4rem; border: 1px solid #dce5e9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: .8rem; }
#whr_embed_hook .whr-info li span { color: #959fa4; text-transform: uppercase; font-size: .7rem; }
#whr_embed_hook .whr-title { margin: 0; padding: .5rem 0; }
#whr_embed_hook .whr-description { border: 1px solid #ddd; background: #fff; clear: both; font-size: .9rem; margin: .5rem 0 0 0; padding: .5rem; line-height: 1.4; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#whr_embed_hook .whr-description ul { margin: .5rem 0; }
#whr_embed_hook .whr-description li { margin: .25rem 0; }

If you choose to apply the above style this is how it will look: