Setting up application pages: Creating bespoke themes

Having set up your application page(s) at a basic level, it definitely worth exploring the additional tools we provide to make them truly bespoke to your brand.

In this article we'll talk you through how to create and edit application page themes.  You can create multiple themes, and each theme can be used on as many different application pages as you wish. 

1. First steps for creating custom themes
2. Working with your application page theme editor
3. The editor fields and appearance options
4. Theme options
5. Editing custom themes

First steps for creating custom themes

1. Access the Application Page settings area of your account as normal, and either click 'edit' on an existing page, or create a new one.

2. The area we will be initially working with inside your application page is in the panel on the right, as shown below.

3. As a side point, you will notice that a new application page will always revert to the 'Default theme' in the first instance. This is the most basic application page theme you can use and as it sounds, is simply the default one we apply to any new page when created. Having created your own custom theme(s) you will be able to select your custom theme from the drop down list whenever you create or edit a page.

3. To create you new theme, type the name you wish to use in the 'Theme name...' field, and then click 'create'.

4. You will be taken into a new area which looks a little different.  In the main page you will see a preview of the application page theme you are working with, while on the left you will see a panel with a lot of different options listed. Don't be intimidated though! We'll walk you through each option from the top down in the next section. 

Working with your application page theme editor

The first thing to mention is that you may notice the URL on your browser tab has changed. 

This is because are now working with a different software tool called 'applr' which is separate from your idibu account. 

However, applr is a product designed and built by us, specifically to facilitate the easy creation and customisation of your application page themes. 

When we set up your idibu account, we created an applr account and linked them together for you. You'll never need to log into this separately, as you will always be able to access this area following the steps outlined above.

To return to the idibu application page settings area, simply click 'Exit' at the top of the left hand panel. However, don't forget to click the 'Save' button to save your work first!

The editor fields and appearance options

These are all listed in the bar on the left, and you can use your mouse to scroll up and down this area, while the preview page remains static.  Working from the top down, we'll talk you through each section.

1. Preview options
2. Page layout
3. Show full description
4. Job title prefix
5. Application for header
6. Apply button
7. Logo image
8. Promo video
9. Video title
10. Company background

Preview options

Below the Exit and Save buttons at the top, you will see a 'Preview options' area. This allows you to change the preview of your page in the main screen between PC, tablet and phone.

Page layout

This provides two different layout options:

1. 'Split' is where promotional videos, role description, company background and your company logo are displayed in a separate panel on the right.

2. 'Single' is an alternative option that brings these areas to the top of the page (with the 'Upload CV' and application questions below). It's a look you might want to consider if you want to ensure the candidate reviews the vacancy details again before applying, and if you are not using a promotional video.

Show full description

By default this option is switched off, so we show some of the description above your company info and/or logo. (The candidate can still click 'read more' to see the full description). Click the button so it turns blue in order to display the full description at all times.

The next three options allow you to change the text within specific areas of the application page:

Job title prefix

In this text field you can change the text that appears at the very top of the page before your advert title:

Application for header 

Any text you input or amend here will appear above the application area:

Apply button

Text inserted into this field appears on the apply button at the bottom of your application page.

Logo image

Click the pencil icon to upload your logo file.

Promo video

Copy and paste the URL of your youtube or vimeo video into this field.

Video title

As an additional option, you can add in a title for your video here which will be displayed on the application page.

Company background

Use this field to write a short and permanent company description for either your business, or your client (depending on the intended use of this theme). This text will be in addition to any information posted inside the body of your advert, which in turn will display inside the 'Role description' area.

Theme options

This area is where you can really start to customise the look and feel of your application page. You can change the colours of the buttons, text and backgrounds. This means you can adapt the application page to dovetail with your own branding, or that of your client.

1. Seek apply
2. Header and page colours
3. HTML and CSS tools
4. Google tracking ID
5. Custom Javascript
6. Saving your changes

Seek apply

If you are working with Seek you can activate an option for your candidate to use 'Apply with Seek' to upload their CV and populate some of the core fields. You can also add your Seek Advertiser ID.

Header and page colours 

In this section you can input the colour codes to update and change the colours for different areas of the application pages. Even if you have never worked with colour codes before, as long as you know the codes themselves this very easy - and actually fun to play around with! If you are unsure of the colour codes for your branding, speak to the person who handles your marketing. 

If your branding was done some time ago, and you don't have ready access or contact with anyone involved then you can use a browser extension like ColorZilla to take colour samples from your website which will give you the colour code.  This is also a quick and easy way to demonstrate a mock up page theme for a prospect client.

Here is an example using the default application page colours...

...and here is an example using our own idibu branding:

HTML and CSS tools

If you are a little bit more advanced in your knowledge, you can use our advanced HTML tools, or even add in your own Custom CSS code:

Google Tracking ID

If you are working with Google Analytics, you can insert your Google Tracking ID here.

Custom JavaScript

Last but by no means least, if you are using data gathering tools for traffic analysis or candidate experience understanding, or to interact with candidates using third party systems - you may input the provided JS code here.

Saving your changes

Be sure to save your changes before exiting back into the idibu system.

Editing custom themes

You can access and edit your custom themes at any time. 

1. Open a application page that uses the theme you wish to edit.

2. Click 'edit this theme' and the applr editor page will open.