Portlet Styling

Last modified: 05/20/2006 07:48 AM

Author:	Jean-Marc Orliaguet <jmo@ita.chalmers.se>
Description:	The complete list of style properties that can be used for the styling of portlets.
Revision:	portlet-styling.txt 30522 2005-12-12 19:49:54Z dkuhlman

Contents

1 Styling of Portlets
- 1.1 Area Color
- 1.2 Area Shape
- 1.3 Box Color
- 1.4 Box Shape
- 1.5 Box Corners
- 1.6 Font Color
- 1.7 Font Shape
- 1.8 Form Style
- 1.9 Tab Style
2 Styling of Boxes
3 Styling of Horizontal Menus
4 Styling of Text
- 4.1 Headers:

1 Styling of Portlets

1.1 Area Color

Applies to the area surrounding the portlet box.:

LABEL                           CSS property
-----                           ------------
Area border color               border-color
Area background color           background-color
Area background image           background-image
Area background position        background-position
Area background repeat          background-repeat
Area font color                 color

1.2 Area Shape

Applies to the area surrounding the portlet box.:

LABEL                           CSS property
-----                           ------------
Area border style               border-style
Area border width               border-width
Area text transform             text-transform

1.3 Box Color

Applies to the portlet box.:

LABEL                           CSS property
-----                           ------------
BoxTitle font color             color
BoxTitle border color           border-color
BoxTitle background color       background-color
BoxTitle background image       background-image

BoxBody border color            border-color
BoxBody background color        background-color
BoxBody background image        background-image
BoxBody menuout color           background-color
BoxBody menuout border color    border-color
BoxBody menuin color            background-color
BoxBody menuin border color     border-color
BoxBody menuin icon             list-style-image
BoxBody menuout icon            list-style-image

1.4 Box Shape

Applies to the portlet box.:

LABEL                           CSS property
-----                           ------------
BoxTitle font                   font
BoxTitle border style           border-style
BoxTitle border width           border-width
BoxTitle padding                padding
BoxTitle display                display

BoxBody padding                 padding
BoxBody border style            border-style
BoxBody border width            border-width

BoxBody menuout padding         padding
BoxBody menuout margin          margin
BoxBody menuout border style    border-style
BoxBody menuout border width    border-width

BoxBody menuin padding          padding
BoxBody menuin margin           margin
BoxBody menuin border style     border-style
BoxBody menuin border width     border-width

1.5 Box Corners

Applies to the portlet box frame.:

LABEL                           CSS property
-----                           ------------
Area border color               border-color
Area background color           background-color
Top left background image       background-image
Top right background image      background-image
Bottom left background image    background-image
Bottom right background image   background-image

1.6 Font Color

Applies to the portlet's characters.:

LABEL                           CSS property
-----                           ------------
H1 font color                   color
H1 border color                 border-color
H1 bg color                     background-color

H2 font color                   color
H2 border color                 border-color
H2 bg color                     background-color

H3 font color                   color
H3 border color                 border-color
H3 bg color                     background-color

H456 font color                 color
H456 border color               border-color
H456 bg color                   background-color

A link                          color
A visited                       color
A active                        color
A hover                         color

1.7 Font Shape

Applies to the portlet's characters.:

LABEL                           CSS property
-----                           ------------
Default font                    font

H1 font                         font
H1 padding                      padding
H1 border width                 border-width
H1 border style                 border-style

H2 font                         font
H2 padding                      padding
H2 border width                 border-width
H2 border style                 border-style

H3 font                         font
H3 padding                      padding
H3 border width                 border-width
H3 border style                 border-style

H456 font                       font
H456 padding                    padding
H456 border width               border-width
H456 border style               border-style

STRONG font                     font

P font                          font
P padding                       padding

A link decoration               text-decoration
A visited decoration            text-decoration
A active decoration             text-decoration
A hover decoration              text-decoration

1.8 Form Style

Applies to forms and to form elements.:

LABEL                           CSS property
-----                           ------------
Form padding                    padding
Form font color                 color
Form border color               border-color
Form border style               border-style
Form border width               border-width
Form background color           background-color

Element font color              color
Element border color            border-color
Element border style            border-style
Element border width            border-width
Element background color        background-color
Element active border color     border-color
Element active background color background-color

1.9 Tab Style

Applies to menu tabs.

LABEL                           CSS property
-----                           ------------

Horizontal margin               margin
Vertical padding                padding (top bottom)
Horizontal padding              padding (left right)
Tab width                       width
Tabs background image           background-image
Tab left-side image             background-image
Tab right-side image            background-image
Selected tab left-side image    background-image
Selected tab right-side image   background-image
Tab bottom border color         border-color (bottom)
Sel. tab bottom border color    border-color (bottom)

2 Styling of Boxes

Box layouts:

all except 'horizontal menu'

Box styles:

Box color
Box shape

List orientations:

vertical
horizontal

The following HTML markup is used to represent boxes:

<div class="box">
  <div class="title">
  -- Box Title -----
  </div>
  <div class="body">
  -- Box Body ------

  -- Box Menu ------
    <ul class="cpsskinsMenu">
      <li><a href="#">item</a></li>
      <li class="selected"><a href="#">selected item</a></li>
      ...
    </ul>

  </div>
</div>

2.1 Indentation:

To set an indentation use the 'margin-left' property in the <a> tag.

for instance:

<ul class="cpsskinsMenu">
  <li><a style="margin-left: 1em" href="#link">Item</a><li>
</ul>

The bullet icon will be indented too.

2.2 Not displaying menu icons

To not display the menu icons (menuin, menuout) defined in box styles, apply the "noicon" class on <a>.

for example:

<ul class="cpsskinsMenu">
  <li><img src="icon.png" ... /><a class="noicon" href="#link">Item</a><li>
<ul>

The indentation set with 'margin-left' will be preserved (see above), but the width taken by the menu icon will be removed to leave some extra space for an image (e.g. <img>).

2.3 Item descriptions:

Use <span class="itemDescription">

For example:

<ul class="cpsskinsMenu">
  <li>Item title
    <span class="itemDescription">description</span>
  </li>
</ul>

3 Styling of Horizontal Menus

Box layout:

horizontal menu

Box styles:

Box color
Box shape
Portal Tab style (w/ rounded tabs)

Use the following HTML markup for top-level menu items:

<ul class="cpsskinsMenu">
  <li><a href="#">item</a></li>
  <li class="selected"><a href="#">Selected item</a></li>
  ...
</ul>

Use the following HTML markup for second-level menu items:

<ul class="cpsskinsMenu">
  <li>
    <!-- top level -->
    <a href="#">Top level item 1</a>

    <!-- sub-level -->
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li>...</li>
    </ul>
  </li>

  <li>
    <!-- top level -->
    <a href="#">Top level item 2</a>

    <!-- sub-level -->
    <ul>
      <li>...</li>
    </ul>
  </li>
  ...
</ul>

Note: Some additional javascript code is required for IE (cf. http://www.alistapart.com/articles/dropdowns/).

Item descriptions:

Item description that use the <span class="itemDescription"> HTML markup are hidden in horizontal menus.

4 Styling of Text

4.1 Headers:

Use the standard h1, h2, h3, h4, h5, h6 tags for the headers.

NB: h4, h5, and h6 are all stylized in the same way by CPSSkins

If you need to apply header styles to other HTML elements than h1, h2 ..., use instead the following markup:

<div class="h1">Header 1</div>