Personio Career Page: Designing with CSS

 

This article explains how you can customize Personio career pages using CSS.

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.

 

Customizing Using CSS

Navigate to Settings > Recruiting > Career page > Styling to customize a Personio career page in line with your corporate design by using predefined configuration options. For more information on configuring a Personio career page, you can have a look here.

If you wish to customize the design of a Personio career page further, you can also use CSS. To do so, navigate to Settings > Recruiting > Career page > Styling > Custom CSS. The following screenshot shows the Custom CSS input field with sample content:

careerpage-custom-css_en-us.png

 

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.

Please note that 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

To find the selectors you wish to apply your styling to, first open the respective Personio career page (its URL can be found in Settings > Recruiting > Career page). Right-click on the page, then select "Inspect" to open the code view.

The following video shows how you can determine the class for the category buttons.

careerpage-css-inspect_en-us.gif

Click on the symbol in the top left of the code view to enable the selection of code elements.

Next, 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.

careerpage-css-identifying-selectors-class_en-us.png

Please 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 > 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. 

careerpage-custom-css_en-us.png

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

If you want to hide your header background image, simply select the respective option under Settings > 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

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 in order 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" 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:

careerpage-css-preview_en-us.gif

 

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

To find out how to insert images and videos into Personio career pages, click here.

 

Can't find what you're looking for?

We are happy to help you! Just write us a message with your questions and we will get back to you as soon as possible.

Submit a request

Comments

0 comments

Article is closed for comments.

    Topics of this article