Adding / Editing Background Colours for Job Types in the Prima Child Theme

/in , /by

Sometimes your jobsite / job-board will have more job-types (e.g. full-time, part-time, contract etc.) that is normally shipped with JobRoller. In these instances, one might need to edit/add background colours for these newly created job-types (although the system does have a default display for these new job-types in case you haven’t got the coding know-how). In any event, here’s the guide on how to add your own look & feel for custom job-types…

In the JobRoller Child theme, open up jobroller-child/css/style-pro-child.css and locate line 478, containing this code:

Code:
.type span {
	text-align: center;
	display: block;
	background: url(../../jobroller-child/images/job_type_sprite.png) no-repeat;
	height: 25px;
	width: 115px;
	color: #9a671a !important;
	border: none;
	line-height: 23px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}

You will need to modify the image job_type_sprite.png image by either adding extra colours for your your job types, or create a completely new one from scratch. If you’re going the latter route, upload that file to jobroller-child/images/yourfilename.png. Then remember to reference that new file in the section of code above.

Next you’ll need to create new job types in the CSS files, for example:

Code:
.type span.full-time {
	background-position: 0px -101px;  /* This value will change depending on your background image */
	background-color: transparent;
	border: none;
	color: #fff; /* This value change the colour of your text */
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .7) !important;
}

Remember that if you’ve got a different job types that you’ve created, the “span” above will be followed by that job type name; In other words if you’ve got a per diem category, you will need to create .type span.per-diem with the associated code underneath it.

This code can either be placed in the style-pro-child.css file, or at the very bottom of style.css of the JobRoller child theme. Bear in mind that upon upgrade, all customisations will be lost – so keep a change log handy so you can find your way around when upgrading.