Our built-in options provide plenty of ways to customize your Breezy career portal.

But if you’re a designer or developer and want to take things a step further, you can use custom CSS to style the page like the rest of your site.

Note: If you don't have web design experience, just share this page with your design team to get them started.

Admin permission is required to edit Careers Site settings.

How to add custom CSS to your Careers Site:

  1. Click the gear icon ⚙️ in the left sidebar.

  2. Hover over Recruiting Preferences and click Careers Site Settings.

  3. Click Custom CSS/JS in the left sidebar.

  4. Enter your code under Custom CSS.

  5. Click Save Changes.

Note: You can’t add HTML to the Custom CSS field, including a <script> tag.

CSS Samples

Following are some common CSS snippets used in Breezy.

Remove the location map on all positions

.location-container {
display: none;
}

Change the text on the “Apply” button

.position button.apply {
text-indent: -1000px;
}
.position button.apply:before {
content: '<custom text>';
content: '<custom text>';
content: '<custom text>';
text-indent: 0;
}

Change application confirmation text

.landing .confirmation-container .application-confirmed h1 {
overflow: hidden;
text-indent: -10000px;
}

.landing .confirmation-container .application-confirmed h1:after {
content: 'EXAMPLE_TEXT_1';
float: left;
text-indent: 0;
width: 100%;
}

.landing .confirmation-container .application-confirmed p {
overflow: hidden;
text-indent: -10000px;
}

.landing .confirmation-container .application-confirmed p:after {
content: 'EXAMPLE_TEXT_2';
float: left;
text-indent: 0;
width: 100%;
}

Change button color and use a gray hover

Note: Use an RGB color code.

.positions .position .bzyButtonColor {
background-color: rgb(XXX, XXX, XXX) !important;
}
.positions .position:hover .bzyButtonColor {
background-color: #aaa !important;

Change hero H1 to a different size and color

Note: Any valid CSS color code can be used.

.hero .banner h1 {
color: #XXXXXX;
font-size: XXXpx;
padding-top: 0px;
}

Change the font used on the career portal

Note: The specified fonts must be hosted, with the URL of the OTF file included.

@font-face {
font-family: FONT-NAME-HERE;
src: url(http://some url/FONT-NAME.otf);
font-weight: bold;
}

div {
font-family: FONT-NAME-HERE;
}

Change the text on the “Submit Application” button

.apply-buttons .button.green.large{    
text-indent: -1000px;
}
.application-form .apply-buttons .button.green.large:before {
content: '<custom text>';
float: left;
text-indent: 20px;}

Remove Social Sharing Widget

.addthis-smartlayers {
display: none !important;
}

Display Career page video on mobile browsers

@media only screen and (max-width: 900px) {
.body-wrapper .container.video.description .container-wrapper iframe {
display: block;
float: none;
margin: 0;
width: 100%;
}
}

List career page video above the description instead of next to it

.landing .container.video.description .container-wrapper iframe {
float: none;
margin-left: 0;
width: 100%;
height: 505px;
}

Change the Perks icon color

Note: RGB (xx,xx,xx) or HEX (#XXXXXX) color codes can be used, or the color name.

.landing .container.perks .row .item i {
background-color: transparent !important;
color: var(--color-primary) !important;


Did this answer your question?