Difference between revisions of "General guidelines about Portlet StyleSheets"

From Gcube Wiki
Jump to: navigation, search
(Header)
(Body)
Line 43: Line 43:
  
 
===Body===
 
===Body===
For the body you should you the css class named "'''''portlet-section-body'''''"<br>
+
For the body you should you the css class named "<span style="color:navy;">portlet-section-body</span>"<br>
 
[[Image:Diligent-body.PNG]]
 
[[Image:Diligent-body.PNG]]
 +
 
==Importing Custom-made CSS files==
 
==Importing Custom-made CSS files==
 
There are two ways to import a custom-made css file:
 
There are two ways to import a custom-made css file:
 
#In doView() method of your portlet, you write: <span style="color:navy;">response.addProperty("CSS_HREF", request.getContextPath() + "/html/'''''&lt;css-filename&gt;'''''.css");</span>
 
#In doView() method of your portlet, you write: <span style="color:navy;">response.addProperty("CSS_HREF", request.getContextPath() + "/html/'''''&lt;css-filename&gt;'''''.css");</span>

Revision as of 18:18, 25 May 2007

Homogenizing the DILIGENT interface

Pre-development Actions

Downloading Gridpshere

The official DILIGENT gridsphere version is: 2.2.7.
All the portlet developers must use this version. To download it click here.

Preparing the environment

  1. Unzip / Untar the file
  2. Add a new environmental variable: export GRIDSPHERE_HOME=<grdsphere-folder>

Patching Gridpshere Home

In order to be able to use DILIGENT header themes, you should first patch gridsphere. The needed steps are:

  1. Download the patch from here
  2. Unzip / Untar the file
  3. Execute: cd <patch-folder>; ./patch.sh $GRIDSPHERE_HOME

! Important Info 1:
This patch also contains the changes needed on Gridsphere so as to consume GWT applications.
! Important Info 2:
If you want to use credentials you also have to patch gridpshere for credentials. You can find the needed info here

Installing GridSphere

  • Execute: cd $GRIDSPHERE_HOME; ant install
  • The server url is: http://localhost:port/diligent/gcube

StyleSheet Classes

Header

For using the diligent-header class, you should add in your html tag the following code:
class="diligent-header"
Example:
In order to have the following result:
Diligent-header.PNG
You must write:

<table>
    <tr class="diligent-header">
        <td><img src="browse.png"></td>
        <td>Browse</td>
    </tr>
</table>

Body

For the body you should you the css class named "portlet-section-body"
Diligent-body.PNG

Importing Custom-made CSS files

There are two ways to import a custom-made css file:

  1. In doView() method of your portlet, you write: response.addProperty("CSS_HREF", request.getContextPath() + "/html/<css-filename>.css");