This article explains how to customize your Personio career page with CSS. When you set up your Personio career page, you need to customize it to match your corporate design. CSS allows you greater customization options.

CSS stands for Cascading Style Sheets. It’s used to create design commands for web pages, mainly with the markup language HTML.

Note that we can’t offer tailored support for CSS code. The information and examples in this article are intended only for guidance.

Before you start

• To customize the Personio career page, you need to have permissions for the Recruiting app and its settings.
• We recommend you have some experience using CSS. Alternatively, ask someone on your IT team to support you.
• Note that you can’t use CSS to change the logic or page structure of your Personio career page.

Access the Custom CSS input field (stylesheet)

To design your Personio career page with CSS, you use a built-in stylesheet. To access it:

1. Go to Settings > Recruiting > Career page.
2. Scroll down to Styling. 
3. Under Custom CSS, you can see an input field. This is your stylesheet.

Customize the design of a specific element

To customize a specific element of your Personio career page (like the category buttons), you need to link it to your CSS code using a selector. Selectors tell the CSS which HTML elements to style. You can use selectors to change the design for multiple elements. You mostly use class selectors when applying CSS to your Personio career page.

You use properties to apply a specific design, such as changing the color or the alignment of a text.
 

Review permitted selectors and properties

For security reasons, you can only customize certain HTML elements. Review the list of permitted elements below.

• Selectors: h1/h2/h3/h4/div, b, strong, i, em, a, ul, ol, li, p, br, span
• Properties: line-height, font, font-size, font-weight, font-style, font-family, color, background, background-color, text-align, text-transform, text-decoration, width, height, padding-left, padding-right, padding-top, padding-bottom, margin-left, margin-right, margin-top, margin-bottom, border, border-radius

If you add code that's not permitted, it won't work. When you save your changes, Personio automatically removes any unsupported code from the Custom CSS input field.

This happens because of a built-in security feature called the CSS code sanitizer. It checks your CSS code, flags anything unexpected or incorrectly formatted, and removes anything that could cause security issues. It also cleans up your code by grouping similar properties together. 

Find selectors

To find selectors, follow these steps:

1. Open your Personio career page. You can find the URL in the Settings via Recruiting > Career page.
2. Right-click on the page, then select Inspect to open the code view.
3. Click the symbol in the top left of the code view to enable the selection of code elements.
4. Click the element you want to style. This automatically highlights the element in the HTML view. You can then copy the required class. For example, the category buttons belong to the ".category-btn" class.

If you make changes directly in the code view, these are temporary and only visible to you. To make permanent changes, use the Custom CSS input field (next step).

Enter properties in the Custom CSS input field

In the Custom CSS input field, enter a full stop followed by the class name. Use curly brackets to define the following: 

• The property of the HTML element you want to change (for example, color) and 
• The value to assign to it (for example, #ffffff = white)

Therefore, a CSS command with a class selector contains the following components by default:

.class-name {property:value; property:value; property:value;}

Example: CSS code for a turquoise category button with white text

.category-btn {color: #ffffff; background-color: #23b6dd}

You can use the Preview button to review your changes.
 

Examples

Element: Header background image

You can use CSS to remove the gray filter applied to the header background image. Find this under Career page > Styling > Header background image.

• Class for calling up the element: .background-image-wrapper
• Property: background-image: none

.background-image-wrapper {background-image: none;}

Element: Background color

You can use CSS to change the background color of a Personio career page to your corporate colors. 

• Class for calling up the element: .body-container, .footer, .background-image-wrapper
• Property: background-color
• Value for the property

In the example code below, the career page has a light blue background. 

.body-container, .footer, .background-image-wrapper
{background-color: #d5f0f7}

Note that you can’t create different background colors for the career page and jobs.

Element: Headline

The headline appears in the center of the header image. You can use CSS to customize it beyond the default edit field.

• Class for selecting the element: .recruiting-phrase
• Properties: color, font size
• Values for the properties

In the example code below, the headline has a light blue background and a font size of 40px.

.recruiting-phrase {color: #d5f0f7; font-size: 40px}

Element: Search bar

By default, the Personio career page's search bar contains gray font on a white background. You can use custom CSS to customize this.

• Class for selecting the element: .search-bar-wrapper
• Property: background-color
• Value for the property: #d5f0f7 – here: light blue

In the example code below, the search bar is light blue.

.search-bar-wrapper {background-color: #d5f0f7}

Element: Search button

You can modify the design of the buttons on your career page. For example, as shown below, the design of the Search button in the search bar.

• Class for selecting the element: .career-btn-primary
• Properties: color, background color

.career-btn-primary { background-color:#FF0; color:#242424 }

Element: Jobs box

By default, the career page displays each job in a box with a white background. You can customize this background color.

• Class for selecting the element: .job-box
• Property: background-color

.job-box {background-color: #d5f0f7}

You can also customize the arrow that links to the job.

• Class for selecting the element: .jb-link
• Properties: color

.jb-link {color: #23b6dd}

Element: Footer

You can customize the career page footer using CSS. You can also customize the links in the footer.

• Class for selecting the element: .footer, .footer a, .footer-links
• Properties: background color, font size, color
• Values for properties

In the example code below, the footer color is set to turquoise. The font size of the default text Powered by Personio is also reduced to 12px. 

.footer {background-color: #23b6dd; font-size: 12px;}
.footer a {color: #d5f0f7}