Using external CSS site templates with 7.0.0.2

来源：互联网发布：战地之王源码编辑：程序博客网时间：2024/06/06 01:54

Website designs are often provided as HTML and CSS files, with no dynamic content such as navigation or layout contents. Here are the steps to convert a static design into a dynamic theme.

1. Obtain an HTML document and its associated CSS and images. This documentation will be working with a design from the Free CSS Templates website:
freecsstemplates.org Chocolate Brown template

2. Create a new theme (see also: Copying the theme):

a) Mount the /themelist webDAV entry point:

 /wps/mycontenthandler/dav/themelist/

b) Copy the "ibm.portal.7002Theme" folder to a temporary location on your hard drive

c) Rename the folder, for this example it will be called “chocolate”

d) Rename the HTML design document (i.e. index.html) to theme.html and replace the theme template file inside the "chocolate" folder

e) Copy any CSS and image resources needed by theme.html into the "chocolate" folder

f) Open "./chocolate/metadata/localized_<locale>.properties" and change the theme display name:

 title=Chocolate

Related Concepts:

Connecting to the Portal WebDAV
Copying the theme

Make a unique copy of the static resources for your skin

g) Copy the chocolate folder into the /themelist folder. This will automatically create and register the new theme.

3. Create a test page with the new theme assigned and add a few portlets to it

4. View the page
note: There are no dynamic parts of the theme at this point

5. Mount the /fs-type1 webDAV entry point and navigate to "./themes/chocolate":

 /wps/mycontenthandler/!ut/p/dav/fs-type1/

6. Open theme.html and add the following dynamic spot blocks [figure 1 below]:

a) Inside the <head> element, place this dynamic-content spot as the first line with that element:

<link rel="dynamic-content" href="co:head">

<link rel="dynamic-content" href="dyn-cs:id:7002theme_head">

b) Locate the HTML that displays the header logo and add this dynamic-content spot block after the logo div:

  <div class="wpthemeClear"></div>

  <header role="banner">

   <div class="wpthemeHeader">

    <div class="wpthemeInner">

     <!-- responsible for the top most navigation links (horizontal list) -->

     <a rel="dynamic-content" href="dyn-cs:id:7002theme_topNav"></a>

     <!-- displays the page mode toggle to place the page into edit mode or view mode -->

     <a rel="dynamic-content" href="dyn-cs:id:7002theme_pageModeToggle"></a>

    </div>

   </div><!-- end header -->

   <div class="wpthemeBanner">

    <div class="wpthemeBannerInner">

     <div class="wpthemeInner">

      <a rel="dynamic-content" href="dyn-cs:id:7002theme_primaryNav"></a>

      <a rel="dynamic-content" href="dyn-cs:id:7002theme_commonActions"></a>

      <div class="wpthemeClear"></div>

     </div>

    </div>

   </div><!--end main banner-->

   <div class="wpthemeSecondaryBanner">

    <div class="wpthemeInner">

     <a rel="dynamic-content" href="dyn-cs:id:7002theme_secondaryNav"></a>

     <div class="wpthemeClear"></div>

    </div>

   </div><!--end secondary banner-->

  </header>

c) Locate the HTML for the page contents and replace it with this dynamic-content spot block:

  <div class="wpthemeMainContent">

   <div class="wpthemeInner">

    <a rel="dynamic-content" href="dyn-cs:id:7002theme_crumbTrail"></a>

    <div class="wpthemeClear"></div>

    <div id="wpthemeStatusBarContainer"></div>

   </div>

   <!-- required - do not remove -->

   <a rel="dynamic-content" href="state.portlet:portlet?include=windowState&include=portletMode&mime-type=text/html"></a>

   <div id="layoutContainers" class="wpthemeLayoutContainers wpthemeLayoutContainersHidden" role="main">

    <div class="wpthemeInner">

     <a rel="dynamic-content" href="dyn-cs:id:7002theme_layout"></a>

     <div class="wpthemeClear"></div>

    </div>

   </div>

  </div><!--end main content-->

d) Locate the HTML that displays the footer and add this dynamic-content spot block after the footer div at the end of the body:

 <!-- active site analytics additions -->

 <a rel="dynamic-content" href="dyn-cs:id:7002theme_asa"></a>

 <!-- This is responsible for bootstrapping the configuration for the javascript framework.

        This is located here instead of the head section to improve client performance. -->

    <a rel="dynamic-content" href="co:config"></a>

theme.html [figure 1]:

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

<html xmlns=http://www.w3.org/1999/xhtml">

<head>

<link rel="dynamic-content" href="co:head">

<link rel="dynamic-content" href="dyn-cs:id:7002theme_head">

<meta name="keywords" content="" />

<meta name="description" content="" />

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Chocolate Brown by Free CSS Templates</title>

<link href="style.css" rel="stylesheet"

type="text/css" media="screen" />

</head>

<body>

<div id="wrapper">

<div id="header">

<div id="logo">

<h1>

<a href="#">Chocolate Brown </a>

</h1>

<p>design by

<a href=http://www.freecsstemplates.org/">Free CSS Templates</a>

</p>

</div>

<div class="wpthemeClear"></div>

   <header role="banner">

   <div class="wpthemeHeader">

    <div class="wpthemeInner">

     <!-- responsible for the top most navigation links (horizontal list) -->

     <a rel="dynamic-content" href="dyn-cs:id:7002theme_topNav"></a>

     <!-- displays the page mode toggle to place the page into edit mode or view mode -->

     <a rel="dynamic-content" href="dyn-cs:id:7002theme_pageModeToggle"></a>

    </div>

   </div><!-- end header -->

   <div class="wpthemeBanner">

    <div class="wpthemeBannerInner">

     <div class="wpthemeInner">

      <a rel="dynamic-content" href="dyn-cs:id:7002theme_primaryNav"></a>

      <a rel="dynamic-content" href="dyn-cs:id:7002theme_commonActions"></a>

      <div class="wpthemeClear"></div>

     </div>

    </div>

   </div><!--end main banner-->

   <div class="wpthemeSecondaryBanner">

    <div class="wpthemeInner">

     <a rel="dynamic-content" href="dyn-cs:id:7002theme_secondaryNav"></a>

     <div class="wpthemeClear"></div>

    </div>

   </div><!--end secondary banner-->

  </header>

</div>

<!-- end #header -->

<div id="menu">

</div>

<!-- end #menu -->

<div id="page">

<div id="page-bgtop">

<div id="page-bgbtm">

<div id="content">

  <div class="wpthemeMainContent">

   <div class="wpthemeInner">

    <a rel="dynamic-content" href="dyn-cs:id:7002theme_crumbTrail"></a>

    <div class="wpthemeClear"></div>

    <div id="wpthemeStatusBarContainer"></div>

   </div>     <!-- required - do not remove -->

   <a rel="dynamic-content" href="state.portlet:portlet?include=windowState&include=portletMode&mime-type=text/html"></a>

   <div id="layoutContainers" class="wpthemeLayoutContainers wpthemeLayoutContainersHidden" role="main">

    <div class="wpthemeInner">

     <a rel="dynamic-content" href="dyn-cs:id:7002theme_layout"></a>

     <div class="wpthemeClear"></div>

    </div>

   </div>

  </div><!--end main content-->

</div>

<!-- end #content -->

<div id="sidebar">

<ul>

<li>

<h2>Aliquam tempus</h2>

<p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper

urna ornare consectetuer hendrerit.</p>

</li>

<li>

<h2>Categories</h2>

<ul>

<li>

<a href="#">Uncategorized</a>(3)

<span>Lorem Ipsum Dolor Sit Amit</span>

</li>

<li>

<a href="#">Lorem Ipsum</a>(42)

<span>Lorem Ipsum Dolor Sit Amit</span>

</li>

<li>

<a href="#">Urna Congue Rutrum</a>(28)

<span>Lorem Ipsum Dolor Sit Amit</span>

</li>

<li>

<a href="#">Vivamus Fermentum</a>(13)

<span>Lorem Ipsum Dolor Sit Amit</span>

</li>

</ul>

</li>

<li>

<h2>Blogroll</h2>

<ul>

<li>

<a href="#">Phasellus Pellentesque</a>

<span>Lorem Ipsum Dolor Sit Amit</span>

</li>

<li>

<a href="#">Consectetuer Adipiscing</a>

<span>Lorem Ipsum Dolor Sit Amit</span>

</li>

<li>

<a href="#">Urna Congue Rutrum</a>

<span>Lorem Ipsum Dolor Sit Amit</span>

</li>

</ul>

</li>

<li>

<h2>Archives</h2>

<ul>

<li>

<a href="#">December 2009</a>&nbsp;(29)

<span>Lorem Ipsum Dolor Sit Amit</span>

</li>

<li>

<a href="#">November 2009</a>&nbsp;(30)

<span>Lorem Ipsum Dolor Sit Amit</span>

</li>

<li>

<a href="#">October 2009</a>&nbsp;(31)

<span>Lorem Ipsum Dolor Sit Amit</span>

</li>

</ul>

</li>

</ul>

</div>

<!-- end #sidebar -->

<div style="clear: both;">&nbsp;</div>

</div>

</div>

</div>

<!-- end #page -->

</div>

<div id="footer">

<p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by

<a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>

</div>

<!-- end #footer -->

 <!-- active site analytics additions -->

 <a rel="dynamic-content" href="dyn-cs:id:7002theme_asa"></a>

 <!-- This is responsible for bootstrapping the configuration for the javascript framework.

        This is located here instead of the head section to improve client performance. -->

    <a rel="dynamic-content" href="co:config"></a>

</div>

</body>

</html>

7. Create a new skin that matches the design [figure 2 below] (see also:Make a unique copy of the static resources for your skin):

a) Mount the /skinlist webDAV entry point:

 /wps/mycontenthandler/dav/skinlist/

b) Copy the "ibm.portal.7002Standard" folder to a temporary location on your hard drive

c) Rename the folder, for this example it will be called “chocolate.skin”

d) Open "./chocolate.skin/metadata/localized_<locale>.properties" and change the skin display name:

 title=Chocolate Skin

e) Find the HTML in "theme.html" which surrounds a portlet or widget. For chocolate, it looks like this:

  <div class="post">

  <div class="post-bgtop">

  <div class="post-bgbtm">

  <h2 class="title"><a href="#">TITLE IS HERE</a></h2>

  CONTENT IS HERE

  </div>

  </div>

  </div>

Replace the contents of "./chocolate.skin/skin.html" with the code above.

f) Add the dynamic spots for title and layout control body:

i. Replace “TITLE IS HERE” with

 <a rel="dynamic-content" href="lm:title"></a>

ii. Replace “CONTENT IS HERE” with

 <a rel="dynamic-content" href="lm:control"></a>

skin.html [figure 2]:

<div class="post">

<div class="post-bgtop">

<div class="post-bgbtm">

<h2 class="title"><a href="#"><a rel="dynamic-content" href="lm:title"></a></a></h2>

<a rel="dynamic-content" href="lm:control"></a>

</div>

</div>

</div>

g) Copy the "chocolate.skin" folder into the /skinlist folder. This will automatically create and register the new skin.

h) Use the "Themes and Skins" portlet to set the Chocolate Skin as the default for the Chocolate Theme

When you are finished with this tutorial, your external CSS template should now function as a Portal theme.

Related Concepts: