As stated before on a previous post related with themes customization, it’s not recommended to modify any of JobRoller’s core or CSS files to change the look and feel of your site. This can easily be achieved by using child themes. Child themes allow any user with minimum CSS knowledge to style the look of their theme without touching core files while ensuring maximum compatibility with future JobRoller updates.

The following instructions are for JobRoller 1.6.x, and will help you get started with using child themes for JobRoller. For more detailed and generic instructions on creating child themes for WordPress, please go here.

Creating a Child Theme

1. In the themes folder (/wp-content/themes), create a new folder named ‘jobroller-child’ or a name of your choice.
2. Inside the new child theme folder, create a CSS file named ‘style.css’.
3. Add the following header to the child theme ‘style.css’:

   /* Theme Name: My JobRoller Child Theme Version: 1.6.x Description: A child theme for JobRoller, the premium job listing theme for WordPress. Author: John Doe Author URL: http://www.john-doe.com Template: jobroller */

   The most important line here is “Template: jobroller”. It tells WordPress that JobRoller is the parent for your child theme. After ‘Template:’ you must add the name of the parent theme – in this case ‘jobroller’. The theme name is case-sensitive and should be all lowercase.

4. Add the following line to the child theme ‘style.css’, after the header:

   @import url("../jobroller/style.css");

   This is the path to the JobRoller style sheet. In our example, we are using a relative path. If you’re using another path/name, change it accordingly.

Taking a closer look at the steps, first, you create the child theme folder and a ‘style.css’ with a special header that informs WordPress about the theme parent name.

The child theme ‘style.css’ imports the parent ‘style.css’ to inherit it’s styles.

Next, depending on the JobRoller version you are using (1.6 or 1.6.1) follow the instructions.

JR 1.6.0

1. Additionally create a new folder named ‘styles’ in your child theme folder
2. In the ‘styles’ folder, create a new CSS file named ‘style-new-color.css’ (can be any name starting with ‘style’ [i.e: style-blue, style-black, etc…]).
3. Copy & paste this line to the ‘style-new-color.css’ file:

   @import url("../../jobroller/styles/style-default.css"); /* your custom styles here */

4. Head to your site dashboard and go to ‘Appearance’ > ‘Themes’. Look for your child theme and ‘Activate’ it.
5. Still on your site dashboard and under ‘JobRoller’ > ‘Settings’ > ‘General’ > ‘Color Scheme’ you should now be able to select your new color scheme under the option ‘Custom Theme (style-new-color.css)’. Select it and click ‘Save Changes’.

These additional steps are necessary to inherit and override the current color scheme. For this, we create a new ‘/styles/’ folder where the new color scheme CSS file – ‘style-new-color.css’, will be placed. All the style changes will take place inside the new ‘style-new-color.css’, style sheet. This file imports the base color schemes that we can then override.

The final child theme folder should look like this:

JR 1.6.1

After this version, and to simplify the use of child themes, JobRoller automatically disables the color styles eliminating the need to create an additional color style sheet under the ‘/styles/’ folder.

Instead of theming the site using the ‘style-my-color.css’ style sheet mentioned above, you do all the style changes inside ‘style.css’:

/*
Theme Name: My JobRoller Child Theme
Version: 1.6.x
Description: A child theme for JobRoller, the premium job listing theme for WordPress.
Author: John Doe
Author URL: http://www.john-doe.com
Template: jobroller
*/
@import url("../jobroller/style.css");
@import url("../jobroller/styles/style-default.css");
/* your custom styles here */

The final child theme folder should look like this:

Theme authors can still control when the colors should be automatically disabled in case they want to provide more color schemes. Please continue reading.

Styling the Theme

To make style changes, first you need to identify the CSS classes used through out JobRoller. We suggest using the tools available on current browsers like Chrome or Firefox HTML inspectors. They allow you to inspect any HTML element and see it’s classes and attributes. For example, using Chrome, you can easily identify the job listings job titles CSS class – ‘ol.jobs dd.title’ – by right-clicking any job title and then clicking ‘Inspect Element’.

Here are some snippets to help you get started styling your theme. Paste them inside ‘style-my-color.css’ or ‘style.css’ (depending on the JR version you are using) and hit refresh on your site front page to see the results:

Change Listings Job Titles Font and Size

ol.jobs dd.title {
font-size: 13px;
font-family: arial;
}

Change Featured Jobs Color

ol.jobs li.job-featured {
background-color: #D5E7F2;
}
 
ol.jobs li.job-featured.job-alt {
background-color: #F2FAFF;
}

Change Full-Time Label Color

.type span.full-time {
background-color: #B07545;
border: 2px solid #854C1E;
}

Style New Job Type Label

Assuming you have created a new job type with the slug ‘fulltime’ instead of ‘full-time’

.type span.fulltime {
background-color: #D72F1D;
border: 2px solid #D72F1D;
}

Providing Additional Color Schemes

Although the color styles are automatically ignored when using child themes (1.6.1), theme authors can easily disable this option to provide new color options, by using the filter ‘jr_load_style’.

New color schemes can then be added just by placing the related CSS styles on the child theme ‘/styles’ folder (color styles must be named ‘style*.css’).

1. Create a ‘functions.php’ file under the child theme folder
2. Add this line of code to avoid disabling the color schemes:

   add_filter( 'jr_load_style', '__return_true' );

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.