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.
Styling options
CSS
If you or someone on your team is familiar with CSS, then you can do further customization to the job widget. If you don't know how to access the CSS files, add the following <style> tags just before the script to get the desired effect.
- Remove the date
<style>
.whr-date {display: none;}
</style>
- Remove the location
<style>
.whr-location {display: none;}
</style>
- Remove the internal job code
<style>
.whr-code {display: none;}
</style>
- Remove the department
<style>
.whr-dept {display: none;}
</style>
- Replace the word ‘Department’ with the word ‘Team’
<style>
.whr-dept span {display: none;}
.whr-dept:before {content: "Team:"}
</style>
Javascript
If you're utilizing jQuery on your site you can enable job links to open in a new tab by adding the following code within the curly brace for "whr(document).ready(function()".
- Open job in a new tab
whr(document).on('click', 'li.whr-item a', function(e)
{ e.preventDefault(); window.open(this.href, '_blank'); });
Ordering the 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”>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<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>
</ul>
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:
<h2>France</h2>
<ul>
<li>…</li>
…
</ul>
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.
Editing the list of locations & the 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.
Displaying a message if no jobs are available
If no jobs are available, a message appears in the following markup:
<p class=”whr-empty-text”>No positions available</p>
Again, this has a special hook class so that it can easily be styled and customized.
Sample CSS styling template
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:
