Embedded Job Board Style Guide

Have more questions? Submit a request

So you're diving into the world of customizing your embedded job board to match your company's theme? Awesome!

Below is your go-to guide for understanding the CSS classes at your disposal. Let's break it down together.

Job Board

#HumiJobBoard .humi-job-board

This is the big one! It encompasses the entirety of your job board, setting the stage for its appearance.

You can define the border width, color, and rounded corners as well as set the font for your job board.


Don't forget the space

There is a required space between #HumiJobBoard and the class name.



#HumiJobBoard .humi-job-board-content

This is where your job board content resides and you can define the spacing between the content and the border, ensuring a clean layout.




#HumiJobBoard .humi-job-board-category

Each category in your job board has its own special spot. This is where you can define the spacing between different categories which should help keep things organized.



Category Heading

#HumiJobBoard .humi-job-board-category-heading

This class holds the heading section of a job board category. This is where you can determine the space between the category heading and the first job posting.



Category Heading Title

#HumiJobBoard .humi-job-board-category-heading-title

The title of your job board categories finds its home here. This is where you can set the font size for category titles and manage the spacing around them.



Category Header Posting Count

#HumiJobBoard .humi-job-board-category-header-posting-count

Here's where you'll find the job posting count for each category. You can also determine the font size, line height, and spacing above, and set it to uppercase which can give your counts a more polished look.



Job Board Postings

#HumiJobBoard .humi-job-board-postings

This is where you'll find all of the job postings for a given category and you can determine the left indent spacing ensuring each posting stands out just right.



Job Board Posting

#HumiJobBoard .humi-job-board-posting

Individual job postings have their own space too! This is where you can determine the spacing below each job posting, maintaining readability.



Posting Title

#HumiJobBoard .humi-job-board-posting-title

The titles of your individual job postings can be customized here. You can set the font size and spacing around each title, making them easy to read.



Posting Details

#HumiJobBoard .humi-job-board-posting-details

Here's where you'll find all the nitty-gritty details of a job posting including the location, full-time/part-time status, and the posting date. You can define the font size, font-weight (bold), the spacing above, and transform to uppercase.



Posting Link

#HumiJobBoard .humi-job-board-posting-link

This class contains the link to each job posting and this is where you can set the spacing above the link, ensuring it's easily clickable.



So there you have it! With these CSS classes, you're well-equipped to customize your embedded job board to perfection. If you're eager to delve even deeper, feel free to explore more about job board themes and advanced styling options.


  Discover More About Job Boards

Was this article helpful?
3 out of 5 found this helpful