Style Settings Guide - Mobile Responsive ATS Design
Article Appropriate for These User Types: ADMINISTRATOR
The mobile-friendly version of ATS has a few branding customization options available to you to ensure that the look and feel of your jobs portal complements the design of your organization’s corporate website.
Here's a guide that illustrates the design options available to your organization. We encourage you to share this with your company’s marketing team as well.
1 - HEADER IMAGE
With the desktop view, you have a few options for your site's banner:
Our Client Services team can use your corporate website to grab a suitable header image for your ATS portal;
You may send us a header image file (preferably smaller than 50 KB) that matches the width of your ATS site (no narrower than 800px).
We can upload a smaller logo file and then designate a hexadecimal background color for the header that complements or blends with the logo file. In the above example, a logo file with a transparent background was laid on top of a header with a black background color.
For the smartphone view:
Send ExactHire a separate smaller logo file if you are using either of the first two desktop header options mentioned above. The width of this separate file should be no greater than 480px so that it fits the width of mobile devices.
2 - HEADER IMAGE MAP - ExactHire can apply an image map to your desktop header image to link various hotspots to either external or internal pages. For each hotspot, send us the title, URL, and both the top left corner and bottom right corner X and Y coordinates.
3 - SITE BACKGROUND IMAGE & BACKGROUND COLOR - You may select a specific hexadecimal color to serve as a solid background; or, you may send ExactHire a file to use as the background image (we can make the image tiled, repeat, etc.) - as in the green puzzle piece background shown above. Make sure the image is large enough (if not electing to repeat it across screen) to cover the entire background (particularly if a lot of scrolling is necessary with a high volume of jobs posted). NOTE: A background image will not appear on a smartphone/portable device view.
4 - SITE WIDTH - You may indicate your preferred desktop view site width as long as it is at least 800px or wider. Bear in mind that any site header and/or background images provided should take your preferred width into consideration.
5 - PRIMARY COLOR A - You may designate a non-neutral hexadecimal color that reflects your brand’s primary color for areas such as the navigation ribbon, call to action buttons, hyperlinks in the body text and header text.
6 - PRIMARY COLOR B - You may designate a neutral dark hexadecimal color that complements your branding for areas such as job listing specs on the job listings page and background color for boxes around headers.
7 - SECONDARY COLOR C - You may designate a neutral medium hexadecimal color that complements your branding for formatting details such as separators between link breadcrumbs and job description elements; as well as, the hover color for application sections and call to action buttons. HEX color CCCCCC tends to work best for Secondary C in regards to viewing the text on your employment application so we encourage the use of this color as default.
8 - SECONDARY COLOR D - You may designate a neutral light hexadecimal color that complements your branding for formatting details such as the hover color for job listings and the background for call to action boxes. HEX color D5D5D5 tends to work best for Secondary D in regards to viewing the text on your employment application so we encourage the use of this color as default.
9 - FOOTER BACKGROUND, TEXT AND LINK COLORS & SIZES - You may designate a specific hexadecimal color and font size for various attributes in the footer of your site.
10 - PAGE BORDER SIZE & COLOR - If you desire to have a page border around your main content area, then you may decide its width in pixels and color, as well as on which four sides of your content area it appears.
11 - FONT TYPE, SIZE & COLOR - Choose a default font for your main body text. Options include: Times New Roman, Arial, Lucida Sans, Georgia, Tahoma, Verdana and Helvetica Neue. Then, indicate a preferred font size and hexadecimal color.
12 - PRIMARY NAVIGATION LINK CAPITALIZATION - You may choose to have the primary navigation links on the top right appear in all capital letters, if preferred. Just let ExactHire know.
Once you’re ready to share your specific preferences send us a message with details at firstname.lastname@example.org.
Did you find this article helpful?