1. LightHub
  2. Source
  3. Candidate Experience Portals

Candidate Experience Portals - Self-Branding (Advanced)

Avatar
Jason

In this Article

This is an advanced article for web developers to customize the Candidate Experience Portal.

Customization

A company can customize HTML style elements by overriding the CSS used to render the site. There are 2 options for applying these styles to the BrightMove careers site.

Link to Local CSS

Save the modified CSS on your company website, then reference the CSS from the portal code you upload into BrightMove.

<link rel="StyleSheet" href="http://www.yourcompanysite.com/brightmove_style.css" type="text/css" media="screen">

Embedded CSS

If you just want to override a handful of styles, you can use the embedded style sheet solution in the HTML you upload to BrightMove. Just add this in the <head> tag of your HTML.

In this example the CSS style is for the highlight color when mousing over a job on the portal. The color has been changed to  "#f27789 color hex" or a rose color.

Here is an example of what is inserted to accomplish this change.

<style type="text/css" media="screen">
tr.BMHeader {
    font-weight: bold;
    color: #DDDDDD;
    background-color: #FFFFFF;
    text-indent: 10pt
}
 
tr.BMTitle {
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF
}
</STYLE>

The original css style information is found in the below default CSS file.

Default Look and Feel (CSS)

BrightMove offers a clean and crisp standard career site look and feel. Here is the default CSS:

div.BMRequired {
    color: red;
}
 
table {
    font-family: Verdana;
    font-size: 11px
}
 
table.BMPortalLogin {
    font-size: 10px;
    color: #000000;
    font-size: 11px
}
 
table.BMBorder {
    background-color: #000000;
    font-size: 11px
}
 
table.BMTitle {
    font-weight: bold;
    background-color: #F5FAFD;
    color: #182E51;
    border: 1px solid #000000;
    font-size: 11px
}
 
table.BMContent {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    font-size: 11px
}
 
table.BMJobDescription {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    font-size: 11px
}
 
table.BMForm {
    background-color: #F7FCDE;
    border: 1px solid #000000;
    font-size: 11px
}
 
table.BMDataGrid {
    font-family: Verdana;
    background-color: #ffff;
    border: 0px solid #fffff;
    font-size: 11px
}
 
table.BMPageResults {
    background-color: #C4E996;
    border: 1px solid #000000;
    font-size: 11px
}
 
table.Timecard {
    font-family: "Tahoma";
    background-color: #F5FAFD;
    border: 1px solid #000000
}
 
table.Timesheet {
    font-family: "Tahoma";
    background-color: LightYellow;
    border: 1px solid #000000
}
 
table.Timeentry {
    font-family: "Tahoma";
    background-color: #cccccc;
    border: 1px solid #000000
}
 
tr.BMHeader {
    font-weight: bold;
    color: #000000;
    background-color: CCCCCC;
    text-indent: 5pt
}
 
tr.BMTitle {
    font-weight: bold;
    color: #182E51;
    background-color: #E5EFAF
}
 
tr.BMNoDataFound {
    background-color: #FFFFFF;
    font-style: italic
}
 
tr.BMData {
    background-color: #F7FCDE
}
 
tr.BMBullet {
    background-color: #FFFFFF;
    font-size: 8px;
}
 
tr.BMHighlight {
    background-color: #B5EFAF
}
 
tr.BMLoginLine {
    font-size: 12px
}
 
tr.TimeHeader {
    font-weight: bold;
    background-color: #ffffff;
    text-align: center
}
 
tr.Timeentry {
    background-color: #ffffff
}
 
td.Header {
    font-weight: bold;
    color: #000000;
    background-color: #CCCCCC
}
 
td.SortedHeader {
    font-weight: bold;
    color: #142E50;
    background-color: #E6E6E6
}
 
td.BMError {
    font-weight: bold;
    color: #FF0000
}
 
td.BMNoDataFound {
    font-weight: bold;
    color: #FF0000
}
 
td.BMTitle {
    font-size: 14px;
    font-weight: bold
}
 
td.BMLabel {
    font-weight: bold;
    text-align: left;
    vertical-align: top;
    font-size: 11px
}
 
td.BMViewLabel {
    font-weight: bold;
    vertical-align: top;
    font-size: 11px
}
 
td.BMViewData {
    vertical-align: top;
    font-size: 11px
}
 
td.BMMenu {
    font-size: 10px
}
 
td.BMRequired {
    color: red;
    text-align: left;
    vertical-align: top;
    font-size: 11px
}
 
td.Small {
    font-family: Verdana;
    font-size: 11px
}
 
td.SmallBold {
    font-family: Verdana;
    font-weight: bold;
    font-size: 11px
}
 
td.XSmall {
    font-family: Verdana;
    font-size: 10px
}
 
td.XSmallBold {
    font-family: Verdana;
    font-weight: bold;
    font-size: 10px
}
 
td.Timeentry {
    text-align: right
}
 
td.TimeentryTotal {
    text-align: right;
    font-weight: bold
}
 
input.PortalButton {
    font-size: 11px;
}
 
input.PortalMiniButton {
    font-size: 10px;
}
 
input.BMButton {
    font-size: 10px;
    background-color: #F5FAFD;
    border: 1px solid #000000
}
 
input.BMMiniButton {
    font-size: 8px;
    background-color: #F5FAFD;
    border: 1px solid #000000
}
 
input.TimeHoursRO {
    text-align: right;
    width: 30px;
    background-color: #DDDDDD;
    border: 1px solid #cccccc
}
 
input.TimeHoursEdit {
    text-align: right;
    width: 30px;
    background-color: #D4FFC4;
    border: 1px solid #000000
}
 
select.BMWide {
    width: '2 in'
}
 
a.BMNewLink {
    color: blue
}
 
a.BMNewLink:active {
    color: blue
}
 
a.BMNewLink:visited {
    color: blue
}
 
a.BMNewLink:hover {
    color: blue
}
 
a.Header {
    color: #FFFFFF
}
 
a.Header:active {
    color: #FFFFFF
}
 
a.Header:visited {
    color: #FFFFFF
}
 
a.Header:hover {
    color: #FFFFFF
}
 
a.SortedHeader {
    color: #142E50
}
 
a.SortedHeader:active {
    color: #142E50
}
 
a.SortedHeader:visited {
    color: #142E50
}
 
a.SortedHeader:hover {
    color: #142E50
}
 
a.BMTitle {
    color: #000066
}
 
a.BMTitle:active {
    color: #000066
}
 
a.BMTitle:visited {
    color: #000066
}
 
a.BMTitle:hover {
    color: #000066
}
 
b.BMHighLight {
    color: #FF0000;
    font-size: 12px
}
 
table.PaneContainer {
    background-color: #fff;
    width: 600px;
    border: 0px solid #fff;
}
 
table.PaneContainer td {
    padding: 0px;
}
 
tr.PaneTitle {
    font-weight: bold;
    font-size: 12px;
    color: #182E51;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: 40px;
}
 
tr.MovablePaneTitle {
    font-weight: bold;
    font-size: 12px;
    color: #182E51;
    cursor: move;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: 40px;
}
 
td.PaneBody {
    background-color: #FFFFFF;
}
 
td.PaneTitleLeft {
    height: 40px;
    width: 13px;
    background: url(images/banner/topleft.gif);
}
 
td.PaneTitleMid {
    height: 40px;
    background: url(images/banner/topbackground.gif);
}
 
td.PaneTitleRight {
    height: 40px;
    width: 16px;
    background: url(images/banner/topright.gif);
}
 
td.PaneBodyRight {
    width: 16px;
    background: url(images/banner/rightline.gif);
}
 
td.PaneBodyLeft {
    width: 13px;
    background: url(images/banner/leftline.gif);
}
 
tr.PaneFooter {
    height: 15px;
}
 
td.PaneFooterLeft {
    height: 15px;
    width: 13px;
    background: url(images/banner/botleftcorner.gif);
}
 
td.PaneFooterMid {
    height: 15px;
    background: url(images/banner/bottomline.gif);
}
 
td.PaneFooterRight {
    height: 15px;
    width: 16px;
    background: url(images/banner/bottomrightcorner.gif);
}
 
div.PortalContainer {
    float: none;
    width: 100%;
}
 
div.PortalColumnLeft {
    padding: 0px;
    float: left;
    width: 59%;
    /*  background-color: #EEEEEE;
    border: #000000 solid 1px;*/
    vertical-align: top;
}
 
div.PortalColumnRight {
    padding: 0px;
    float: right;
    width: 39%;
    /*  background-color: #EEEEEE;
    border: #000000 solid 1px;*/
    vertical-align: top;
}
 
div.PortalPane {
    padding: 5px;
    border: #222222 thin 1px;
    width: 100%;
}
 
.bmmenu ul {float:right; padding-top:0; }
.bmmenu li {float:left; background: none; padding:0 0 0 0; font-family:Arial, Helvetica, sans-serif; font-size: 11px; list-style-type: none; list-style-image: none;}
.bmmenu li a {color:#000000; display:inline-block; text-decoration:none; font-weight:bold;  left top no-repeat; cursor:pointer; }
.bmmenu li a span {display:inline-block; padding:0 0 0 0;  right top no-repeat;}
 
#PasswdUpdate {
     border: 1px solid #444444;
     box-shadow: 0 0 4px #333;
     -moz-box-shadow:0 0 4px #333;
    -webkit-box-shadow: 0 0 4px #333;
     display: none;
     font-family: Arial,Helvetica,sans-serif;
     width: 250px;
}
 
#PasswdUpdate_message {
     display: inline-block;
    float:left;
     padding: 4px 8px;
     width: 100px;
}
 
#PasswdUpdate_detail {
     background: none repeat scroll 0% 0% #FFFFFF;
     color: #111111;
     float: right;
     padding: 4px 8px;
     width: 62px;
}
 
#pwMatchMessage {
     display: block;
     padding: 4px 8px;
    clear:both;
}
 
.fieldData label{display:block; font-weight:bold; }
.fieldData input{padding:2px 4px; border:solid 1px #999; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
.fieldData input:hover, .fieldData input:focus{border:solid 1px #666;}
input.inputNull{font-style:italic; color:#666;}
 
#passwd, #username, select, input, input[type=text], input[type=password], textarea {
border:solid 1px #999;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:inset 0 0 4px #ccc, 0 0 4px #efefef;
-moz-box-shadow:inset 0 0 4px #ccc, 0 0 4px #efefef;
-webkit-box-shadow:inset 0 0 4px #ccc, 0 0 4px #efefef;
padding:2px;
margin:2px;
text-shadow: 0 0 0.25px #000;
vertical-align:text-top;
}
 
.udf-separator{display:block; width:100%; border-top:solid 1px #000;}
 

Troubleshooting & Common Customization

Basic Qualifications Formatting

To make BQ's that are side-by-side in 2 columns appear stacked vertically instead, add this to your portal. In the "Company Page Section HTML" box in your portal, paste the below code into the bottom of that box.

<style type="text/css"> 
  .portalBQ { 
    display: block; 
    width: 100%; 
  } 
</style>

Hide "Portal Home"

This code will hide the "Portal Home" option on Portal home page (in the gray bar). In the "Company Page Section HTML" box in your portal, paste the below code into the bottom of that box.

<style type="text/css"> 
  li.bmhome { 
    display: none !important; 
  } 
  p.lead { 
    font-size: inherit; 
  } 
</style>

Hide "Create Profile"

This code will hide the "Create Profile" option on Portal home page (in the gray bar). In the "Company Page Section HTML" box in your portal, paste the below code into the bottom of that box.

<style type="text/css">
  li.portal_create_profile {
    display: none !important;
  }
  p.lead {
    font-size: inherit;
  }
</style>

User Defined Fields Formatting

This will make UDF's stack vertically rather than side by side in the application. In the "Company Page Section HTML" box in your portal, paste the below code into the bottom of that box.

<style type="text/css">
  .bm-udf-section-title .col-sm-6 {
    display: block;
    width: 100%;
  }
</style>

Adjust Font Size for Custom Terms and Conditions

This will allow you to adjust the font size for the custom Terms and Conditions section of your portal settings. Please place the following code in the Main Section Wrapper area below the ||SECTION_CONTENT|| information and adjust the font size number accordingly.

<style>
  p.termsConditions.lead {
    font-size: 14px;
  }
</style>

Fix Section Headers on an Application

This will correct if headers are small and right justified to make them larger and left justified. In the Company Page Section HTML box in your portal, paste this code within the body code.

<div class="company-page-section">
<h2>||SECTION_TITLE||</h2>
||SECTION_CONTENT||
</div>

Narrow Content Area Portals

In the Company Page Section HTML box in your portal, paste this code within the body code. Affects the TimeCard section.

<style type="text/css"> 
  #timecardPage .input-group-addon, #timecardPage .input-group-btn, #timecardPage .input-group .form-control { 
    display: table-header-group; 
  } 
</style>

To Hide the RSS Feed Icon

<style type="text/css">
  li.jobRSS {
    display: none;
  }
</style> 

To Hide the Social Media/Sharing Job Ability on a Specific Portal

Place below code after the <body> tag in the company html section.

<style type="text/css">
  .topApplyShare {
    display: none;
  }
</style>

To Hide the Portal Home Label

<style type="text/css"> 
  li.bmhome { 
    display: none !important; 
  } 
  p.lead { 
    font-size: inherit; 
  }
</style>

To Hide the Show All Current Jobs Button

You need to add this to the Main Section Wrapper box within your portal settings.

<style type="text/css">
  a.btn.btn-default.pull-right {
    display: none !important;
  }
  p.lead {
    font-size: inherit;
  }
</style>

To Change the Portal Home Label Verbiage

You need to add content to the portal, i.e. ||PORTAL_DATA||, and just change Portal Casa to the label you'd like.

<script type="text/javascript">
  $('document').ready(function() {
    $('.bmhome').find('a').html('Portal Casa');
  });
</script>

To Change the Create Profile Label Verbiage

You need to add content to the portal, i.e. ||PORTAL_DATA||, and just change Create Profile Custom to the label you'd like.

<script type="text/javascript">
  $('document').ready(function() {
    $('.portal_create_profile').find('a').html('Create Profile Custom');
  });
</script>

To Hide "Option 2" from the Job Application Screen

<script>
  $('.panel-title').text(function(_,txt) {
    return txt.replace('Option 2:', '');
  });
</script>

If "?" Help Popovers are not Displaying Properly

Place this code in the <head></head> section of your html.

<style>
  .popover-content {
     height: 500px;
     overflow-y: scroll;
   }
</style>

Place this code right above the </body> end tag of your html.

<script type="text/javascript">
  $('[data-toggle="popover"]').popover({ container: 'body'});
</script>

To Fix TimeCard Entry form Display Issues

.input-group-addon, .input-group-btn, .input-group .form-control {
  display: table-header-group;
}

To Change the Verbiage when Zero Jobs are Currently Posted

<script type="text/javascript">
  $(document).ready(function() {
    $('.allOpenJobsPane').find('.BMNoDataFound td:first').html('custom text goes here');
  });
</script>

To Add a Logo to an Unbranded Portal (Left Corner)

In the Company Page Section HTML box in your portal, paste this code within the body code.

<div style="width:auto; margin:0 auto;max-height: 200px;">
  <div class="custom-portal-header" style="margin:10px 20px; background:#FFFF; height:200px;">
    <img src="logo url goes here" alt="integro_logo_small" border="0">
  </div>
  <div style="clear:both;"></div>
  <div style="margin:10px 20px;">
    ||PORTAL_DATA||
  </div>
</div>
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.