Styling the Job Widget with CSS

The different HTML elements that make up the Job Widget are all given specific class names so that they can easily be targeted with CSS selectors. This allows you to define your own custom rules for the styling of those different elements.

By default, the widget will inherit the styles found on your page and will look very similar to this:

In the example below we used custom CSS to style certain elements differently. The job titles are larger, there is a border beneath each position, the location of the job has been moved below the job's title, and the job category is no longer shown.

All of this customization was accomplished with the following <style> tag placed within the code that makes up our page.

<style>
  .cats-job {
    display: inline-block;
    border-bottom: 1px dotted #333;
    padding: 5px 0 0 0;
  }

  .cats-job-category {
    display: none;
  }

  .cats-job-title {
    font-size: 22px;
  }

  .cats-job-location {
    font-size: 12px;
  }
</style>

As another example, the screenshot below shows a widget with the positions arranged as boxes on a grid.

This widget was styled with the following <style> tag.

<style>
    .cats-widget {
      display: grid;
    }

    .cats-column-header {
      display: none;
    }

    .cats-jobs {
      display: grid;
      grid-template-columns: auto auto;
      grid-gap: 1rem;
    }

    .cats-job {
      display: block;
      border: 1px solid #d3d3d3;
      padding: 1rem;
    }
</style>

You just want to make sure to place your custom CSS after the <div id="cats-portal-widget"></div> element, otherwise the widget's generated CSS will override your custom styling.