Before applying custom code, make sure to consider other options available in Content first. For example, it may be the case that what you are trying to achieve is already possible via an existing block, or through Adjustments within a block.
This article guides you on adding custom code to your career site. Please note that Teamtailor cannot help with adding or maintaining the custom code you have implemented. Product updates may affect your code, and you are responsible for making adjustments accordingly.
Custom code cannot be applied to all Teamtailor pages, for eg. the Connect page and job applications. If you need extensive custom code, consider hosting your careers page on your website for full design and functionality control via a job list widget or a full career redirect.
When applying custom code to your site, there are three available options:
Custom HTML & CSS block
Global Design: CSS & JavaScript
Custom Wrappers
Let’s explore these in more detail.
Block: Custom HTML & CSS
Custom HTML & CSS blocks can be added to your career site from the Block library on any content page. To add one, click the + symbol in the bottom-left corner and select this block.
With the block, you can use your own HTML & CSS to design it exactly as you want. Note that this block is independent and cannot be used to edit other existing blocks or pages.
A custom domain is required for Custom HTML & CSS blocks to function properly.
Global Design: CSS & JavaScript
In Global Design, you can enable custom styles, allowing you to add your own CSS and JavaScript. This code can modify existing blocks on the career site or enable tracking scripts like Google Analytics. These changes will apply to every page of your career site.
To implement this, navigate to the Global Design section. You can access it via the paintbrush icon in the top-right corner of your main Content page or in the bottom-left corner of any other page. Once there, scroll down to Miscellaneous and toggle on Custom Styles. Once enabled, you'll be asked to provide feedback to our Product team on your planned implementation, helping us further develop our Content feature.
After this is setup, you will have access to two new fields: Custom CSS and Custom JavaScript. Keep in mind that a custom domain is required for any JavaScript to function.
If you plan to modify a specific existing block, it's essential to apply a custom wrapper first. This ensures you have a unique class to target, preventing unintended changes across your careers site.
Once the wrapper is in place, you can inspect the code on your careers site to identify other elements within it. From there, you can use CSS or JavaScript to implement your desired changes.
Custom Wrappers
When applying custom code to your careers site, you can target a specific content block with CSS, by using Custom wrappers.
To work with custom wrappers on the career site, a wrapper class needs to be created first. To do so, head to the block you'd like to target with your code and click Adjustments. Here, make sure the Custom class is toggled on.
After that, you will find a new section in the block called Custom class where you'll be able to name the class with a name of your choice. Underneath it, you'll see what exact custom wrapper to use in the styling code in Global design.
