Careers Page Editor Styles & Layouts

To configure the Styles & Layouts of a Careers Page, begin by signing in to Avionté.

Note: When using the Grouping option, the names must match exactly otherwise the records will be separated; since it is case sensitive. Example: "Acme Tools" and "ACME Tools" would not group together. If the original record is updated (to match the same capitalization) then the records will group together.

Video

Open video in a new window

Styles & Layout

1. Click on the Profile Icon to open the Accounts & Settings menu.
2. Select Utilities.
3. Select Careers Page Editor.
4. Using the Careers Pages menu on the left, locate the Styles & Layouts list and select Add.
5. When prompted, enter the name of the Style and select Create.
6. A table of Overall Styles fields will open.
7. Scroll through the table, selecting configurations by entering text or selecting from the drop-down menus.
8. Select Save Style. The new Style will appear as a Style option for existing Job Boards.

Note: We recommend 300x80 pixels for the logo/image. Please test across devices to ensure it looks as expected.

• To add an existing CSS, paste the Stylesheet URL into the field labeled CSS URLs.
• To create a custom CSS, type or paste the HTML code into the field labeled Custom CSS.

WCAG Accessibility Theme

For organizations requiring WCAG Level A compliance, BOLD offers a dedicated accessibility theme that meets web accessibility standards for talent-facing career pages.

To use the WCAG-compliant theme:

1. Navigate to Utilities Careers Page Editor Styles & Layouts
2. From the Theme dropdown, select "ADA/WCAG - A accessibility"
3. Configure remaining style options as needed
4. Select Save Style

Important: The WCAG A accessibility theme has fixed layouts and styles to maintain compliance. These cannot be customized through the Styles & Layouts editor to ensure the career pages continue meeting accessibility standards.

This theme ensures candidates using screen readers, keyboard navigation, or other assistive technologies can navigate and interact with your job postings effectively. Organizations with government contracts or accessibility requirements can use this theme to meet compliance standards.

Theme Examples

Choose a theme and adjust colors and fonts how you see fit. Below are some Theme examples.

Familiar

Classic

Cards

Fulcrum

Rabbit Ears

None

ADA/WCAG - A accessibility

---

How to Change Your Button Colors

Step 1: Copy the CSS Code

First, copy this entire code block:

/* Target the specific button class */
.apply-submit-button,
button.apply-submit-button {
    background-color: #ad1457 !important;
    color: white !important;
    border-color: #ad1457 !important;
}

.apply-submit-button:hover,
button.apply-submit-button:hover {
    background-color: #880e4f !important;
    border-color: #880e4f !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !important;
}

/* Also override the general button styles */
button {
    background-color: #ad1457 !important;
    color: white !important;
}

button:hover {
    background-color: #880e4f !important;
}

/* Handle the disabled state */
.apply-submit-button.btn-disabled,
button.apply-submit-button.btn-disabled,
.apply-submit-button:disabled,
button.apply-submit-button:disabled {
    background-color: #d81b60 !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

Step 2: Paste into Your Custom CSS Area

Go to your page editor and find the "Custom CSS" section. Paste the entire code block there.

Step 3: Want to Change the Color?

The color code #ad1457 appears in several places in the code. This is your main button color (currently set to pink).

To change it to a different color:

1. Use a color picker tool like Google's Color Picker
2. Or if you know your branded hex code for your color.
3. Choose your color and copy its hex code (it starts with #)
4. In the CSS code, find all instances of #ad1457 and replace them with your new color code

The color codes in the CSS:

• #ad1457 = Your main button color
• #880e4f = Darker shade when you hover over the button
• #d81b60 = Lighter shade for disabled buttons

Step 4: Save Your Changes

After pasting the code (and optionally changing the colors), save your changes in the page editor.

Tips:

• Make sure to replace ALL instances of #ad1457 if you want to change the color
• Keep the # symbol when entering color codes
• Don't delete any of the other code - just change the color values
• The code must be pasted exactly as shown, including all the brackets { } and semicolons ;