This article explains how to customize your Personio career page using CSS.
Tip
Cascading Style Sheets (CSS) is a programming language and one of the core languages of the World Wide Web. CSS is used to create design commands for web pages, mainly with the markup language HTML.
Customize your Personio career page using CSS
The structure of your Personio career page is created using HTML. The visual design of the individual HTML elements is defined using CSS. In general, CSS code is stored in a separate stylesheet, which is linked to the corresponding HTML code using the website’s metadata. When designing your Personio career page, the Custom CSS input field constitutes your stylesheet.
The Custom CSS input field
To customize your Personio career page to match your corporate design, follow these steps:
- In the Settings, go to Recruiting > Career page.
- Scroll down to Styling, and go to Custom CSS.
The following image shows the Custom CSS input field with sample content:
Customize the design of a specific element
To customize the design of a specific element of your Personio career page (such as the category buttons) using CSS, you need to create a unique link between the stylesheet and the corresponding HTML element. This link is established with selectors.
You define the HTML elements you want to design by including the relevant selection criteria in your stylesheet. There are various types of selectors—when applying CSS styling to your Personio career page, you will most commonly use class selectors.
Note
For security reasons, it's not possible to customize all HTML elements using the Custom CSS input field. A detailed list of all elements is provided at the end of this article under the heading Permitted links and design options.
Find selectors
To find the relevant selectors, follow these steps:
- Open your Personio career page. You can find the URL in the Settings via Recruiting > Career page.
- Right-click on the page, then select Inspect to open the code view.
- Click the symbol in the top left of the code view to enable the selection of code elements.
- Click the element you want to style. The element is automatically marked in the window showing the HTML structure. You can then copy the required class. For example, the category buttons belong to the ".category-btn" class.
Note
Overwriting or adding properties and values directly in the code view only modifies the front-end. These modifications are not permanent and are only visible to you. To permanently change the back-end, you need to use the Custom CSS input field.
Enter properties via the Custom CSS input field
In the Settings, go to Recruiting > Career page. Scroll down to Styling > Custom CSS to select the appropriate class using the class name preceded by ".". Use curly brackets to state which property of the HTML element you want to change (example: color) and what value to assign to it (example: #ffffff = white).
A CSS command with a class selector therefore comprises the following components by default:
.class-name {property:value; property:value; property:value;}The CSS code for the above-mentioned example would therefore be:
.category-btn {color: #ffffff; background-color: #23b6dd} Once you enter this styling command, the category button on the career page will be displayed in turquoise with white text.
Suggestions for designing your career page
Find suggestions on how to design your career page below. The image below shows the Custom CSS input field with examples of code for each line.
Example code
Your Personio career page can be customized further using CSS. However, customization options don't include changes to the logic or page structure.
Element: Header background image
Use CSS styling to remove the gray filter applied to the image stored at Career page > Styling > Header background image.
.background-image-wrapper {background-image: none;}- Class for calling up the element: .background-image-wrapper
- Property: background-image: none
Tip
To hide your header background image, select the respective option under Career page > Styling > Layout. This function is useful if you want to integrate your Personio career page via iframe into your company career page.
Element: Background color
You can use CSS styling to adjust the entire background color of a Personio career page to your corporate colors. In the example code, the career page has a light blue background:
.body-container, .footer, .background-image-wrapper.container-fluid
{background-color:#d5f0f7}- Class for addressing the element: .body-container, .footer, .background-image-wrapper.container-fluid
- Property: background-color
- Sample value for the property: #d5f0f7 – here: light blue
Note
It is not possible to create different background colors for the career page and jobs.
Element: Headline
The headline, which appears in the center of the header image on a Personio career page, can be formatted in Headlines. If you want to customize it beyond the default edit field, you can use CSS to make further formatting changes, for example (line 1 of the image):
.recruiting-phrase {color: #d5f0f7; font-size: 40px}- Class for selecting the element: .recruiting-phrase
- Properties: color, font size
- Sample value for the property: #d5f0f7 – here: light blue, 40px
Element: Search bar
By default, a Personio career page's search bar is set to a gray font on a white background. You can use custom CSS to customize this element. In the example shown, the upper search bar is light blue (line 2 of the image):
.search-bar-wrapper {background-color:#d5f0f7}
#search-job {background-color: #d5f0f7}- Class for selecting the element: .search-bar-wrapper, #search-job
- Property: background-color
- Sample value for the property: #d5f0f7 – here: light blue
Element: Icons
By default, a gray icon (a small magnifying glass) is displayed in your career page's Enter a job title keyword search bar. You can't delete this, but you can change the icon's color to either hide or emphasize it (line 3 of the image).
.fas.fa-search {color:#fff}- Class for selecting the element: .fas.fa-search
- Property: color
- Sample value for the property: #fff (white)
Element: Search button
You can also 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 (line 4 of the image):
.career-btn-primary { background-color:#FF0; color:#242424 }- Class for selecting the element: .career-btn-primary
- Properties: color, background color
You can further define how buttons should appear when a candidate hovers their cursor over them. This is done by using pseudo-classes to redefine the button properties. Pseudo-classes are identified by a colon, followed by an element such as the word "hover" after the actual class (line 5 of the image):
.career-btn-primary:hover {color:#05eefa; background-color:#708281;
border:2px dotted #d5f0f5}- Class for selecting the element: .career-btn-primary:hover
- Syntax: .class-selector:pseudo-class {property:value;}
- For additional information on pseudo classes, please refer to online CSS tutorials
Element: Jobs box
By default, the individual jobs are listed in boxes with a white background. However, you can customize this color (line 6 of the image):
.job-box {background-color: #d5f0f7}- Class for selecting the element: .job-box
- Property: background-color
You can also customize the arrow > that serves as a link to the job (line 7 of the image):
.jb-link {color: #23b6dd} - Class for selecting the element: .jb-link
- Properties: color
Element: Footer
You can also customize the footer using custom CSS. In this example, the footer color is set to turquoise and the font size of the default text Powered by Personio is reduced. You can also customize the links in the footer (line 8 of the image):
.footer {background-color: #23b6dd; font-size: 12px;}
.footer a {color: #d5f0f7}- Class for selecting the element: .footer, .footer a (Links)
- >Properties: background color, font size, color
- Sample value for the property: #23b6dd – here: turquoise, 12px
Review the changes you make to the design using the Preview button. For example, the CSS changes described above look like this:
Permitted links and design options
The following section contains an overview of all HTML tags that can be used as selectors and all CSS properties that you can modify via the Custom CSS function.
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, text-decoration, padding-left, color, background, background-color, background-image, text-align, width, height, text-transform, padding, padding-right, padding-top, padding-bottom, margin, margin-left, margin-right, margin-top, margin-bottom, border, border-top, border-bottom, border-left, border-right, border-radius
Learn how to Insert images and videos into Personio career pages.
CSS code sanitizer
If you want to make a modification that is not permitted, you can still enter it in the Custom CSS input field. However, your entry is deleted after saving and is not implemented. This is due to the CSS code sanitizer, a security feature on Personio career pages that removes all unsupported HTML and CSS code elements to clean up the code field.
The CSS code sanitizer improves the security of the career pages by checking the input field for malicious data that could cause damage, and immediately removing any such content.
The tool also streamlines the code and groups similar properties together (for example, padding-left: 10px; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; becomes padding: 5px 10px 10px).