Customizing your Responsive Layout

Presenting a consistent, polished brand ensures your organization is received in the most attractive light possible to quality candidates.

Customize the Responsive Layout of your JazzHR-hosted Career Page to stay on-brand with a personalized look and feel. Each account in JazzHR receives a JazzHR-hosted career page. Users can choose from the Legacy, Responsive or Custom Layouts.

The Responsive Layout adjusts to each candidate's device and allows you to customize colors, logos and page styles. You can also add tracking pixels, snippets of code which track web page visits, to monitor recruitment campaigns and application conversion (if needed).

To start creating your own responsive design:

  1. Select the Responsive Layout
  2. Edit This Layout
  3. Add Tracking Pixels

Having trouble? Review our FAQs, or let us transform your Career Page for you.

Select the Responsive Layout 

  1. Click Settings. (Note that only Admins and Developers will have access here)
  2.  Click Career Page.
  3. Click on the Responsive Layout block.
  4. Click Save All Changes.

2018-12-16_19.39.17_2.gif

Edit This Layout

  1. Click Settings. (Note that only Admins and Developers will have access here)
  2.  Click Career Page.
  3. On the Responsive Layout block, click Edit This Layout.
  4. From the next page, use the editor to adjust:
    • Background color
    • Link color
    • Career Page title
    • Page titles
    • Career Page logo
    • Career Page messaging
  5. For additional customization, enter your own CSS in the "Responsive Layout Custom CSS" field.
  6. Click Save Layout.

2018-12-16_19.52.25_3.gif

Add Tracking Pixels

First, retrieve each tracking pixel from the 3rd party site. For recruitment campaign tracking, for example, you may need to retrieve this from one of the following:

If you're using this for application conversion, you may need to retrieve this from one of the following:

For all other 3rd party systems, contact your representative there directly. 

Note that regardless of the system, you'll only need the URL portion of the JavaScript tag, as seen below.

Screen_Shot_2018-12-16_at_8.00.55_PM.png

Once you have the URL(s), head into JazzHR to place these pixels on your Responsive Layout. Here's how:

  1. Click Settings. (Note that only Admins and developers will have access here)
  2.  Click Career Page.
  3. On the Responsive Layout block, click Edit This Layout.
  4. Scroll to the bottom of the next page.
  5. In the "Tracking Pixel" section, enter each URL. Separate multiple with semicolons (;).
  6. Click Save Layout

2018-12-16_20.23.28_2.gif

Frequently Asked Questions

My logo on the responsive layout is too small.  Can I adjust the size and placement?

Yes.  Paste the CSS code below into the Responsive Layout CSS area and adjust the values accordingly.

.page-header .brand-logo img {
max-height: 160px;  
vertical-align: middle;  
margin-top: -45px;
margin-left: 20px;

}

Can we use JavaScript on the JazzHR Hosted Pages?

No.  At this time, we do not support the use of JavaScript on any of the hosted page layouts.

Can we use meta tags on the JazzHR Hosted Pages?

No.  At this time, we do not support the use of meta tags on any of the hosted page layouts.

Can we upload custom fonts for use on the JazzHR Hosted Pages?

No.  We do not support uploading custom fonts; however, you can specify ones hosted on third party websites and reference those fonts using CSS.

Do you support the use of Bootstrap for the Custom Layout Hosted Page?

No.  Because we do not allow JavaScript on the hosted pages, Bootstrap is not supported.  To make the Custom Layout responsive, you will need to use CSS only.

Do tracking pixels work on any other JazzHR-hosted Career Pages/integration options besides the Responsive Layout?

The Custom Layout also supports the use of tracking pixels. No other method beyond these two are compatible at this time, though. 

Was this article helpful?
2 out of 6 found this helpful