Using Custom CSS on your Careers Site

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.

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;