Difference between revisions of "General guidelines about Portlet StyleSheets"

From Gcube Wiki
Jump to: navigation, search
(Patching Gridpshere Home)
 
(37 intermediate revisions by 3 users not shown)
Line 1: Line 1:
'''Homogenizing the DILIGENT interface'''
+
[[Category:TO BE REMOVED]]
==Pre-development Actions==
+
===Patching Gridpshere Home===
+
In order to be able to use DILIGENT header themes, you should first patch gridsphere.
+
The needed steps are:
+
#Download the patch from [here]
+
#Unzip / Untar the file
+
#Execute: <span style="color:green;">cd &lt;patch-folder&gt;; ./patch.sh $GRIDSPHERE_HOME</span>
+
  
'''! Important Info:'''<br>
+
'''Homogenizing the D4Science interface'''
This patch also contains the changes needed on Gridsphere so as to consume GWT applications.
+
 
 +
 
 +
==StyleSheet Classes==
 +
===Header===
 +
For using the diligent-header class, you should add in your html tag the following code:<br>
 +
<span style="color:navy;">class="d4science-header"</span><br>
 +
'''Example:'''<br>
 +
In order to have the following result:<br>
 +
[[Image:Diligent-header.PNG]]<br>
 +
You must write:
 +
<pre><table>
 +
    <tr class="d4science-header">
 +
        <td><img src="browse.png"></td>
 +
        <td>Browse</td>
 +
    </tr>
 +
</table>
 +
</pre>
 +
 
 +
===Body===
 +
For the body you should you the css class named "<span style="color:navy;">portlet-section-body</span>"<br>
 +
[[Image:Diligent-body.PNG]]
 +
 
 +
==Importing Custom-made CSS files==
 +
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>
 +
#Directly in the jsp page: <span style="color:navy;">&lt;link rel="stylesheet" href="&lt;%= request.getContextPath()%&gt;/html/'''''&lt;css-filename&gt;'''''.css" type="text/css"&gt;</span>
 +
<br><br>
 +
----
 +
 
 +
----
 +
--[[User:Valia|Valia]] 19:22, 25 May 2007 (EEST)

Latest revision as of 18:15, 6 July 2016


Homogenizing the D4Science interface


StyleSheet Classes

Header

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

<table>
    <tr class="d4science-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");
  2. Directly in the jsp page: <link rel="stylesheet" href="<%= request.getContextPath()%>/html/<css-filename>.css" type="text/css">





--Valia 19:22, 25 May 2007 (EEST)