7Career Portal Brand

Career Portal Brand

    Career Portal Brand

      Branding

      Branding allows the system administrator to customize the look and feel of a Career Section with headers, footers and site navigation.

      Branding allows the system administrator to customize the frame surrounding the areas of the Career Section displaying the job listings. The objective is to create a Web page that mimics the customer’s own Web site to create a seamless transfer as the end-user looks for a career/job on the customer’s Web site.

      Branding for a Career Section is set up with the Career Portal Brand feature of the Career Section Administration. The Branding file is uploaded into a Career Portal Brand which can be associated to one or several Career Sections.

      A base locale must be specified among all branding files submitted. If a Career Section using a brand is accessed with a locale where no file was submitted, the branding file associated to the base locale is used.

      Although the branding of a Career Section can be performed with iFrame and Pop-up, Oracle Taleo recommends using the Taleo Career Portal Branding feature to ensure seamless branding and an optimal candidate user experience. This should be evaluated on a Career Section by Career Section basis. In some situations, the iFrame or Pop-up options may still be the best method for a specific Career Section. One important advantage of dispensing with frames is the elimination of double sets of scroll bars; single pair of scroll bars facilitates navigation. iFrames cannot be used with XHTML.

      An organization branding is submitted via a compressed (zip max of 1MB) file that contains the branding definition, that is a XHTML file and all the required static files (images, JavaScript, CSS, objects). These files create the cast of the Web page which will carry the embedded “job listing” section (that is, career portal pages and application flow). The file (conforming to Oracle Taleo's specifications) can include left and right navigation items as well as heading and footer content, which together enable your organization to create a Career Section that conveys a particular look and feel. The URL of each Career Section that uses the branding must be attached.

      There is no dynamic content based on the type of job search performed within a Career Section. For example, with Oracle Taleo hosting the page, it is not possible to display marketing content on a Career Section when candidates search for marketing jobs. Branding can be set per Career Section. If the organization wants marketing jobs to drive marketing content, create different Career Sections for different target audiences. The Career Section Administration module supports the upload of JavaScript files in the form of branding file extensions. However, branding file extensions cannot be enabled without a review and approval by Oracle Taleo.

      The compressed branding file is saved in your organization's database zone and is cached by the Oracle Taleo file system. When candidates access the Career Section, the cached files are accessed. Oracle Taleo is hosting the entire Web page (versus the page being embedded as a frame), therefore eliminating double scrolling for candidates. Since Oracle Taleo is hosting the page, the Taleo URL is used. If the organization has more than one brand, a separate compressed file can be created for each of them. The organization can then assign any one of those brands to a single Career Section or can assign a brand to multiple Career Sections.

      Organizations should modify their Career Section page (1024 x 768 screen resolution) to account for the 720 pixel size recommended page width.

        Branding File

        The branding file is a compressed (max of 1MB) file that contains the branding definition of an organization.

        The branding definition is defined by an XHTML file and all the required static files (images, CSS, objects).

        The compressed (zip) file must contain:
        • an index.html file on the root folder.

        • a Theme folder that includes
          • a CSS folder containing .css files referred by the "index.html" file.

          • an Images folder containing images referred by the "index.html" file. The format of images must be supported by the principal Web browsers. There is no limitation for the type or size of images. However, it is recommended to use .jpg or .gif as they take less space.

          • an Objects folder containing objects (for example, applet classes, Flash animation files) referred by the "index.html" file.

        When creating the compressed ("zip") file, the compressed file must not include a folder that contains the "index.html" file and the "theme" folder. To avoid this select the "theme" folder and "index.html" simultaneously and send them to a "zip" file. See Creating a Branding File for detailed steps.

        The index.html file must:

        • host the objects (images, CSS, Flash)

        • be XHTML 1.0 Strict coding format for the Web site. This ensures that the HTML codes used to create the Web site follows those standards agreed upon by the World Wide Web Association.

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

        • contain an <insertcontent> tag which is used to insert Taleo content in the page.

        • not include the <insertcontent> tag inside a form tag.

        • declare all the HTML tags with the "http://www.w3.org/1999/xhtml" namespace.

        • declare the <insertcontent> tag with the "http://www.taleo.com/ templates" namespace. For example, <insertcontent xmlns="http://www.taleo.com/templates" />

        • Add the line <insertcontent xmlns=http://www.taleo.com/templates /> 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.

        • Not host the Flash images; Flash files must be hosted separately.

        Following simple rules when creating the CSS file will avoid several error messages upon upload:

        • Do not use cap locks.

        • Always use codes for special characters.

        • Do not use global CSS tags. Using CSS definitions on standard HTML tags when creating a branding file can have an impact on the Theme configuration. If the definition of a CSS tag is not the same in the theme and the branding, display problems will occur and Taleo will not have the ability to provide any support. For example, if in a Career Section using branding hyperlinks are black, but in the Career Section‘s theme the hyperlinks are defined as being blue, this situation will cause a conflict. To avoid discrepancies, do not use global CSS style; Taleo recommends adding the name of your organization to the name of the style classes used for branding to avoid any conflict with the style classes set in the Themes.

        • Do not add Flash images in the branding file; Flash files must be hosted separately.

        Career Section administrators can update the HTML, cascading style sheets (CSS) and image content of their branding without enlisting the help of Oracle Consulting Services through a statement of work (SOW). They can also create multiple branding files. This is done in the Career Portal Brand page.

        Note: Branding files cannot have a .js folder or JavaScript embedded in the index.html file. To display some dynamic content, organizations can use JavaScript provided it is in the form of a branding file extension (not included in the branding file). The JavaScript must be analyzed and approved by Oracle Taleo before it will be enabled. For more information, see Branding with JavaScript.

          Branding File Extension for JavaScript

          It is possible to display some dynamic content, and forms such as search widgets on your Career Section using JavaScript provided the latter is included in branding file extensions.

          Whenever administrators configure a career section, they can assign a branding file containing HTML, CSS and images and they have the option of specifying a branding file extension, a file containing all the JavaScript they want to enable for the branding. The two files are merged automatically at runtime.

          Branding file extensions cannot contain any HTML, CSS or image content—only JavaScript.
          Configuration

          On the New Career Portal Brand configuration page, Career Section administrators will see only the "Branding File" option in the Type list. The Type list includes a new attribute called "Branding File Extension" that is only displayed to Oracle Taleo employees who have the permissions required to upload JavaScript files. There is also a field for specifying the file to be uploaded.

          Oracle Taleo customers can create "branding file extension" files themselves, have a third party do this or submit a SOW to have Oracle Consulting Services create the files.

            Submitting a Branding File Extension for Addition into Your Account

            Customers no longer need to contract with Oracle Consulting Services (OCS) to upload JavaScript into their career portals. With the new process Oracle has put in place, customers are able to request the upload JavaScript into their career portals using a Service Request. The process must be followed for every Java Script branding file upload request, including updates to the Java Script branding file.

            Oracle Support is only uploading the Java Script branding file into the customer Oracle Talent Acquisition Cloud instance. They are not responsible for troubleshooting or triaging issues with the branding file. It is the customer’s sole responsibility to troubleshoot and triage the branding file.
            1. Customers raise a Service Request with Oracle Support requesting to upload a JavaScript branding file to the customer Oracle Talent Acquisition Cloud instance. The customer should provide the target zone and target Career Portal Brand [Configuration > Career Section Administration > Career Portal Brands] element that they wish to have the JavaScript Branding File Extension added to.

            2. Oracle Support will review the request, and then present the customer with a waiver that a customer must review and agree to in the Service Request.

            3. Once the customer has read through and agreed to the waiver, they can then provide Oracle Support with the JavaScript branding file they wish to be uploaded into their Oracle Talent Acquisition Cloud instance.

            4. Oracle Support will upload the Java Script branding file into the customer’s target Oracle Talent Acquisition instance per the customer’s request.

            If for any reason Oracle determines there is an issue with the JavaScript branding file or does not get clear agreement from the customer, they may decline to upload it into the target Oracle Talent Acquisition Cloud instance. Additionally, if after uploading the Java Script branding file into the customer zone, Oracle has the authority to disable and / or delete the Java Script branding file for any reason (these reasons include but are not limited to impacts to the performance, security, etc.).

              Width

              Career sections (whether or not they use the Taleo branding feature) are designed to fit in a 720 pixel size.

              Taleo strongly recommends using a 720 pixel size, along with a 1024 x 768 screen resolution to provide a more pleasing appearance, more white space, and consequently, superior readability.

              The Career Section automatically adjusts to either:

              • The width size specified in the branding file.

              • The width size of the window where it is placed.

              • The width size of the frame where it is placed.

              For example, if your organization uses a 600 pixel wide frame, the career section fits that space automatically. However, if the pixel size drops below the recommended 720 pixel size, the Career Section becomes compressed and some features either need to be turned off to accommodate the lack of space or appear squeezed on the screen.

              Your organization should take into account the recommended page width when creating the branding, the XHTML code and the images that are included in the branding file.

                Setting Up Branding

                1. Create the XHTML file

                2. Validate the XHTML file.

                3. Create the static files (images, JavaScript, CSS, objects).

                4. Create a zip branding file.

                5. Your branding file must not contain JavaScript. If you want to include JavaScript in your branding, see Branding File Extension for JavaScript.

                6. Upload the branding file.

                7. Associate a career portal brand (hence a branding file) with a career section.

                  Validating an XHTML File

                  Always validate the branding file before uploading the file.

                  Ignore the error concerning the insertcontent tag because is not a valid XHTML tag (it is a Taleo tag)

                  1. Go to http://validator.w3.org

                  2. Follow the on-screen instructions.

                  If the index.html file does not have any errors, it can be uploaded for use in career sections.

                  If the file contains errors, correct the file and validate again.

                    Uploading a Branding File

                    The Access the Career Section administration section user type permission grants users access to this feature.

                    A branding file that must not include a .js folder or JavaScript.

                    Configuration > [Career Section] Administration > Career Portal Brands
                    1. Click Create.

                    2. Enter a code and name for the branding file in the corresponding fields.

                    3. Next to the File field, click Browse and select the compressed file archive containing the HTML, cascading style sheets (CSS) and image content for the branding.

                      The branding file archive cannot have a .js folder or JavaScript embedded in the index.html file.
                    4. Ensure that "Branding File is displayed in the Type field and click Save.

                      The branding file is uploaded provided no error was detected.
                    5. Click Activate to enable the branding.

                    The branding file is displayed on the Career Portal Brands list and can be added to career sections.

                    Administrators can assign the branding file (and any enabled branding file extension if desired) to career sections. See "Assigning a Branding File and Branding File Extension to Career Section".

                      Deactivating a Career Portal Brand

                      The Access the Career Section administration section user type permission grants users access to this feature.

                      The career portal brand must not be associated with a career section.

                      Configuration > [Career Section] Administration > Career Portal Brands
                      1. Click the name of a career portal brand.

                      2. Click Deactivate next to the name of the career portal brand.

                      The career portal brand (hence the branding file) is no longer available in the Name menu of the Corporate Brand section of the Career Section properties. The system administrator is no longer able to associate the branding file with a career section via the career portal brand.

                        Editing Branding Files

                        The Access the Career Section administration section user type permission grants users access to this feature.

                        Branding Files should be modified by qualified personnel.

                        Configuration > [Career Section] Administration > Career Portal Brands
                        1. Click a career portal brand name.

                        2. Click Download.

                        3. Choose to open or save the file on computer.

                        The files contained in the branding definition are available to the administrator to be edited.

                        Create a new branding file archive and upload it.

                          Assigning a Branding File and Branding File Extension to a Career Section

                          The Access the Career Section administration section user type permission grants users access to this feature.

                          A validated branding file archive must be uploaded.

                          The career section must have Inactive status.

                          Configuration > [Career Section] Administration > Career Sections
                          1. Click the name of the career section.

                          2. Click Edit next to Properties.

                          3. In the Corporate Brand section, select a branding file from the Branding File list.

                            1. Optionally, select a branding file extension from the Branding File Extension list.

                          4. Click Save.

                          The selected branding definition is displayed in the career section of the organization's Web site.

                            Viewing which Career Sections are Associated to a Branding File

                            The Access the Career Section administration section user type permission grants users access to this feature.

                            A Brand file must be available.

                            Configuration > [Career Section] Administration > Career Portal Brands
                            1. Click the name of a Career Portal Brand.

                            2. Click View Associated CS.

                            The list of all the career sections using the Branding file associated with the career portal brand is displayed.

                              Creating a Branding File

                              Have all files validated before creating the branding file.
                              1. Create a folder with the name of the brand.

                              2. Within the brand folder create "index.html" and a folder named theme.

                              3. Within theme create two folders: images, and css. Folders "js" for JavaScript and "object" for object files are optional.

                              4. Put all style files in the correct folders.

                              5. Return to your brand folder and select the theme folder and the index file.

                              6. Right-click and select Send To > Compressed(zipped) Folder from the shortcut menu.

                              7. Rename the file archive.

                              Upload the "zip" branding file archive.

                                Index File

                                To get started with branding use this example as a template for an index.html file as a guide to complete the look and feel of a Career Section.

                                <?xml version='1.0' encoding='utf-8'?>
                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                                        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                                <html xml:lang='en' lang='en' xmlns='http://www.w3.org/1999/xhtml'>
                                <head>
                                	<title>Your Company Title Here</title>
                                	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
                                	<meta name="description" content=""/>
                                	<meta name="keywords" content=""/>
                                <meta name="robots" content="all" />
                                	<link href="theme/css/styles.css" rel="stylesheet" type="text/css" />
                                </head>
                                <body onload="whenReady();">
                                <div id="mainfixcenter" style="text-align:center;">
                                	<div id="main">
                                		<div id="content">
                                			<!-- head page -->
                                			<div id="head">
                                				<div id="headmenu">
                                </div>
                                <div id="Logo"><a href="http://www.taleo.com/"><img src="" width="329" height="32" alt="Your Company Logo Here" style="border:0" /></a></div>
                                <div id="menu">
                                	<ul>
                                		<li id="company"><a href="#">Company</a></li>
                                		<li id="solutions"><a href="#">Solutions</a></li>
                                		<li id="services"><a href="#">Services</a></li>
                                		<li id="customers"><a href="#">Customers</a></li>
                                		<li id="alliances"><a href="#">Alliances</a></li>
                                		<li id="research"><a href="#">Research</a></li>
                                		<li id="news"><a href="#">News &#38; Events</a></li>
                                		<li id="careers"><a href="#">Careers</a></li>
                                	</ul>
                                </div><!--/UdmComment-->	
                                			</div>
                                			<!-- End head page -->	
                                			<!-- center page -->
                                			<div id="centerpage">
                                				<div id="arianne">
                                				</div>
                                				<!-- left menu -->
                                				<!--UdmComment--><div id="menuleft">
                                	<ul>
                                		<li id="link1"><a href="#">Job Opportunities</a></li>
                                        </ul>
                                        <div class="submenu">
                                		<ul id="slink1">
                                			<li id="slink11"><a href="#">Job Search</a></li>
                                			<li id="slink12"><a href="#">How to Apply</a></li>
                                			<li id="slink13"><a href="#">Your Profile</a></li>
                                		</ul>
                                	</div>
                                	<ul>
                                		<li id="link2"><a href="#">Locations</a></li>
                                		<li id="link3"><a href="#">Benefits</a></li>
                                		<li id="link4"><a href="#">About Taleo</a></li>
                                	</ul>
                                </div><!--/UdmComment-->
                                				
                                				<!-- Content -->
                                				<div id="textcontent2" style="margin-right:0;">
                                					<h1 class="lp" style="width:100%;">Job Opportunities</h1>	
                                                                        <insertcontent xmlns="http://www.taleo.com/templates"/>
                                				 </div>
                                				 <div id="endcontent2"></div>
                                			</div>
                                			<!-- end center page -->
                                			<!-- Footer -->
                                			<!--UdmComment--><div id="footer" style="visibility:visible; ">
                                	<div id="footercontent">
                                		<ul>
                                			<li><a href="#">Home</a></li>
                                			<li>/</li>
                                			<li><a href="#">Contact Us</a></li>
                                			<li>/</li>
                                			<li><a href="#">Privacy Policy</a></li>
                                			<li>/</li>
                                			<li><a href="#">SiteMap</a></li>
                                		</ul>
                                	</div>
                                	<p>Copyright &#169; 2007 Taleo Corporation. All Rights Reserved.</p>
                                </div><!--/UdmComment-->
                                			<!-- end footer -->	
                                		</div>
                                	</div>
                                	</div>
                                </body>
                                </html>

                                  Cascading Style Sheet

                                  To get started with branding use this CSS as a guide style.css to complete the look and feel of a Career Section.

                                  body{background-color:#FFF; margin:0;font-family: Verdana,Helvetica,Arial,Tahoma,sans-serif;  color:#000;  font-size:11px;}
                                  #textcontent a,#textcontent2 a{color:#000;}
                                  a{color:#0B5500;}
                                  #main{width:800px;  margin:0 auto;  background-color:#FFF;  text-align:left;}
                                  #content{ margin:0 10px;}
                                  #rightlist{  position:absolute;  left:370px;top:449px;  width:210px;}
                                  /*** Head menu ***/
                                  #head{position:relative;}
                                  #headmenu{height:20px;}
                                  #headmenu ul{ list-style:none; margin:0;padding:0;height:20px;}
                                  #Logo{clear:both;}
                                  #headmenu ul li{border-right: 1px solid #80C31A;  float:right;  margin-left:60px;  padding-right:5px;  padding-top:5px;}
                                  #headmenu ul li a{display:block;  font-size:10px; font-family: Helvetica,Verdana,Arial,Tahoma,sans-serif; color:#000; text-decoration:none; font-weight:bold;}
                                  #menucustomer{visibility:hidden; position:absolute; left:510px;top:20px; width:150px; height:auto;}
                                  /*** end head menu ***/
                                  /*** menu ***/
                                  #menu{height:35px;}
                                  #menu ul{ padding:5px 0 0 0; list-style:none; margin:0;}
                                  #menu ul li{float:left; margin-right:20px;}
                                  #menu ul li a{text-decoration:none; color:#666; font-size:11px; font-family: Helvetica,Verdana,Arial,Tahoma,sans-serif; font-weight:bold;}
                                  /*** end menu ***/
                                  /*** footer ***/
                                  #footer{margin-top:10px; padding:0 0 5px 0; visibility:hidden; width:780px; height:50px;}
                                  #footercontent{ background-color:#666; height:30px; position:relative; margin-bottom:3px;}
                                  #footercontent ul{list-style:none; margin:0 0 0 10px;padding:0;}
                                  #footercontent ul li{color:#FFF; margin-right:10px; font-size:9px; line-height:30px; float:left;}
                                  #footercontent ul li a{color:#FFF; font-size:9px; text-decoration:none;}
                                  #footer p{text-align:right; font-size:9px; color:#666; margin:0;}
                                  #arianne{ border-top:1px solid #B2B2B2; height:10px; display:block;}
                                  #centerpage{}
                                  /*** left menu ***/
                                  #menuleft{float:left; overflow: hidden; width:117px;}
                                  #menuleft ul li a{display:block;width:117px;}
                                  #menuleft ul li.done ul li a{width:108px;}
                                  #menuleft ul li._current ul li a{width:108px;}
                                  /*** content ***/
                                  #textcontent{margin:0 0 0 135px; width:425px;}
                                  #textcontent2{margin:0 0 0 5px; float:left; overflow: hidden; position: relative; width: 655px;}
                                  #endcontent2{clear:both;}
                                  #textcontentNoMenu{margin:0 220px 0 0px;}
                                  #textcontent2NoMenu{margin:0 100px 0 0px;}
                                  /*** Left menu ***/
                                  #menuleft ul, #menuleft ul li ul{list-style:none; margin:0; padding:0;}
                                  #menuleft div.submenu ul
                                  #menuleft ul li{font-size:10px;  line-height:12px;  width:117px;  margin-bottom:3px;}
                                  #menuleft div.submenu ul li{margin:0 0 2px 0; font-size:10px; line-height:12px;}
                                  #menuleft ul li a{display:block; padding:4px 5px; color:#FFF; text-decoration:none; background-color:#000;}
                                  #menuleft ul li.done a{	background-color:#000;}
                                  #menuleft ul li._current a{	background-color:#000;}
                                  #menuleft div.submenu ul li a{background: 4px 6px no-repeat; padding-left:12px; display:block; color:#666; padding-top:2px;}
                                  #menuleft div.submenu ul li.done a{padding-left:12px; display:block;}
                                  #menuleft div.submenu ul li._current a{padding-left:12px; display:block;}
                                  /*** text elements ***/
                                  #textcontent h1,#textcontent2 h1{margin:0;  font-size:14px;}
                                  #textcontent h1.lp, #textcontent2 h1.lp{ background-repeat: no-repeat; color: white; font-size:13px; font-weight: bold; width:658px; margin: 0 0 5px;  padding-top: 2px; padding-bottom: 2px; padding-left:49px;}
                                  #textcontent h2,#textcontent2 h2{margin:10px 0 0 0; font-size:12px;}
                                  #textcontent h3,#textcontent2 h3{margin:10px 0 0 0; font-size:12px;}
                                  /*** hover menu ***/
                                  #company a:hover{color:#80C31C;}
                                  #solutions a:hover{color:#0099CC;}
                                  #services a:hover{color:#003366;}
                                  #customers a:hover{color:#FF9900;}
                                  #alliances a:hover{color:#005967;}
                                  #research a:hover{color:#660000;}
                                  #news a:hover{color:#D74B00;}
                                  #careers a:hover{color:#006600;}
                                  #menu ul li.done a{color:#006600;}
                                  #menuleft ul li a{background-color:#009900;}
                                  #menuleft ul li.done a{	background-color:#009900;}
                                  #menuleft ul li.done ul li a{	background-color:#FFF;}
                                  #menuleft ul li ul li a{background-color:transparent; border:1px solid #FFF;}
                                  #menuleft ul li ul li.done a,#menuleft ul li.done ul li a:hover{border:1px solid #009900; padding-left:12px; display:block; color:#009900;}
                                  #menuleft ul li ul li.done ul li a,#menuleft ul li ul li.done ul li a:hover{color:#009900; border:none; padding-left:20px;}
                                  /*** text elements ***/
                                  #textcontent h1{color:#009900;}
                                  #textcontent h2.head,#textcontent2 h2.head{background-color:#bfd9bf; color:#009900; border-bottom:2px solid #99c299;}
                                  #textcontent p.head{background-color:#E8F1E8;}
                                  #textcontent h1.lp, #textcontent2 h1.lp{width: 700px; height: 17px; background-color: #009900;}

                                    Special Character Codes for CSS File

                                    Special Character Description Code Special Character Description Code
                                    < Less than sign <&#060; > Greater than sign &#062
                                    [ Left Bracket &#091 ] Right bracket &#093;
                                    { Left curly brace &#123; } Right curly brace &#125
                                    Left single quote &#145; Right single quote &#146;
                                    Left double quote &#8220; Right Double quote &#8221;
                                    Left double quote &#147; Right double quote &#148;
                                    « Double left than sign &#171; » Double greater than &#187;
                                    - Short Dash &#150; ¯ Longer dash &#151;
                                    Dash &#8212 * Asterisk &#42;
                                    Dagger &#134; Double Dagger &#135;
                                    ... Ellipsis &#133; Bullet &#149;
                                    ~ Tilde &#126 | Vertical Bar &#124;
                                    ¿ Inverted question mark &#191; ¡ Inverted exclamation point &#161;
                                    ¢ Cent sign &#162; £ Pound sign &#163;
                                    ¥ Yen sign &#165; Euro sign &#8364;
                                    TM Trade Mark &#153; ® Registered trade mark &#174;
                                    © Copyright sign &#169; ¦ Broken vertical bar &#166;
                                    ¬ Logical not sign &#172; ° Degree sign &#176;
                                    ÷ Division sign &#247; ± Plus or minus sign &#177;
                                    + Plus sign &#43; = Equals sign &#61;
                                    ¹ Super script 1 &#185; ² Superscript 2 &#178;
                                    ³ Super script 3 &#179; ¼ Fraction ¼ &#188;
                                    ½ Fraction ½ &#189; ¾ Fraction ¾ &#190;
                                    @ At sign &#064; ' Apostrophe &#39;

                                      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}