This article explains how you can customize Personio Career pages using CSS.
Tip Cascading Style Sheets, abbreviated as 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 in conjunction with the markup language HTML.
Customize Using CSS
To customize your Personio Career page according your corporate design using CSS, follow these steps:
- Navigate to Settings > Recruiting > Recruiting > Career page.
- Scroll down to Styling, and go to Custom CSS.
The following screenshot shows the Custom CSS input field with sample content:
Classes, Selectors, and CSS Properties
The structure of Personio Career pages is created in the programming language HTML. The visual design of the individual HTML elements is defined in the programming language CSS. CSS code is generally stored in a separate stylesheet, which is linked to the corresponding HTML code by means of the website’s metadata. When designing a Personio Career page, the Custom CSS input field shown above constitutes your stylesheet.
If you wish to customize the design of a specific element of a Personio Career page (such as the category buttons) by using CSS, you need to create a unique link between the stylesheet and the corresponding HTML element. This link is established with so-called 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 – for applying CSS styling to a Personio Career page, you will most commonly use class selectors.
Note For security reasons, it is not possible to customize all HTML elements via 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.
Identifying Selectors
Example
The following video shows how you can determine the class for the category buttons.
To find the selectors where you want to apply your styling to, follow these steps:
- Open the respective Personio Career page (its URL can be found in Settings > Recruiting > Recruiting > Career page).
- Right-click on the page, then select Inspect to open the code view.
- Click on the symbol in the top left of the code view to enable the selection of code elements.
- Then, click on the element you want to style. The element is automatically marked in the window showing the HTML structure, and you can then simply copy the required class.
The category buttons belong to the ".category-btn" class.
Note Overwriting/adding properties and values directly in the code view only modifies the so-called 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.
Entering Properties via the Custom CSS Field
Navigate to Settings > Recruiting > Recruiting > Career page > 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 (here: color) and what value you want to assign to it (here: #ffffff = white).
A CSS command with 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 this styling command has been entered, the category button on the Career page will be displayed in turquoise with white text.
CSS Code Sanitizer
If a modification you would like to make is not permitted, you can still enter it in the Custom CSS input field, but your entry will be deleted after saving and will not be implemented. This is due to the CSS Code Sanitizer, a security feature on the 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 which could cause damage, and immediately removing any such content.
The tool also streamlines the code and groups similar properties together (e.g. padding-left: 10px; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; becomes padding: 5px 10px 10px).
Suggestions for Designing Your Career Pages
Read on for some suggestions on how to design your Career pages. The screenshot below shows the Custom CSS input field with examples of code for each line.
Of course, your Personio Career pages can be customized further by using CSS. Customization options do not include changes to the logic or page structure, though.
Element: Header Background Image
Use CSS styling to remove the gray filter applied to the image stored at Career page > Styling > Header background image by the system.
.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, simply select the respective option under Settings > Recruiting > Recruiting > Career page > Styling > Layout. This function is especially useful if you want to seamlessly 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 sample code, the Career page is given 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 positions.
Element: Headline
The headline, which appears in the center of the header image on a Personio Career page, can be formatted in Headlines. However, if you would like to customize it to a greater extent than is possible using the default edit field, you can use CSS to make further formatting changes, for example (line 1 of the screenshot):
.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 colored light blue (line 2 of the screenshot):
.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. This cannot be deleted, but you can change the icon's color to either hide or emphasize it (line 3 of the screenshot).
.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 modify the design of the buttons on a Career page in the same manner. For example, as shown below, the design of the Search button in the search bar (line 4 of the screenshot):
.career-btn-primary { background-color:#FF0; color:#242424 }- Class for selecting the element: .career-btn-primary
- Properties: color, background color
For buttons, you can additionally define what they should look like when a candidate hovers their cursor over them, for example. This is done by using so-called 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 screenshot):
.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: Positions Box
By default, the individual positions are listed in boxes with a white background. However, you can customize this color (line 6 of the screenshot):
.job-box {background-color: #d5f0f7}- Class for selecting the element: .job-box
- Property: background-color
In addition, you can customize the arrow > that serves as a link to the position (line 7 of the screenshot):
.jb-link {color: #23b6dd} - Class for selecting the element: .jb-link
- Properties: color
Element: Footer
The footer can also be customized 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. The links in the footer can also be customized (line 8 of the screenshot):
.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
You can review the changes you make to the design using the Preview button at any time before publishing the customized page. 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 which can be used as selectors, and all CSS properties which 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, text-align, width, height, text-transform, padding-left, padding-right, padding-top, padding-bottom, margin-left, margin-right, margin-top, margin-bottom, border, border-radius
Learn how to Insert images and videos into Personio Career pages.