Job Styles

Documentation for:

Job Board Designer

A Plugin to Design and Customize your WP Job Manager

Requirements

In order for Job Board Designer to work, you will require the following:

Installation: Plugin

To install Job Board Designer, follow the following steps:

  • Download the plugin from the link in the purchase confirmation e-mail
  • From your website’s WordPress Dashboard:
  • Click on  Plugins and then on  Add New
  • Select Upload.
  • Browse and select the downloaded zipped plugin.
  • Hit “Install Now” and the plugin will be uploaded and installed.
  • Once installed, the plugin needs to be Activated.

Alternatively, for more advance users, the plugin can also be uploaded via FTP:

  • Establish a connection to your WordPress install using your FTP program (we recommend Filezilla)\
  • Upload the entire unzipped plugin folder into the “../wp-content/plugins/” folder on your server.
  • Go to Plugins » Installed Plugins and activate Job Board Designer.
Note

When activated, you should see a new menu item in your WordPress Admin section entitled “Job Styles”. If you’re not seeing this menu item, please ensure that the “Redux Framework” plugin has been activated under Appearance > Install Plugins.

Styling your Pages

All Jobs Design Settings

These settings deals with the overall view your job listings page (typically where all the jobs are listed along with the Keyword / Location search form). Each section within the “All Jobs” panel deal with the various elements related to that page – these include:

Search Bar Settings

1search

Customise:

  • the border width and colour
  • background colour
    • alternatively: use a custom image
  • the padding for the main search section
  • the width and height of the input field
  • the border and colour around the input field
  • the background of the input field
  • the font family, font colour, font type (bold/italic)
  • the text alignment and line height
  • the padding inside the input fields

Filter (Meta) Field Area

2meta

Customise:

  • the background for the meta section
    • alternatively: use a custom image
  • the border width and colour
  • the font family, font colour, font type (bold/italic)
  • the text alignment and line height
  • the padding between filter fields

Featured Listing

3featured

Customise:

  • the border width, style and colour
  • the background (separately from normal listings)
    • alternatively: use a custom image
  • the hover colour when mouse is over the listing
  • the font family, font colour, font type (bold/italic)
  • the text alignment and line height
  • the padding between each listings

Normal Listing

4jobs

Customize:

  • the border width, style and colour
  • the background (separately from featured listings)
    • alternatively: use a custom image
  • the hover colour when mouse is over the listing
  • the font family, font colour, font type (bold/italic)
  • the text alignment and line height
  • the padding inside the input fields

Single Job Design Settings

The Single Job page is the one used when viewing a job listing on its own page and usually contains the company logo, listing information, job description and an application method. Possible design settings for this page include:

Job Title and Company Details

The Single Job is perhaps one of the most important pages to style from a user’s experience point of view. If this page is crisp, clear, properly designed, the user would know exactly what job is for offer and would more likely be willing to apply. Job Board Designer can be used to customise:

  • the single listing heading
    • the font family, font colour, font type (bold/italic)
    • the text alignment and line height
  • the company description
    • background colour or a custom image
    • the border and colour around the company box
    • the font family, font colour, font type (bold/italic)
    • the text alignment and line height
    • Note: Job Board Designer does not alter the company logo
    • Padding around the company description

Company Description

Customise:

  • the font family, font colour, font type (bold/italic)
  • the text alignment and line height

Apply for Job

Customize:

  • the border width, style and colour
  • the background colour or a custom image
  • the font family, font colour, font type (bold/italic)
  • the text alignment and line height

Submit Job Design Settings

The Submit Job page is used when users submit jobs through the front end. The design settings for these are mostly based around providing styling options for field input section.

Form Input Fields

  • Labels (Job Title, Location)
    • the font family, font colour, font type (bold/italic)
    • the text alignment and line height
    • padding used around labels
    • bottom border beneath fields set (between Job Title and Location)
  • Input Fields (e.g. “London”)
    • the font family, font colour, font type (bold/italic)
    • the text alignment and line height
    • padding around input text areas
    • customise the width and height of job input fields
    • the border and colour and style around the input fields

Button Labels

Customise:

  • background colour or image on button
  • button colour or image when mouse hovers over
  • the font family, font colour, font type (bold/italic)
  • the text alignment and line height

Demo Content

Note

This is optional. You do not need this for Job Board Designer to work..

You can install our demo settings which will ensure that your form uses the same colors and fonts as on our demo. To install the demo setting, please follow these steps:

  1. With the Job Board Designer plugin activated, go to Job Styles in the main menu in the WordPress backend.
  2. In the Job Styles options panel, go to Import / Export, located at the bottom.
  3. Under the Import / Export option, click on the button that says Import From URL
  4. In the space provided, use the following URL:
    1. Jobfinder – http://jobfinder.tgsdemos.com/wp-admin/admin-ajax.php?action=redux_download_options-redux_demo&secret=00d77949873e97c645e61534ad1dd77d
    2. Jobhaus – http://jobhaus.tgsdemos.com/wp-admin/admin-ajax.php?action=redux_download_options-redux_demo&secret=00d77949873e97c645e61534ad1dd77d