DASH Decorators

From MT Marvelit
Jump to: navigation, search

Decorations Location

The look and feel of your dashboard pages can be modified by use of decorators. Each page can have a different decorator - but consistency should be used for a group of dashboard pages.

Decorators are editable and exist in the following folder (assuming DASH is the root folder of your install):

/DASH/webapps/jetspeed/decorations - Here is the contents of that folder:

Decorations.jpg

Layouts

The Layouts folder contains decorations for entire pages of content.

Layout.jpg


Jetspeed provides some good examples of page decorators. You can see how each looks and functions by creating a page in the Portal Site Manager and choosing the desired page decorator. See Adding Panes and Formating Panes for additional information.

Once you find an existing decorator that you wish to modify - simple copy the directory and rename it. The name of the folder corresponds to the name of the decorator in the theme pull down list when you create a page - Formating Panes.

Modifying an Existing Decorator

In the following example - we will take a look at the DASH decorator that is used in the Welcome page and the demo site. You can make these modifications to any decoration. There may be slight differences in the implementation of each - so this is a representable example of the process.

Here is the contents of the DASH decorator folder:

Dash folder.jpg


There are several files and folders to note in this directory:

  • css folder - This folder contains cascading style sheets for the DASH decorator.
  • header.vm - this is the code that is used to format and display the heading of the DASH decorator.
  • footer.vm - this is the code that is used to format and display the footer.
  • images folder - This folder contains any images (logos, etc) that will be displayed on the decorator.


Editing CSS Styles

Css1.jpg

The styles.css file is the style sheet for the DASH decorator. A review of CSS coding is not appropriate here - but standard conventions are used. Editing this file will allow you to change dashboard width, colors and other behaviors. If you view the page source of a page with a decorator you modified - you should be able to see the div tags used. Modify those tag entries in the sytles.css file.

Editing Header.vm

The header.vm file is the code that is executed to display the heading of each page. There are two sections that will need editing: Banner Content and the Content table.

Here is the code from the DASH header.vm file under Banner Content:

Headervm1.jpg

Several areas need editing:

  • The h1 tag contains the link to the Logo displayed on the top of each page. In this example images/dash-logo.jpg. Update the name of your logo and make sure the logi is saved in the images directory for this decorator.
  • The logout link is added. see the href tage. This entry may need to be added to the Banner Content section as this link is typically not placed in the header of the page.

Content Table

The Content Table section of the header.vm file will need the three lines of coded added between the td tage. The leversform is the code that displays the levers at the top of each dashboard page. Without this entry - no levers will display on your decorator.

Headervm2.jpg

Editing footer.vm

The footer.vm file should only need editing if you want to place an image or text at the bottom of each page. In the following example - the footer.vm file was modified to display the Marvelit logo. This code has been commented in the DASH decorator.

Footervm.jpg

Portlets

The Portlets folder contains decorations for single portlets.

Portlet folder.jpg


Jetspeed provides many different portlet decorators. It is very possible that you may never need to create a new one. However, if you need to - the process is similar to the page layout process just discussed. Find a decorator that you like - copy and rename it's folder. The folders correspond to the theme pulldown on each portlet. See Set Portlet Themes for further information.


We created a new portlet decorator for the DASH page layout - called DASH - here is the contents of that folder:


Dash portlet.jpg


The CSS folder contains a styles.css that can be modified support different border colors and other styles. Standard css tage are used. The decorator property file need to be edited as well. The name of the portlet decorator needs to be modified in this file. It should match the name of the folder.

Portlet decorator props.jpg