1. Implementing Career Section
  2. Troubleshooting Branding

Troubleshooting Branding

Display Problems Solution
Progression bar expanded beyond page limit. Ensure at least 720 pixels (width-wise) is allocated for the job listing section. Although this is not required, it is highly recommended. 720 pixels allows ample room to accommodate for the career section. Without this space, many branding files seem stretched or certain fields are deprecated.
Job descriptions are too close to the left edge of the page. In the HTML file, scroll through and look for the lines : “<insertcontent xmlns=http://www.taleo.com/templates />”

Applying the following lines “<div style=”padding-left:10px”>” before and “</div>” after, to add a space to left side edge of the job listing section.
The “Welcome. You are not signed in” message is very close to the Job Search tab. The metapanel section (which is the text “Welcome … not signed in) is deprecated and it does not know what height size it is supposed to be. Add the line “.accessmanagement .headersection .metapanel {height:14px;}” anywhere in the CSS.
Some of the characters such as > or | do not appear although in the HTML file. Sometimes when the branding file is uploaded, characters which do not have a paragraph or link tag around are not acknowledged. Verify that all characters in the HTML file have a <a> or <p> around the characters.
Job Listings displayed under the left hand side navigation bar instead of being displayed of the navigation bar. Manually reducing the width of the job listing section so that it fits in the white space. This is done by applying a “width:750px” in a div tag surrounding the <insertcontent> line.
When applying to a requisition, some input fields seem very wide pushing the whole screen wider than wanted. A script determines the optimal size for these fields. In IE6, the script determines that the optimal size is 250px wide. In sections where there is first, last, middle name field. The field therefore takes up 750px of space. 2 solutions are possible:

  • Change the size of the field in the user-defined form. After choosing the field, scroll to the bottom of the user-defined page and observe the line “CSS Style”. By adding “Width: 150px” to the field, the size of the field is shortened. Remember, the default is 250px if blank.

  • Insert at the end of the CSS file the following four lines:

    • .blockpanel .entity-value, .blockpanel .entity-value select {width:150px;}

    • .blockpanel .input-checkbox {width:20px;}

    • .blockpanel .input-date-time select {width:60px;}

    • .blockpanel .input-radio {width:auto;}
White empty box is displayed instead of filter boxes. To display the filters user needs to resize the screen. Enter the following script right before the </body> located at the very end of the HTML file).

  • <script type="text/javascript"> //<![CDATA[ setTimeout("_ftl_api.updateFloats()",1000); //]]></script>

Do not apply this JavaScript until the branding file is finalized.
Only the 1st CSS file is read while ignoring the other CSS files although several are available. Merge the CSS files together i.e. copy/paste the contents of the other CSS files to the end of the primary (1st) CSS file. Doing this does not cause any issues. You may want to add some comments to ensure that future developers can clearly understand where one CSS file ends and where the other starts.
The top border is not correctly placed at the job listing section. The top border should be touching the side border creating a proper border around the sections. There are also small dots as well. You must find the padding style causing the problem. In this case, the padding is affecting a <p> declaration. Go into the CSS file and do a search for the word “padding”. Continue hitting the search until you find something similar to:

p{

padding: 8px 0px 10px 0px;

}

Notice how this padding declaration affects all “p”. So any time there is a paragraph, this CSS creates a space around it. The 4 numbers represent top, right, bottom, and left. In that order. The easiest thing to do at this point is change the 8px (which affects the top border) and the 10px (affecting the bottom border) and replace them with 0px.
Long job title overlapping the “Step 1 of x Print/Emal” line. Add the following lines, anywhere in the CSS.

.mainsection .metapanel{

padding-top:15px;

margin-bottom:2px;

}
Vertical lines in bread crumb all grouped together instead of being placed between words. In the branding file, add <spam> after each word that should be separated from another word by a vertical line.
Job listings section is not displayed. The line <insertcontent xmlns=http://www.taleo.com/templates /> must be added to the HTML file for the job-listing section to appear. Without this, the career site will not have a section for the user to look for a job. If using a validator, this line always fails the validation. Please proceed, the upload automatically ignores this statement.
Pages are displayed on the left hand side, instead of being centered. If you are using IE6, change the margin to auto;
Flash animations not displaying in the career section Flash images must not be included in the branding file, but hosted by the customer.
On rare occasions, images in a branding file are not displayed in the career section. Though this issue has not been resolved yet, there is an effective workaround. Add basethemepath/[languageCode]/ to the beginning of the src= or href= parameter of the image or link HTML tag, replacing [languageCode] with the language code of the branding file.

Two examples: in English

<link type="text/css" rel="stylesheet" media="all" href="theme/css/system.css"/>

should be changed to

<link type="text/css" rel="stylesheet" media="all" href="basethemepath/en/theme/css/system.css"/>

in Dutch

<img src="theme/images/facebook.gif" alt="Facebook"/>

should be changed to

<img src="basethemepath/nl/theme/images/facebook.gif" alt="Facebook"/>

Font Problems Solution
Font size in the job listing section too large, especially in internet explorer. Often Internet Explorer ignores the font-size assigned and defaults to the largest size. The workaround is to re-apply the font-size for the area; usually the job-listing section.

In the HTML file, look for the lines : “<insertcontent xmlns=http://www.taleo.com/templates />” Applying the following lines “<div style=”font-size:10px”>” before and “</div>” after, to force the browser to increase or decrease the font-size.
Font-size in the information balloon of a job listing screen is very large. In the CSS file, add the style “font-size:62.5%;” to the body's style. This is usually added by Talents own CSS, but often ignored by Internet Explorer due to a conflicting instruction.
Some of the characters such as > or | do not appear although in the HTML file. Sometimes when the branding file is uploaded, characters which do not have a paragraph or link tag around are not acknowledged. Verify that all characters in the HTML file have a <a> or <p> around the characters.

Color Problem Solution
When using a colored back ground, a white bar is displayed on the right hand side of the career section. In the XHTML file, change the width to 100%.
In the privacy agreement page, the Print Format link at the top right has a different background color than the rest of the page. Add to the CSS style sheet

.mainsection .blockpanel .metagrouppanel .metapanel .metalink2 .nav-btn{ background-color:transparent; }

Error Message when Uploading the Branding File Solution
The template file "index.html" contains the following XHTML errors: javax.xml.transform.TransformerException: java.io.UTFDataFormatException: Invalid byte 1 of 1- byte UTF-8 sequence. This is caused by the use of special characters in the HTML file. Use the codes supplied in the Special Character Codes table.
You must select a .zip file containing a theme file Make sure there are a CSS and Images folders in the Theme folder.
Bad doc Type.

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 Add <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> at the beginning index.html file
Warning error is displayed on attributes Check if caps locks are used in the XHTML file.
unescaped & or unknown entity "&justice.gif" In the XHTML file, Replace & sign by &amp}