This article will show you how to change the default appearance of your Career page created in the TRAFFIT Career page generator. We have shared some scripts and styles you can reuse and that are already used by recruiters.
What are scripts and styles and how to use them?
You don't have to use the default appearance of your career page. Add scripts and styles to customize it! To do that, visit Settings --> Career page, go to Settings and paste them to the Style or Script field:
Scripts and styles are simply a piece of code, changing the attributes like fonts, colors, etc.
Here are some examples👇
Style changing the color and the font of the jobs on the list
This style will allow you to change the colors and the fonts of the jobs on the list however you want, to keep your branding and company visual identification coherent.
In this example we are changing the font and the color to blue:
Style:
.traffit-an-list-xtxrxaxfxixtx2x0x1x6x-list-element .info .title {
color: #176bff;
font-family: Arial, Helvetica, sans-serif;
}Script changing the name of OUR WEBSITE button
If you don't like the default "Our website" button name in the right, upper corner of the Career page - you can easily change it using an additional script.
Any examples?
Use the script below to change the name of the button from "Our website" to "GET TO KNOW MORE ABOUT US":
Script:
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('#head-menu .btn-container__button');
if (button) {
button.textContent = 'GET TO KNOW MORE ABOUT US';
}
});Embedding a video on the Career page
If you want to embed a video on your Career page, add a new section called HTML from the list available in the generator:
Next, put the address of your video there. The example below works for videos hosted on YouTube:
HTML:
<iframe
width="560"
height="315"
src="YOUR VIDEO ADDRESS"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
style="display: block; margin: 0 auto"
></iframe>
IMPORTANT!
Don't copy the address you see in the browser for YouTube videos. Use the Share option on YouTube, then choose Embed video and copy the address you see there:
If the video is hosted on your website, use <video> instead of <iframe>
HTML:
<video controls width="250"> <source src="/media/cc0-videos/flower.webm" type="video/webm"> <source src="/media/cc0-videos/flower.mp4" type="video/mp4"> </video>
Style changing the list's width
You can change the width of the tiles on the list - the default value is 100%. You can change it to 50% with the style below:
Style:
#xtxrxaxfxixtx2x0x1x6x-list-div .traffit-an-list-xtxrxaxfxixtx2x0x1x6x-list-element {
width: 50% !important;
}