Personio Career Page: Designing with CSS

 

This article explains how you can customize your Personio career page 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.

 

Customization Using CSS

Navigate to Settings > Recruiting > Career page > Design to customize your Personio career page in line with your corporate identity by using predefined configuration options. For example, you can edit the colors of buttons, fonts and backgrounds or define a font. Click here for further information about configuring your Personio career page.

If you wish to customize the design of your Personio career page further, you can also use CSS. To do so, navigate to Settings > Recruiting > Career page > Design > 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 your Personio career page 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 your 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 your 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 your 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 your 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 screenshot shows by way of example how to 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 > Design > 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 page 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 page 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).

 

Specific Suggestions for Designing Your Career Page

Read on for some suggestions on how to design your career page. The screenshot below shows the Custom CSS input field with examples of code for each line. 

careerpage-css-example_en-us.png

Of course, your Personio career page 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 > Layout 2.0 > 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

 

Element: Background Color

You can use CSS styling to adjust the entire background color of the 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 job openings.

  

Element: Headline

The headline, which appears in the center of the header image on your 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, your Personio career page search bar uses 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 your 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: Job Postings Box

By default, the individual job openings 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 job posting (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

 

Adding Images

The following table shows which codes you can use to insert images and links into either the About Us section or directly into the input fields for job description attributes associated with job postings.

To do this, switch to the code view by clicking on A (more text) and the <> icon in the formatting settings of the text field: 

css-code-view_en-us.png

 

Read on to find sample code you can copy and paste straight into the code view:

Code Description
<a href="URL">Name of the link to your URL</a>

Insert a URL of your choice into the {}href{} (hypertext reference) attribute and name the link as you would like it to appear.

<img src="publicly available URL for your image" alt="description of your image"> Use the src (source) attribute to insert an image that is available from a public URL. The text that is entered as an alt (alternative) attribute will be displayed if the image can't be retrieved.

width="100"

e.g. <img src="publicly available URL for your image" alt="description of your image" width="100">

Choose the size of your logo/image. If you modify the width, the height will be scaled automatically. If you would like to adjust the size based on the height of your logo, use the height attribute. Personio accepts px, em and % as units of measurement. Click here for more information about units for the width and height attributes.

 

To find out how to insert videos into your career page, 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