Untitled Document
Table of contents | Previous | Next
Using StyleSheets
Cascading Style Sheets (CSS) can be used to layout and style/format the
information being presented through presentation templates. There are
optional approaches when using CSS to apply formatting with WCM content, the
information contained CSS files can be located in different locations.
Examples of CSS locations would be:
- Directly coded within the < style > tags in the presentation
template(s) .
- This is the simplest approach and used widely in most public website or
internal business intranet. However, this approach limits the
flexibility the presentation templates and componentization WCM provides.
- A CSS component referenced in the presentation template(s).
- This is an approach that utilizes the componentization of WCM, allowing
existing CSS files to be uploaded as a separate component and then referenced
in presentation template. Whilst a standard pattern, this approach
requires an upload of the CSS file when any changes are made and can be
laborious when making extensive changes early on in the development of your
website.
- A HTML or File component referenced in a presentation template.
- This is the pattern we've used in this example site as it allows use to
use a simple text area within these components to locate the CSS information.
It does require the CSS to be pasted into the text area and saved upon
each change, but requires fewer steps that the pattern above and the component
can be left open in a tab and modified quickly when changes are required.
- A CSS, HTML or File component referenced in a HTML component referenced in a
presentation template.
- This is similar to the pattern above but involves further separation
through an HTML component. The HTML component is referenced in the presentation
template(s). This pattern has been used in the pt-General presentation
template.
The following steps show how to add / create a style sheet component, and
in the following sections reference it as part of the pt-HomePage presentation
template.
1. Click on New , select Component and Style-Sheet
2. In the name field, type css-rbStyles
3. In the display name , type River Bend Style Sheet
4. In the Style-sheet Element section upload a file
called rbStyles.css containing the code in listing 1, created using a text
editor of your choice.
5. Click Save and Close .
Listing 1 Sample CSS code
html, body{margin:0;padding:0;
font: 100% Georgia, "Times New
Roman", Times, serif;
background-color: #574d2f;
text-align:center;}
div#header h1
{height:40px;
line-height:40px;
margin:0;
padding-left:0px;
background:#74182F;
color: #79B30B}
div#outer
{background-color:#FFFFFF;
padding: 15px 0px 15px 0px;
width:1016px;}
div#container
{text-align:left;}
div#content p
{line-height:1.6}
div#footer
{background: #74182F;
color: #FFFFFF}
div#footer p
{margin:0;
padding:5px 10px}
div#bord
{height:5px;
background-color:#A4B05C;}
div#gap
{height:20px;
background-color:#FFFFFF;}
div#visual
{height:180px;
background-color:#FFFFFF;}
div#menu
{height:27px;
background-color:#74182F;
border-top: 1px solid #FFFFFF;}
div#container
{width:740px;
margin:0 auto;}
div#container
{}
div#wrapper
{float:left;
width:100%}
div#content
{margin-left: 130px;
width:460px;
padding-top:20px;
padding-bottom:20px;}
div#navigation
{float:left;width:120px;
margin-left:-740px;
padding-top:0px;}
div#extra{float:left;
width:120px;
margin-left:-120px;
padding-top:20px;}
div#footer{clear:left;width:100%;
font-size:90%;
text-align:center;
padding: 0px 0px 0px 0px;}
.heading {font-size:200%;
color:#74182F;
font-weight:normal;
display:block;
margin:0px 0px 0px 0px;}
a.footer {color:#FFFFFF;}
a {color:#74182F;
font-weight:bold;
text-decoration:none}
a:hover {color:#74182F;
font-weight:bold;
text-decoration:underline}
div#header h1{height:150px;}
div#visual {height:255px;}
The following steps show how to create a style sheet using a HTML component,
referencing a further HTML component with the stye information and reference it
in a later section as part of the pt-General presentation template
6. Click on New , select Component and HTML
7. In the name field, type MainCSS
8. In the display name , type River Bend Main Style Sheet
9. In the HTML Element section paste the text from the code in Listing 2.
10. Click Save and Close .
Listing 2 Sample CSS code for the General Presentation template
<style type="text/css">
body{ background:
url(/wps/wcm/myconnect/fa634d004aa2fcb59af1ba756e4fc596/overlay-foliage.png?
MOD=AJPERES&CACHEID=fa634d004aa2fcb59af1ba756e4fc596) repeat;
background-color: #574d2f; margin: 0 auto;font-family:Verdana,
Arial, Helvetica, sans-serif; font-size:11px; line-height:200%;}
#mainBg{background:
url(/wps/wcm/myconnect/fe2185804aa867c59f54bf756e4fc596/FILE_bg_main946.png?
MOD=AJPERES&CACHEID=fe2185804aa867c59f54bf756e4fc596) repeat-y; margin: 0
auto; padding: 0; width:946px; min-height:1200px;}
#fullWidth{ clear:both;margin: 0 auto; padding: 0; width:930px;}
#spacer {clear:both; height:0px;
width:946px;}
#middle_left{width:200px;float:left; margin-left:1px;
background-color: #fff}
#middle_center{width:575px;float:left;
margin-left:5px}
#middle_right{width:172px;float:left;
margin-left:5px;}
#wide_box{background:#FFFFFF;padding:4px;border: 2px
solid #fff;border-top:
2px solid #fff;width:562px;position:relative;left:4px;}
#footer{padding:
10px 0px 0px 200px;}
#narrow_top{background: url() no-repeat bottom;width:206px; height:
6px;clear: left;}
#narrow_middle{width:208px;background-color:#FFFFFF ;background: url()
repeat-y;border: 0px solid black;clear:left;float:left;}
#narrow_box{background:#FFFFFF;padding:4px;border:
2px solid silver;border-top: 2px solid
silver;width:188px;position:relative;left:4px;}
#narrow_bottom{width:208px;background: url()
no-repeat;height:6px;clear:left;float:left;}
#banner{clear:left;float:left
; width:926px; background-color: #2e2b18;
padding:2px;height:82px;}
#logo{float:left; padding-bottom:4px;
padding-left:12px; padding-top:6px;}
#navigation{float:left;
color:#FFFFF;}
#navigation a{margin-right:10px; color:#FFFFFF; padding-left:0px;
px;font-family:Verdana,
Arial, Helvetica, sans-serif; text-decoration:none; font-size:12px}
#search{float:right; margin-right:10px;}
#search .search {width:120px; height:14px; margin-top:0px; font-size:12px;}
#search .submit {width:26px; height:22px; margin-top:0px;font-size:12px;
padding:2px;}
#shadow{clear:both;float:left; background:
url(/wps/wcm/myconnect/95c3e6004aa8be40a06aaa756e4fc596/
rb-BannerNav.png?MOD=AJPERES&CACHEID=95c3e6004aa8be40a06aaa756e4fc596) top
repeat-y; width:946px; padding-bottom:0px; height:6px;}
ul {list-style: none;margin-left: 0;padding-left: 0em;text-indent: -0em;}
#middle_center ul {margin-left: 0;padding-left: 0em;text-indent: -0em;}
a
{color:#000;text-decoration:underlined;}
a:hover
{color:silver;text-decoration:none;}
a:visited{color:silver;}
img {padding-right:6px;}
#leftNav li{
width:190px; background: #b0a174; padding:0px 0px 0px
10px; margin:0px 0px 2px 0px; /*padding-left: -1em*/;
}
#leftNav li a{
text-decoration:none; color:#000}
#leftNav li a.high{
font-weight:bold;}
#leftNav li.high{
background: url() #cee1fc;
}
.hitems_wide h2{font-size:14px;padding:0px 0px 1px 12px;margin:4px 0
2px -4px; padding-left: -1em;background: url();width:558px;
height:24px;}
.hitems h2{font-size:14px;padding:0px 0px 1px
12px;margin:4px 0 2px -4px; padding-left: -1em;background: url()
;width:194px;}
h1 { font-size:18px; margin-top:6px;}
h2 { font-size:16px; margin-top:6px;}
h3 { font-size:14px; margin-top:6px;}
h4 { font-size:13px; margin-top:6px;}
h5 { font-size:11px; margin-top:6px;}
</style>
11. Click on New , select Component and HTML
12. In the name field, type HTML-Header
13. In the display name , type Main River Bend
Header
14. In the HTML Element section paste the text
from the code in listing 3.
15. Click Save and Close .
Listing 3 Sample code for HTML Header referencing the MainCSS and
< Head > tag information for the General Presentation
template
<head>
<title>WCMDemo</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" cont
<meta name="description" content="" />
<meta name="keywords" content=""
/>
<Component
id="2560a7004aa86a939f5bbf756e4fc596:NC9yaXZlcmJlbmQvbWFpbmNzcw=="
name="riverbend/maincss"/>
</head>
Listing 1 Sample CSS code