Publishing Pages Using Documentum
Improved flexibility is built into the framework that allows flexible page layout options.
> View Page Layout Options in Documentum
Publishing Painted Pages
If your site or application cannot be hosted on Cisco.com, you will need to use the Vendor Kit to "paint" your site to give it the Cisco.com look and feel. Make sure you're subscribed to cdc-vendor-kit alias since all updates to the framework/vendor kit is distributed through this alias.
> Request the Vendor Kit (code to emulate the look and feel for the U.S only framework)
The vendor kit is a one-paged template containing all of the framework elements necessary to create the Cisco.com look and feel for non-migrated content (also called a "painted site"). Users who are updating their content to reflect the changes in the new framework should copy and paste their old content into the new vendor kit template instead of trying to copy the new framework to an older page. This is still true even if you are starting from an accessible-framework updated page.
There are several areas within the vendor kit that must be edited specifically for your content:
These areas are marked with descriptive comment tags throughout the template. If you have questions about implementing the vendor kit, please contact us at cdc-vendor-kit-support@cisco.com.
For best results only edit the template as covered in these instructions leaving comments intact. These comment tags make it possible for preview tools to show what your page would look like in future framework updates. Please also ensure that all html tags remain lower-case, this preserves the validity of the XHTML and if your content is also valid, allows xml-based parsing tools to be used on the pages.
Section Title
<!-- ***TITLE*** -->
<title>(SECTION) Title</title>
<!-- ***END TITLE*** -->
Remove the text between the <title> tags and replace it with the title of your page. This title will be used by search queries and displayed in search results, bookmarks, and browser windows.
Metadata Tags
Metadata tags are important in order for your pages to work with the Cisco.com Search tool.
<!-- ***META INFO*** -->
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1"/>
<meta name="accessLevel" content="Guest"/>
<meta name="country" content="US"/>
<meta name="locale" content="US"/>
<meta name="language" content="en"/>
<meta name="title" content="(SECTION) TITLE"/>
<meta name="date" content="Tue May 31 14:14:06 EST 2005"/>
<!-- ***END META INFO*** -->
Update "title" and "date" tags for all painted pages. In addition, Global painted sites need to update "Content-type," "country," "locale," and "language" tags. Update "accessLevel" and "iaPath" as needed. For more information on how metadata tags affect Search results, refer to Metadata for Non-Migrated Content
a section of the Search Guidelines for Non-Migrated Content.
Region Name and Language
The default setting for the Region Name is Worldwide and Language is English. If the painted page is for a specific region and/or is offered in multiple languages, this section of the code will need to be modified.
<!-- **REGION NAME AND LANGUAGE*** -->
<span class="region-selector">
<span class="region">Worldwide</span>
[<a href="http://www.cisco.com/en/US/swassets/sw274/sitewide_country_language_selector.html" onclick="global_openCdcPopup('http://www.cisco.com/en/US/swassets/sw274/sitewide_country_language_selector.html',643,468);return false;" title="Popup: Region/Language Selector">change</a>]
<!-- ***Language Selector***
<span class="language-selector"><span class="language">Lang</span> /
<a href="">Alt Lang</a></span>
-->
</span>
<!-- ***End Language Selector*** -->
<!-- ***END REGION NAME AND LANGUAGE*** -->
Change Region
To change the region for the painted page, edit the word Worldwide inside of the <span class="region"> to reflect the region (as per the language/location selector).
<!-- **REGION NAME AND LANGUAGE*** -->
<span class="region-selector">
<span class="region">Worldwide</span>
For example Canada would change this to:
<!-- **REGION NAME AND LANGUAGE*** -->
<span class="region-selector">
<span class="region">Canada</span>
Change Language
To activate the language selector when multiple languages are available, uncomment, the <span class="language-selector"> . The language being viewed should appear in the <span class="language"> , while the other language options should appear in an <a href> element. All language options are separated by a /.
- For one language: do not display
- For two languages: display full language names (e.g. English / French)
- For three or more languages: display the language abbreviation (e.g. En / Fr / Sp)
<!-- **REGION NAME AND LANGUAGE*** -->
...
<!-- ***Language Selector***
<span class="language-selector"><span class="language">Lang</span> /
<a href="">Alt Lang</a></span>
-->
</span>
<!-- ***End Language Selector*** -->
<!-- ***END REGION NAME AND LANGUAGE*** -->
For 2 languages:
<!-- **REGION NAME AND LANGUAGE*** -->
...
<!-- ***Language Selector*** -->
<span class="language-selector"><span class="language">Lang</span> /
<a href="">Alt Lang</a></span>
</span>
<!-- ***End Language Selector*** -->
<!-- ***END REGION NAME AND LANGUAGE*** -->
For 3 or more languages:
<!-- **REGION NAME AND LANGUAGE*** -->
...
<!-- ***Language Selector*** -->
<span class="language-selector"><span class="language">Lang</span> /
<a href="">Alt Lang</a> / <a href="">Alt2 Lang</a></span>
</span>
<!-- ***End Language Selector*** -->
<!-- ***END REGION NAME AND LANGUAGE*** -->
Entitlement
There is only one vendor kit template, but it can be used for both guest and entitled content. In order to give your pages the look of entitled content, there are a few changes you can make.
On approximately line 43 of the vendor kit template, you should find the following code:
<!-- ***ENTITLEMENT*** -->
<!-- ***Guest Secondary Nav*** -->
<a href="http://www.cisco.com/cgi-bin/login" class="login">Log In</a>
| <a href="http://tools.cisco.com/RPF/register/register.do">Register</a>
<!-- ***End Guest Secondary Nav*** -->
<!-- ***Entitled Secondary Nav***
<span class="loggedin">Logged In</span>
| <a href="http://tools.cisco.com/RPF/profile/profile_management.do">Profile</a>
-->
<!-- ***End Entitled Secondary Nav*** -->
<!-- ***END ENTITLEMENT*** -->
For Guest content, no changes are required. For entitled content, the Guest Secondary Nav code should be deleted and the Entitled Secondary Nav needs to be uncommented out of the code. It should look like the code below:
<!-- ***ENTITLEMENT*** -->
<!-- ***Entitled Secondary Nav*** -->
<span class="loggedin">Logged In</span>
| <a href="http://tools.cisco.com/RPF/profile/profile_management.do">Profile</a>
<!-- ***End Entitled Secondary Nav*** -->
<!-- ***END ENTITLEMENT*** -->
This will give your page the appearance of an entitled page, replacing the Log In link with the Logged In text and replacing "Register" with "Profile."
Search Form
This code produces the search form.
<!-- ***SEARCH*** -->
<div class="search">
<a name="search"></a>
<form method="get" action="/pcgi-bin/search/search.pl" name="sitewidesearch"><label for="searchPhrase" accesskey="3">Search </label>
<input onfocus="checkClear(this,'Search ')" value="Search " id="searchPhrase" name="searchPhrase" type="text" tabindex="1" /><input src="http://www.cisco.com/web/fw/i/btn_go.gif" id="go" alt="Go" type="image" tabindex="2" /><br />
<input name="nv" value="Search All cisco.com##cisco.com" type="hidden" />
<input name="language" value="en" type="hidden" />
<input name="country" value="US" type="hidden" />
<input name="accessLevel" value="Guest" type="hidden" />
</form>
</div>
<!-- ***END SEARCH*** -->
Edit the values of the "language", "country", and "accessLevel" hidden fields as applicable so that the search will find the most appropriate results. If you want search to only return filtered results from a certain site area edit the "nv" hidden field. See Search Form for Global Content
Hi-Nav Content
In the past, the Hi-Nav was a complex set of nested tables. In the new framework, the hi-hav has been significantly simplified. It is now a set of nested unordered lists consisting of four classes: parent, selected, child, and peer. This section will need to be updated manually for each page of the site.
<!-- ***HINAVCONTENT*** -->
<div class="hinav">
<h3>Hierarchical Navigation</h3>
<ul class="outer">
<li><a href="http://www.cisco.com/en/US/hmpgs/index.html" class="parent">HOME</a>
<ul>
<li><a href="" class="parent">ROOT PAGE / L2 / GRANDPARENT</a>
<ul>
<li><a href="" class="parent">L3 / PARENT</a>
<ul>
<li><strong><a href="" class="selected">CURRENT PAGE</a></strong>
<ul>
<li><a href="" class="child">CHILD PAGE</a></li>
<li><a href="" class="child">CHILD PAGE 2</a></li>
</ul>
</li>
<li><a href="" class="peer">CURRENT PAGE PEER 1</a></li>
<li><a href="" class="peer">CURRENT PAGE PEER 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- ***END HINAVCONTENT*** -->
Section Title and Page Title
The section title is the content's section title. It appears above the page title in the main content area.
<!-- ***SECTION TITLE*** -->
<h1 class="title-section">SECTION TITLE</h1>
<!-- ***END SECTION TITLE*** -->
The page title is the content's page title. It appears below the section title and above the main content.
<!-- ***PAGE TITLE*** -->
<h2 class="title-page">PAGE TITLE</h2>
<!-- ***END PAGE TITLE*** -->
Right-Aligned Table - Optional
This section gives you the opportunity to create a right-aligned table within the main content area.
<!-- ***BEGIN SAMPLE RIGHT-ALIGNED TABLE*** -->
<!--googleoff: index-->
<table align="right" border="0" cellspacing="0" cellpadding="0" summary="">
<tr><td valign="top" align="right"><!-- Table A --></td></tr>
<tr><td valign="top" align="right"><!-- Table B --></td></tr>
<tr><td valign="top" align="right"><!-- Table C --></td></tr>
<tr><td valign="top" align="right"><!-- Table D --></td></tr>
</table><!--googleon: index-->
<!-- ***END SAMPLE RIGHT-ALIGNED TABLE*** -->
If you choose not to use this module, you don't need to do anything. It will not show up on the page unless you add content.
Main Content
This is where your main content will appear. Simply cut the content from your previous code and paste it here.
<!-- ***MAIN CONTENT SAMPLE*** -->
<p>Ipsum Lorum dictatium absurdem ad nauseum. Ipsum Lorum dictatium absurdum ad nauseum. Ipsum Lorum dictatium absurdem ad nauseum. Ipsum Lorum dictatium absurdem ad nauseum.</p>
<!-- ***END MAIN CONTENT SAMPLE*** -->
Right Column
The right column can be used for related tools, related links, and other content.
Alternatively, one of the significant features of the new framework is that the right column will not be created if there is no content there.
The right column is 190 pixels wide. Content should be 186 pixels wide, leaving a 2 pixel margin on either side. For Related Tools and Related Links, make sure your content is located within the <div class="module-related"> tag.
<!-- ***RELATED TOOLS SAMPLE*** -->
<div class="module-related">
<h3>Related Tools</h3>
<ul>
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
</ul>
</div>
<!-- ***END RELATED TOOLS SAMPLE*** -->
For all other right column content, use the <div class="module-blob"> tag.
<!-- ***MODULE-BLOB*** -->
<div class="module-blob"><!-- Right Column Module Blob Content --></div>
<!-- ***END MODULE-BLOB*** -->
Some tips for the module-blob content are:
- You can have multiple module-blobs in the right column if you desire.
- If you're publishing an image, make it no more than186 pixels wide.
- If you are using
<tables> or <hr>, make the width 100%
Here are some module-blob code examples:
Generic Example
<div class="module-blob">
Raw text here....
</div>
List Example
<div class="module-blob">
<ul>
<li>topic 1</li>
<li>topic 2</li>
</ul>
</div>
Image Example
<div class="module-blob">
<img src="image.gif" width="186" height="100" alt="image alt text">
</div>
If your page has right column content, you'll get a 3-column page. On pages where no content is published to the right column, the right column will 'collapse' to zero pixels so it will appear that the center column extends to the right margin of the page.
To collapse the right column completely, remove everything in the vendor kit template between these tags:
<div id="framework-content-right">
........
........
</div>
Note: In order for the column to collapse, there can't be any extra code in there. Spacer GIFs, broken or empty images, comment tags, or even a will cause an apparently empty right column.
