Skip to main content

Adding Custom CSS

Customise your careers page with your own styling

Shaun Corness avatar
Written by Shaun Corness
Updated over a month ago

Getting Started

Custom CSS allows you to add your own styling rules to further personalise your careers page beyond the standard branding options. This gives you complete control over the appearance.

Accessing Custom CSS

To add custom CSS:

  1. Navigate to Settings > Career Page

  2. Scroll to the Custom CSS section

  3. You'll see a text area for entering CSS code

  4. Enter your CSS rules

  5. Click Save to apply

CSS Editor

The CSS editor provides:

  • A text area for entering code

  • Syntax highlighting (if supported)

  • Ability to add multiple rules

  • Real-time preview (in some cases)

Basic CSS Examples

Changing Font Sizes

h1 {   font-size: 2.5rem; }  .job-title {   font-size: 1.5rem; }

Adjusting Colours

.button {   background-color: #your-color;   color: #your-text-color; }

Spacing Adjustments

.job-listing {   margin-bottom: 2rem;   padding: 1.5rem; }

Best Practices

Keep It Organised

  • Use comments to document your CSS

  • Group related rules together

  • Use consistent formatting

  • Keep it maintainable

Test Thoroughly

  • Preview changes before saving

  • Test on different devices

  • Check different browsers

  • Verify on mobile and desktop

Start Simple

  • Begin with basic changes

  • Add complexity gradually

  • Test each change

  • Keep backups of working code

Common Customisations

Header Styling

.header {   background: linear-gradient(to right, #color1, #color2);   padding: 2rem; }

Button Styling

.apply-button {   border-radius: 5px;   font-weight: bold;   text-transform: uppercase; }

Job Card Styling

.job-card {   box-shadow: 0 2px 4px rgba(0,0,0,0.1);   border-radius: 8px;   transition: transform 0.2s; }  .job-card:hover {   transform: translateY(-2px); }

CSS Limitations

Be aware that:

  • Some styles may be overridden by theme defaults

  • Mobile responsiveness should be maintained

  • Browser compatibility varies

  • Updates to the platform may affect custom CSS

Testing Your CSS

Preview Before Saving

  1. Enter your CSS code

  2. Use preview functionality if available

  3. Check the careers page appearance

  4. Make adjustments as needed

  5. Save when satisfied

Cross-Browser Testing

Test on:

  • Chrome

  • Firefox

  • Safari

  • Edge

  • Mobile browsers

Responsive Testing

Ensure your CSS works on:

  • Desktop (1920px and above)

  • Laptop (1366px - 1919px)

  • Tablet (768px - 1365px)

  • Mobile (320px - 767px)

Troubleshooting

CSS Not Applying

Check:

  • CSS syntax is correct

  • No typos in selectors

  • Specificity isn't too low

  • Styles aren't being overridden

Solutions:

  • Use more specific selectors

  • Add !important if needed (use sparingly)

  • Check browser developer tools

  • Verify CSS is saved

Styles Breaking Layout

If your CSS breaks the page:

  • Remove problematic rules

  • Test one change at a time

  • Use browser dev tools to debug

  • Revert to a working version

Mobile Issues

If styles don't work on mobile:

  • Use media queries for responsive design

  • Test on actual devices

  • Check viewport settings

  • Ensure touch targets are adequate size

Advanced CSS

Media Queries

Make styles responsive:

@media (max-width: 768px) {   .header {     padding: 1rem;   }      .job-card {     margin-bottom: 1rem;   } }

Animations

Add subtle animations:

@keyframes fadeIn {   from { opacity: 0; }   to { opacity: 1; } }  .job-listing {   animation: fadeIn 0.5s; }

Custom Fonts

If you want to use custom fonts:

@import url('https://fonts.googleapis.com/css2?family=YourFont');  body {   font-family: 'YourFont', sans-serif; }

Tips

  • Start Small - Make one change at a time

  • Document Changes - Comment your code

  • Test Regularly - Check after each modification

  • Keep Backups - Save working versions

  • Use Dev Tools - Browser tools are your friend

Getting Help with CSS

If you need assistance:

  1. Check CSS documentation online

  2. Use browser developer tools

  3. Test in isolation

  4. Contact support with specific issues

  5. Consider hiring a developer for complex customisations

Security and Performance

Security

  • CSS is safe to use

  • No JavaScript execution

  • No security risks from CSS alone

Performance

  • Keep CSS minimal

  • Avoid overly complex selectors

  • Don't duplicate existing styles

  • Optimise for fast loading

Removing Custom CSS

To remove custom CSS:

  1. Go to Custom CSS section

  2. Clear all CSS code

  3. Save the empty field

  4. Page will revert to default styling

Need more help? Click on "Need Help?" in your profile dropdown menu or contact our support team for assistance.

Did this answer your question?