PixyJobs

PixyJobs Custom Widget

Want to show job openings on your website?
It's really easy and if you are signed up as a PixyJobs Affiliate you can also make money from it!
You have two widgets to choose between (both widgets display the same job openings). One is the standard widget and one is a custom widget that you can style as you wish using CSS. Continue reading below to learn how to place the custom widget on your website or click here to learn about the standard widget.

Here is how you get the custom widget up and running
Copy the code below and paste it where you want the widget to appear.

<div id="pixyjobs" class="pixyjobs">
    <h2>Jobs from PixyJobs</h2>
    <script type="text/javascript" 
    src="http://www.pixyjobs.com/affiliates/custom-widget.js?divId=pixyjobs"></script>
</div>

If you are signed up as an affiliate, also pass the aId parameter, as shown below. Replace X with your affiliate ID.

<div id="pixyjobs" class="pixyjobs">
    <h2>Jobs from PixyJobs</h2>
    <script type="text/javascript" 
    src="http://www.pixyjobs.com/affiliates/custom-widget.js?aId=X&divId=pixyjobs"></script>
</div>

By default the widget will display 5 job openings. You can change this by passing the jobs parameter, as shown below. Replace X with the number of jobs you would like to display. Min 3 Max 20.

<div id="pixyjobs" class="pixyjobs">
    <h2>Jobs from PixyJobs</h2>
    <script type="text/javascript" 
    src="http://www.pixyjobs.com/affiliates/custom-widget.js?divId=pixyjobs&jobs=X"></script>
</div>

An example of the output
Here is an example, with dummy values, of what the widget will output. You can use the code below as a reference while creating your CSS for the widget.

<div id="pixyjobs" class="pixyjobs">
    <h2>Jobs from PixyJobs</h2>
    <ul>
        <li><a href="#">Job Opening 1</a><br>By Company A</li>
        <li class="alt"><a href="#">Job Opening 2</a><br>By Company B</li>
        <li><a href="#">Job Opening 3</a><br>By Company C</li>
        <li class="alt"><a href="#">Job Opening 4</a><br>By Company D</li>
        <li><a href="#">Job Opening 5</a><br>By Company E</li>
        <li class="moreJobs"><a href="http://www.pixyjobs.com/">More jobs »</a></li>
    </ul>
</div>

Styling the widget
Below we'll go through how to style the widget. All the CSS in the examples below are taken from what was used to create the example on the top of this page. These are just examples and you can obviously style the widget as you please to fit the design of your website.

The widget uses a div as a container. This div can be styled as shown below.

.pixyjobs {
	width:250px;
	font:10px Verdana;
	color:#333333;
	border:1px solid #CCCCCC;
}

We have used a h2 tag for the header in the examples above. You can replace that with any header tag you wish and style it accordingly. The header in the example above has been styled with the CSS shown below.

.pixyjobs h2 {
	margin:0px;
	padding:5px;
	font:bold 14px Arial;
	color:#333333;
	background-color:#b0b0b0;
}

An unordered list (ul) is appended to the div when the widget is called. This ul can be styled as shown below.

.pixyjobs ul {
	list-style:none;
	margin:0px;
	padding:5px 0px 0px 0px;
}

Every alternate list item (li) has a class named "alt". This can be used to style alternate list items differently. The list items and the alternate list items in the example above have been styled with the CSS shown below.

.pixyjobs li {
	padding:5px;
}
.pixyjobs li.alt {
	background-color:#dfdfdf;
}

The links in the widget can be styled using the CSS shown below.

.pixyjobs a {
	font:bold 12px Arial;
	color:#333333;
}

If you wish to style the links in the alternate list items differently it can be done using the CSS shown below.

.pixyjobs li.alt a {
	color:#222222;
}

The last item in the list contains a "More Jobs" link. This li has a class named "moreJobs" which allows you to style the list item and/or the link in it differently. In the example above, the last list item and the link in it have been styled with the CSS shown below.

.pixyjobs li.moreJobs {
	border-top:1px solid #CCCCCC;
}
.pixyjobs li.moreJobs a {
	font:10px Verdana;
}

The div has both an ID and a class attribute in the examples above. The ID is compulsory for the widget to function but the class is only added to show that it's OK to use a class for styling.

If you need any help just use the contact form to get in touch with us. We'll gladly answer any questions you have.