PeopleForce lets you create a fully branded career site using:

Career Site settings
Custom CSS
Custom HTML in HEAD

Using these tools correctly, you can build modern recruitment websites with custom layouts, videos, filters, branded vacancy pages, while still keeping PeopleForce recruitment functionality.

💡 This article focuses on advanced career site customization using Custom CSS and Custom HTML in the HEAD.

If you haven’t configured your Career site yet, start with the basic setup first.

✨ What you can build

A customized PeopleForce career site can include:

Sticky branded navigation
Hero section with image or video background
Company culture section
Vacancy filters sidebar
Styled vacancy cards
Values and culture cards
Benefits slider or cards
Social media section
Contact or “Connect with us” section
Sticky “Apply now” bar on vacancy pages
Styled application forms

⬜ BEFORE:

✅ AFTER:

🧱 Recommended architecture

Use PeopleForce for functionality

Keep PeopleForce responsible for:

vacancy management
filtering
vacancy detail pages
candidate applications
application form submission

Use custom code for presentation

Use:

Custom CSS → controls how the website looks
Custom HTML in HEAD → adds custom sections, animations, scripts, and extra functionality

🧩 How to use Custom HTML in the HEAD section

1. Fonts and Icons

Add custom fonts to make the career site look branded

2. Analytics

Add tracking and analytics tools (for example, Google Analytics) to track website visitor traffic.

3. Custom Sections

Create additional branded sections that go beyond the default PeopleForce layout.

💡 Examples:

Hero banner
About company section
Company culture/values/benefits section
Video sections
Contact section
Open application section

4. Move native PeopleForce blocks into your layout

Instead of using the default PeopleForce page structure, place native PeopleForce elements inside your custom design.

⬜ BEFORE:

✅ AFTER:

5. Sliders and Interactive Elements

Add interactive components to make the website more engaging and modern.

💡 Examples:

Benefits sliders
Image galleries
Hover effects
Animated counters
Video sections

6. Sticky Apply Bar

Add a floating call-to-action that remains visible while a candidate scrolls through a vacancy page.

7. Mobile Enhancements

Optimize the website for candidates visiting from mobile devices.

💡 Examples:

Mobile navigation menu
Responsive layouts
Mobile-friendly forms
Swipeable sections
Touch-friendly buttons

💡Example HTML: Create a Scrolling Text Banner

A scrolling text banner is a simple way to highlight important information such as hiring campaigns, company benefits, upcoming events, or key employer branding messages.

<section class="tech-marquee">
   <div class="tech-marquee-track">
     <span>NOW HIRING</span>
     <span>SOFTWARE ENGINEERING</span>
     <span>PRODUCT & DESIGN</span>
     <span>DATA & AI</span>
     <span>CLOUD INFRASTRUCTURE</span>
     <span>SECURITY</span>
     <span>HYBRID & REMOTE ROLES</span>

      <!-- Duplicate content for continuous scrolling -->
     <span>NOW HIRING</span>
     <span>SOFTWARE ENGINEERING</span>
     <span>PRODUCT & DESIGN</span>
     <span>DATA & AI</span>
     <span>CLOUD INFRASTRUCTURE</span>
     <span>SECURITY</span>
     <span>HYBRID & REMOTE ROLES</span>
   </div>
 </section>

✅ RESULT:

🎨 How to use the custom CSS section

1. Design System

Define the visual foundation of your career site.

Common elements include:

Brand colors
Typography (fonts, font sizes, font weights)
Button styles
Spacing and padding
Animations and transitions

2. Layout Styling

Control the appearance and structure of the main website sections.

Common elements include:

Navigation menu
About section
Team/Benefits section
Contact section
Footer
Cards
Sidebars

3. Vacancy Styling

Customize the appearance of vacancies:

4. Form Styling

Improve the appearance of application forms:

Common elements include:

Input fields
Dropdown menus
Text areas
Upload buttons
Submit buttons

5. Responsive Rules

Make sure the website works well on all screen sizes and devices.

💡Example CSS: How to define fonts and main colors

:root {
  --primary-color: #2563eb;
  --secondary-color: #0f172a;
  --text-color: #334155;
  --border-radius: 12px;
  --font-family: 'Inter', sans-serif;
}

📐Recommended sections

To create a more cohesive and branded career site, we use the following elements.

Section	What it can include
Navigation	Logo, Open roles, Contact section, Social media links
Hero Section	Headline, Value proposition, CTA button, Background image or video, Scrolling text banner
About Section	Company story, Mission and vision, Images, Videos, Team highlights, Office photos
Vacancies Section	Native PeopleForce results, Vacancy cards, Job titles, Locations, Employment types, Vacancy descriptions
Filters Sidebar	Native PeopleForce filters, Department filters, Location filters, Employment type filters, Seniority filters, Search field
Values and Benefits Section	Cards layout, Icons, Interactive content blocks, Sliders/carousels, Hover animations
Connect Section	Contact form
Footer	Social links, Contact details, Privacy policy, Terms and conditions

🤖 Use AI to generate custom code

You do not necessarily need a developer to build a custom career website. Use AI (ChatGPT or Claude) to help you.

💡Example Prompt:

You are a senior frontend engineer and product designer.

I am customizing a PeopleForce career site using the built-in PeopleForce career site builder/playground.

PeopleForce allows me to configure the career site from the admin settings and provides fields for:

1. A “Custom CSS” field for styling

4. A “Custom HTML in HEAD” field for adding fonts, scripts, custom layout sections, and interactions

PeopleForce renders these native elements into the DOM after page load:

- #results — vacancy listing (do NOT remove or replace)

- #filter-accordion — filter sidebar (do NOT remove or replace)

- .container-md — page wrapper on detail/form pages

- #new_career_application_form — application form

- a[data-cy="career_job_apply_action"] — apply button

My goal: build a premium careers website layered on top of PeopleForce

without replacing any native functionality.

---

## Company context (edit before using)

Company: [YOUR COMPANY NAME]

Industry: [e.g. B2B SaaS / Fintech / DevTools]

Tone: [e.g. technical and direct / warm and ambitious]

Brand colours: [e.g. dark navy #070d1a, cyan #00e5ff, blue #2979ff]

Hero image URL: [paste a direct image URL or leave blank for placeholder]

---

## Sections to generate

1. Navigation — sticky, glassmorphism blur on scroll, logo + links +

CTA button, hamburger on mobile

2. Hero — split layout: large heading left, image/video right;

animated eyebrow tag, 4 stat counters below copy

3. Marquee — single scrolling line of culture keywords between hero

and about, CSS animation only

4. About — editorial layout, stacked images with offset positioning,

company story copy, years-building callout card

5. Culture video — thumbnail with play button overlay; if CFG.videoUrl

is set embed it, otherwise show static thumbnail

6. Teams — 3-column grid of department cards with image, icon, name,

description, open-roles count; hover lift + image zoom

7. Testimonials — centred slider, auto-advances every 5s, dot controls

8. Vacancies — sidebar (filter) + main column (results) layout;

wrap both in a new section#tech-vacancies, then move native

PF elements into it

9. Values — 3-column card grid + a hiring process timeline below it

inside a single dark panel

10. Benefits — tabbed interface: clicking a tab swaps a panel showing

icon, title, description, and a photo

11. Contact — two-column: left has name/email/interest form fields

and submit button; right has a photo with a countdown timer

overlay counting to CFG.countdownTarget

12. Footer — 4 columns: brand/tagline/socials, nav links, company

links, contact info; bottom bar with copyright

Vacancy detail pages only: inject a sticky bottom bar

(initStickyApplyBar()) that appears after 400px scroll, shows the

job title and an "Apply now" link mirroring the native apply button.

---

## Design direction

Dark navy background. Cyan (#00e5ff) and electric blue (#2979ff)

accents. Display font: Syne (Google Fonts). Body font: DM Sans.

Mono font: JetBrains Mono for labels and tags.

ly as accents.

Every section must use a different layout pattern.

No two sections should share the same grid structure or card design.

---

## PeopleForce element styling

Override these with !important where PF styles resist:

- #filter-accordion: dark surface, styled checkboxes, subtle borders

- #results cards: dark surface, hover = cyan left border + lift

- #new_career_application_form: dark inputs, cyan focus ring, styled submit

- a[data-cy="career_job_apply_action"]: gradient button, full width

- .container-md: remove max-width cap, transparent background

---

## Output format

Deliver two clearly separated blocks:

BLOCK 1 — Custom HTML in HEAD

Complete, paste-ready. Includes Google Fonts <link> and the full

BLOCK 2 — Custom CSS

Complete, paste-ready. Comments mark each section.

Ordered: tokens → reset → typography → buttons → nav → hero →

marquee → about → video → teams → testimonials → vacancies →

PF overrides → values → benefits → contact → footer → responsive.

Set up your career site

Use the custom links to the career site

Add contracts with job sites to publish your vacancies

Add custom fields on career site

Create and manage company candidates

How to build a beautiful customized PeopleForce career site

✨ What you can build

🧱 Recommended architecture

Use PeopleForce for functionality

Use custom code for presentation

🧩 How to use Custom HTML in the HEAD section

1. Fonts and Icons

2. Analytics

3. Custom Sections

4. Move native PeopleForce blocks into your layout

5. Sliders and Interactive Elements

6. Sticky Apply Bar

7. Mobile Enhancements

💡Example HTML: Create a Scrolling Text Banner

🎨 How to use the custom CSS section

1. Design System

2. Layout Styling

3. Vacancy Styling

4. Form Styling

5. Responsive Rules

💡Example CSS: How to define fonts and main colors

📐Recommended sections

🤖 Use AI to generate custom code

💡Example Prompt: