How to customize the HTML & CSS of your careers site

With our Custom HTML option, a web developer can set up a complete custom design in JobScore that exactly matches your corporate website look & feel. You can insert custom HTML, javascript, and stylesheets from your website such that your job lists, job detail pages and job application pages all appear seamlessly integrated as part of your company's web site.

Please note: the following is written for developers and designers that are familiar with HTML & CSS.

To create your Custom HTML skinning you will follow these general steps:

• Pick an example page from your site that you wish to use as a template

• Figure out where the careers site content will be inserted inside your template, splitting your HTML <body> into a "header" and "footer" surrounding a JobScore content container.

• Copy/paste required stylesheet and javascript content from your HTML <head> that are required by your header and footer HTML.

• Style the inserted JobScore content by choosing a base theme for the JobScore content and adding custom CSS on top of that theme

• Preview, test, and deploy!

1) Log into your Careers Site administrative console in JobScore

Start by logging into JobScore as an admin user. To customize your careers site you will need to have administrative access to JobScore. If you don’t have admin access to JobScore please ask someone from your Recruiting or HR team to add you as an admin at https://hire.jobscore.com/employer/users/new

When you log in as an admin, an “Admin” tab will appear in the main navigation bar. Click Admin > Careers Site > Careers Site Appearance > EDIT CSS

In the appearance control area, switch the Appearance Option from Self Service to Custom HTML & CSS.

The Custom HTML & CSS control is only available for customers on the JobScore SCALE & Enterprise plans. If it’s not activated in your account, please email [email protected] or click here to upgrade your account.

2) Copy HTML from your company website page source into JobScore

The Custom HTML editor lets you add custom HTML to your careers site pages. The editor lets you insert <body> "header" and "footer" sections that surround the JobScore careers site container (div#js-jobseeker) so you can include your websites' header, footer and sidebar visual elements. For that header and footer you'll also add supporting assets (javascripts and stylesheets) to the document <head> element. You can even customize the appearance of the JobScore content to precisely match your branding.

Code before and after the Jobscore Careers Site content box:

These two fields are bookends. Take a page from your corporate site to use as a template, look at the HTML source, and figure out where you'll be setting the JobScore careers site container (div#js-container) as the main content section of the page. The HTML starting immediately after the <body> tag though to the point of insertion of the careers site container should be inserted into the 'Code before Jobscore HTML' field (the "header"), and the code that would come after the content container through to the closing <body /> tag should be put in the 'Code after Jobscore HTML' field.

Tips:

• The minimum size for the JobScore content container (div#js-jobseeker) size is 640px wide.

• If your <body> tag sets any attributes, after copying your code you may want to include it as well, changing your inner <body> tag to a <div>.

• We suggest removing any content elements that are not relevant to a jobseeker trying to find and apply to your jobs (e.g. promo banners, chat popups, feedback widgets, navigation sidebars...). The simpler the the better.

Code for <head> field:

Include the <style>, <script> and <link> tags from your website's <head> that are required to support your “header” and “footer” HTML you've added above.  This content will be directly inserted into the <head> element of your careers site page HTML immediately after Jobscore's default CSS rules are loaded.

Examples of what this section is used for:

• Set global control over the formatting of your text and links

• Including JavaScript libraries that you use in your corporate sige for e.g. your menu system, a search box, etc.

Examples of what you should not include:

• A Google Analytics tracker. Integrated GA tracking that uses your tracker ID is supported directly by JobScore in the Careers Site Configuration section. JobScore already loads a tracker on your pages, and adding a second tracker in your <head> section will not work.

• Any javascript or CSS not required for your careers site.

• <meta> <title> and other tags from your corporate site <head> section that aren't appropriate for your hosted careers site.

3) Edit paths in your HTML to be served from JobScore servers

Having moved your HTML code into your careers site template, the next step is to fix any display and behavior issues in your imported skin.

You can use the Preview area at the bottom of the editor page to see how the styling looks like in the following apply flow steps: Job List, Job Description, Start Application, Application Form, Thank You. However, to debug JavaScript and inspect HTML and CSS, you’ll likely prefer to open the preview in a separate full window with the “Open in new Window” link.

Usual "fix" steps involve dealing with the following:

Link Paths

Links in your header/footer navigation cannot use relative paths. It’s common that links in your site are not fully qualified and only contain relative paths. These relative links will be broken on your careers site pages served from jobscore.com. For instance, a link to your “about us” page might be a relative URL like “/about_us.html” instead of a fully qualified (but protocol relative) “//www.example.com/about_us.html”. You should update all links to use a fully qualified URL.

Asset loading: Protocols

You should use protocol-relative URLs, e.g. “//example.com/stylesheets/site.css”, not “http://example.com/stylesheets/site.css” in <img>, <script>, <link> and other asset loading tags.

If your website assets are only available over HTTP and not HTTPS, you should try to enable HTTPS access for your assets in your host side - this will ensure that the applicants will see their personal information being submitted over a secure connection. If your assets are served by a CDN, please refer to your provider’s documentation on HTTPS access.

By default JobScore serves the public pages of your careers site (your list of jobs and each job description page) over HTTP. However, we use HTTPS to serve the pages that include forms where job seekers enter their Personally Identifiable Information (resume, phone number, email, address, etc.). For your careers site to work correctly, you must tell JobScore which asset protocols your site supports:

• HTTP & HTTPS: (default & recommended) Works great if you company’s website assets are accessible over both HTTP and HTTPS connections.

• HTTPS only: Use this option if your company website’s assets are only served over HTTPS.

• HTTP only: Use this option if your website’s assets aren’t available over HTTPS. Choosing this option means that all your careers site pages will run over an unsecure connection. This option will also disable the inline careers site preview as you build your skinning - please use the “Open in new window” preview option instead (and don’t forget to hit refresh as you make save changes!).

Asset Loading: Frequently Changing Asset Paths

We recommend not using frequently changing assets in your HTML. For instance, if you rename the logo image on your site or change its location, you will also have to remember to update your JobScore skinning code to reference the new image path.

A note about Content Management Systems: If your corporate website is implemented on top of a CMS, your asset paths may be dynamically generated. Frequently, which means your careers site may frequently need updating.

To prevent maintenance issues like this, we recommend creating a static “reference” page on your website with the header, footer and left/right nav from your site and permalink references to the assets used on that page. In particular, organizations that use content management systems (CMS) that generate dynamic asset paths may want to follow this “reference page” strategy to avoid problems.

JavaScript Errors

The last step is to ensure that your website's scripts are being imported and executed without unhandled errors. Make sure that all JavaScript errors you find are resolved before continuing - unhandled errors can prevent jobseekers from finding and applying to your jobs. Below is a step-by-step todo list of how to find and fix JavaScript errors:

Open up a full-page preview of the Job Posting page. In the full-page preview, open your browser's JavaScript console.

Reload the page - and fix any JavaScript errors on pageload. Known issue: chrome console displays a warning: “event.returnValue is deprecated. Please use the standard event.preventDefault() instead.” You can safely ignore this warning

Test other script functionality in your header/footer/navigation. You may consider removing some of these common items that cause JavaScript errors:

• Search boxes

• Navigation dropdown menus

• Feed widgets

• Ads and Analytics trackers (Google Analytics, NewRelic, DoubleClick, etc.).

• Note - remove your Google Analytics tracker from your "code for <HEAD>" section. Google Analytics tracking should be configured separately in JobScore, in your Careers Site Configuration section.

4) Style your JobScore careers site content

Once you have your careers site pages showing your header, footer and additional navigation elements, and all appears and behaves exactly as it does on your own site, you can now start styling the careers site content to look like the content on your site. This will take some trial and error, but using browser developer tools like Chrome Developer Tools or Webkit Web Inspector can be incredibly helpful to find and manipulate specific page elements.

You will want to do this while previewing each page option in the preview frame at page bottom - different pages in your careers site have different elements, so it’s best to check each page matches your style.

Pick a base Theme

JobScore comes pre-built with a few different starter themes to minimize the amount of customization you have to make. Start out by changing the different starter templates and seeing how things look different in the preview area at the bottom of the page. The four styles are:

• Standard (default): Content is grouped into solid panels that sit on a contrasting page background, with a heading at the top of each section. A good place to start if you want your careers site to read as a set of distinct cards.

• Classic: Our legacy style. Each section is a bordered box with a full-width heading bar across its top, so Classic has more defined boxes and texture if you are looking for that in your careers site.

• Simple: A minimal, flat style. There are no panels or boxes; content sits directly on the page and thin rules separate the sections. Fewer container styles to override, so it is a good base if you plan to write most of your own CSS.

• No Header: The same flat structure as Simple, but without the logo banner JobScore places at the top of every page, and without section headings in the main content area. A good choice when the header HTML you add to your template already shows your logo and navigation, so your logo doesn't appear twice.

Classic:

Simple White:

Simple Black:

Customize the theme: Review & Adjust

In the "JobScore content CSS" editor, you can add CSS rules that refine the theme you've picked. JobScore HTML elements are decorated with various class and id names that use a "js-" prefix.

Start in the Preview bar on the far left with your Jobs List preview, then review & adjust styling working the previews from left to right.

Some elements that you'll want to look at styling:

• Font, font color and font size

• Link font, color, size, mouseover, visited

• Help links

• Lightboxes

• Buttons

Tips and tricks, and troubleshooting

Where's my job pictures?

Job Details rich media (images, videos, maps) are configured elsewhere, on each specific Edit Job Description page, not in the careers site appearance editor.

Some of my job titles look fine, but others are too long for the page.

Job titles longer than 40 characters have a ‘js-apply-title-big’ class added to their <h1> containers. You can make use of this and set alternate font size for larger job titles in your custom CSS section.

My webfonts aren't loading!

If you use a webfont service like Typekit, Fontdeck, or Google Web Fonts, the service may restrict use of your webfonts to specific domains that you configure. To use your Typekit webfonts on your JobScore powered careers site, you'll need to add "*.jobscore.com" to the domains list (Typekit instructions). If you're using Fontdeck, you'll need to add another website ("www.jobscore.com") to your Fontdeck account (Fontdeck instructions). Google Web Fonts does not have any such domain restriction.

If you host your own webfonts and your webfonts don't displaying correctly IE or Firefox, but they do display on Chrome and Safari, you've likely got a CORS configuration problem - you haven't enabled use of your webfonts from the www.jobscore.com site.