[ICE-1408] Support standard portlet themes in ICEfaces components - ICEsoft JIRA Issue Tracker

Details

Type: New Feature
Status: Closed
Priority: Major
Resolution: Fixed
Affects Version/s: 1.5.4, 1.6DR#3
Fix Version/s: 1.7DR#3, 1.7
Component/s: Framework
Labels:
None
Environment:
All

Affects:

Compatibility/Configuration
Workaround Exists:

Yes
Workaround Description:
Manually adjust the theme stylesheet.

Description

Portlet styling has special requirements. A customer has sent in some changes to one of our existing theme stylesheets that allows his ICEfaces application to be properly displayed in a portlet. I'll include his changes in this case. We'll need to discuss styling requirements for portlets in a more holistic sense when proper support is added to the main framework.

Options
- Sort By Name
- Sort By Date
- Ascending
- Descending
- Download All

Attachments

xp-portlet.css

07/Nov/07 12:02 PM

51 kB

Neil Griffin
xp.css

05/Apr/07 11:01 AM

47 kB

Deryk Sinotte

screenshot-1.jpg

248 kB

31/Oct/07 6:36 PM

Issue Links

blocks

ICE-1608 <ice:inputFile/> no longer supports the "cssFile" attribute

Closed

is duplicated by

ICE-1340 The <ice:message styleClass="portlet-msg-error"/> does not render the styleClass attribute

Closed

Activity

Ascending order - Click to sort in descending order

Hide

Permalink

Deryk Sinotte added a comment - 05/Apr/07 11:01 AM

I'm attaching the customer's adjustments to our xp.css file as well as pasting in a diff from our current stylesheet in the repository trunk. The only adjustment I made was to remove the customer's name and email address to protect their privacy.

Index: xp.css
===================================================================
— xp.css (revision 13465)
+++ xp.css (working copy)
@@ -41,34 +41,45 @@

/* set the attributes for the font family, size and color for ALL elements on the page */
/* make the fonts inside tables and forms == the default size of the page */
+
+/* This is incompatible with portal themes, so commenting it out...
body, table

{ font-family: Arial, Helvetica, sans-serif; font-size: .95em; color: #000000; }

+*/

/* now set the size and other attributes of the fonts for any of the form elements for non-ICE form elements. (note this will also affect any ICE components that render out any of the following HTML tags */
+/* This is incompatible with portal themes, so commenting it out...
input, textarea, select {
}
+*/

/*
=================== HTML Form Element Appearence ==============
*/

/* set the style elements for any of the textarea form elements */
+/* This is incompatible with portal themes, so commenting it out...
textarea {

}
+*/

/* set the style elements for any of the select form elements */
+/* This is incompatible with portal themes, so commenting it out...
select {

}
+*/

/* set the style elements for any of the input form elements */
+/* This is incompatible with portal themes, so commenting it out...
input {

}
+*/

/*
=================== Style class definitions for ICE Standard Extended Component Appearance ==============
@@ -80,10 +91,6 @@
padding: 2px;
}

-.iceCheckbox

{ - white-space: nowrap; -}

-
.iceCheckbox input, .iceRadioBtn input, .iceBooleanCheckbox

{ margin: 2px; padding: 2px; @@ -323,11 +330,14 @@ margin: 10px; }

-.iceDtdPgrScrBtn {
/* the cells behind the scroll buttons */
+/* This is incompatible with portal themes, so commenting it out...
+/*
+.iceDtdPgrScrBtn

{ background-color: #FFFFFF; padding: 2px; }

+*/

.iceDtdPgrTbl

{ /* the container for the pagination*/ @@ -341,9 +351,9 @@ background-color: #FFFFFF; color: #666666; display: block; + border: 1px solid #FFFFFF; padding-left: 5px; padding-right: 5px; - border: 1px solid #FFFFFF; }

html .iceDtdPgrCol a { @@ -437,6 +447,7 @@ border: none; }

+ /* ADDED Navy Blue font color, since it always appears on a white background. In one case, the portal theme had a portlet-font, which would not render on this always-white background in the ICEfaces XP theme */
.iceTabSetTabOn .MiddleMiddle

{ background-color: transparent; background-image: url( "./css-images/on-mid-mid.gif" ); @@ -444,6 +455,7 @@ text-align: center; border: none; white-space: nowrap; + color: #012A5C; }

.iceTabSetTabOn .MiddleMiddle a

{ @@ -534,6 +546,7 @@ border: none; }

{ background-color: transparent; background-image: url( "./css-images/off-mid-mid.gif" ); @@ -541,6 +554,7 @@ text-align: center; border: none; white-space: nowrap; + color: #012A5C; }

.iceTabSetTabOff .MiddleMiddle a {
@@ -691,6 +705,8 @@

/* tabPanel */

+
+/* background-color: #FFFFFF; Background color within .iceTabSet is incompatible with portal themes, so commenting it out... */
.iceTabSet

{ padding-top: 10px; padding-left: 10px; @@ -699,7 +715,6 @@ border-right: 1px solid #ABABAB; border-bottom: 1px solid #ABABAB; border-left: 1px solid #ABABAB; - background-color: #FFFFFF; }

/* TABS ON BOTTOM STYLE CLASSES */
@@ -1217,7 +1232,6 @@
/*
----------- FileUpload Component classes
*/
-.iceFileUpload {}
.iceFileUploadText {
border: 1px solid #ABABAB;
background-color: #FFFFFF;
@@ -1550,8 +1564,8 @@
Classes for the connection status indicator
*/

+/* margin: 10px; This is incompatible with portal themes, so commenting it out... */
.iceOutConStat

{ - margin: 10px; width: 25px; height: 25px; border: none; @@ -1680,42 +1694,6 @@ cursor: default; }

-/* submenu disabled style classes */
-.iceSubMenuRowLabel-dis

{ - color: #ABABAB; - text-decoration: none; - cursor: default; -}

-
-.iceSubMenuRow-dis

{ - color: #ABABAB; - text-decoration: none; - cursor: default; - padding: 0px; - display: block; - height: auto; -}

-
-.iceSubMenuRow-dis a

{ - color: #333333; - text-decoration: none; - cursor: default; - display: block; - padding-left: 3px; - padding-right: 3px; - padding-top: 3px; - padding-bottom: 3px; - -}

-
-.iceSubMenuRow-dis a:hover

{ - color: #ABABAB; - text-decoration: none; - border-bottom: 1px dotted #CCCCCC; - cursor: default; -}

-
-
/* panel tabs disabled style classes */

.iceTabSetTabOff {

Show

Deryk Sinotte added a comment - 05/Apr/07 11:01 AM I'm attaching the customer's adjustments to our xp.css file as well as pasting in a diff from our current stylesheet in the repository trunk. The only adjustment I made was to remove the customer's name and email address to protect their privacy. Index: xp.css =================================================================== — xp.css (revision 13465) +++ xp.css (working copy) @@ -41,34 +41,45 @@ /* set the attributes for the font family, size and color for ALL elements on the page */ /* make the fonts inside tables and forms == the default size of the page */ + +/* This is incompatible with portal themes, so commenting it out... body, table { font-family: Arial, Helvetica, sans-serif; font-size: .95em; color: #000000; } +*/ /* now set the size and other attributes of the fonts for any of the form elements for non-ICE form elements. (note this will also affect any ICE components that render out any of the following HTML tags */ +/* This is incompatible with portal themes, so commenting it out... input, textarea, select { } +*/ /* =================== HTML Form Element Appearence ============== */ /* set the style elements for any of the textarea form elements */ +/* This is incompatible with portal themes, so commenting it out... textarea { } +*/ /* set the style elements for any of the select form elements */ +/* This is incompatible with portal themes, so commenting it out... select { } +*/ /* set the style elements for any of the input form elements */ +/* This is incompatible with portal themes, so commenting it out... input { } +*/ /* =================== Style class definitions for ICE Standard Extended Component Appearance ============== @@ -80,10 +91,6 @@ padding: 2px; } -.iceCheckbox { - white-space: nowrap; -} - .iceCheckbox input, .iceRadioBtn input, .iceBooleanCheckbox { margin: 2px; padding: 2px; @@ -323,11 +330,14 @@ margin: 10px; } -.iceDtdPgrScrBtn { /* the cells behind the scroll buttons */ +/* This is incompatible with portal themes, so commenting it out... +/* +.iceDtdPgrScrBtn { background-color: #FFFFFF; padding: 2px; } +*/ .iceDtdPgrTbl { /* the container for the pagination*/ @@ -341,9 +351,9 @@ background-color: #FFFFFF; color: #666666; display: block; + border: 1px solid #FFFFFF; padding-left: 5px; padding-right: 5px; - border: 1px solid #FFFFFF; } html .iceDtdPgrCol a { @@ -437,6 +447,7 @@ border: none; } + /* ADDED Navy Blue font color, since it always appears on a white background. In one case, the portal theme had a portlet-font, which would not render on this always-white background in the ICEfaces XP theme */ .iceTabSetTabOn .MiddleMiddle { background-color: transparent; background-image: url( "./css-images/on-mid-mid.gif" ); @@ -444,6 +455,7 @@ text-align: center; border: none; white-space: nowrap; + color: #012A5C; } .iceTabSetTabOn .MiddleMiddle a { @@ -534,6 +546,7 @@ border: none; } + /* ADDED Navy Blue font color, since it always appears on a white background. In one case, the portal theme had a portlet-font, which would not render on this always-white background in the ICEfaces XP theme */ .iceTabSetTabOff .MiddleMiddle { background-color: transparent; background-image: url( "./css-images/off-mid-mid.gif" ); @@ -541,6 +554,7 @@ text-align: center; border: none; white-space: nowrap; + color: #012A5C; } .iceTabSetTabOff .MiddleMiddle a { @@ -691,6 +705,8 @@ /* tabPanel */ + +/* background-color: #FFFFFF; Background color within .iceTabSet is incompatible with portal themes, so commenting it out... */ .iceTabSet { padding-top: 10px; padding-left: 10px; @@ -699,7 +715,6 @@ border-right: 1px solid #ABABAB; border-bottom: 1px solid #ABABAB; border-left: 1px solid #ABABAB; - background-color: #FFFFFF; } /* TABS ON BOTTOM STYLE CLASSES */ @@ -1217,7 +1232,6 @@ /* ----------- FileUpload Component classes */ -.iceFileUpload {} .iceFileUploadText { border: 1px solid #ABABAB; background-color: #FFFFFF; @@ -1550,8 +1564,8 @@ Classes for the connection status indicator */ +/* margin: 10px; This is incompatible with portal themes, so commenting it out... */ .iceOutConStat { - margin: 10px; width: 25px; height: 25px; border: none; @@ -1680,42 +1694,6 @@ cursor: default; } -/* submenu disabled style classes */ -.iceSubMenuRowLabel-dis { - color: #ABABAB; - text-decoration: none; - cursor: default; -} - -.iceSubMenuRow-dis { - color: #ABABAB; - text-decoration: none; - cursor: default; - padding: 0px; - display: block; - height: auto; -} - -.iceSubMenuRow-dis a { - color: #333333; - text-decoration: none; - cursor: default; - display: block; - padding-left: 3px; - padding-right: 3px; - padding-top: 3px; - padding-bottom: 3px; - -} - -.iceSubMenuRow-dis a:hover { - color: #ABABAB; - text-decoration: none; - border-bottom: 1px dotted #CCCCCC; - cursor: default; -} - - /* panel tabs disabled style classes */ .iceTabSetTabOff {

10 older comments

Hide

Permalink

yip.ng added a comment - 31/Oct/07 6:36 PM

Screenshot showing alternating table row classes and background images after applying the suggested fix.

Show

yip.ng added a comment - 31/Oct/07 6:36 PM Screenshot showing alternating table row classes and background images after applying the suggested fix.

Hide

Permalink

Neil Griffin added a comment - 07/Nov/07 12:02 PM

The attached file is easily diff'able with today's trunk. I deleted some hard coded font colors and some other items that shouldn't be present it portlets.

Show

Neil Griffin added a comment - 07/Nov/07 12:02 PM The attached file is easily diff'able with today's trunk. I deleted some hard coded font colors and some other items that shouldn't be present it portlets.

Hide

Permalink

Neil Griffin added a comment - 07/Nov/07 12:30 PM

In addition to the xp-portlet.css that I just attached, I recommend adding the following entries as well:

.iceDatTbl

{ margin: 0px; }

.iceOutConStat

{ margin: 0px; }

.iceSelOneMnu

{ padding: 1px 1px 1px 1px; }

.iceInpTxt

{ margin: 0px; }

.iceOutLbl

{ padding: 1px 4px 1px 0px; }

.icePnlTbSet

{ background: transparent; }

Show

Neil Griffin added a comment - 07/Nov/07 12:30 PM In addition to the xp-portlet.css that I just attached, I recommend adding the following entries as well: .iceDatTbl { margin: 0px; } .iceOutConStat { margin: 0px; } .iceSelOneMnu { padding: 1px 1px 1px 1px; } .iceInpTxt { margin: 0px; } .iceOutLbl { padding: 1px 4px 1px 0px; } .icePnlTbSet { background: transparent; }

Hide

Permalink

Ken Fyten added a comment - 07/Nov/07 4:00 PM

Please review Neil's suggestions with Adnan as required.

Show

Ken Fyten added a comment - 07/Nov/07 4:00 PM Please review Neil's suggestions with Adnan as required.

Hide

Permalink

Adnan Durrani added a comment - 07/Nov/07 4:07 PM

I do not t see any problems with it.

Show

Adnan Durrani added a comment - 07/Nov/07 4:07 PM I do not t see any problems with it.

People

Assignee:

Unassigned

Reporter:

Deryk Sinotte

Votes:

0 Vote for this issue

Watchers:

0 Start watching this issue

Dates

Created:

05/Apr/07 10:57 AM

Updated:

14/Apr/08 3:32 PM

Resolved:

29/Nov/07 5:02 PM