voyent
How To alter the style of icefaces component?  XML
Forum Index -> Portals & Portlets
Author Message
maxi_ng

Joined: 11/Jan/2008 00:00:00
Messages: 92
Offline


such as the size of textArea, length of inputText, etc.
because they are so small and short by default.
is this done by customizing css?
is there any other way?
how to reference to my own .css which is not inside icefaces.jar?

thank you.
maxi_ng

Joined: 11/Jan/2008 00:00:00
Messages: 92
Offline


If I write my own .css, how to reference it in the .jspx?

According to this document http://www.icefaces.org/docs/v1_6_0/htmlguide/devguide/references7.html#1037085
Note: The default CSS class names associated with each component are listed in the component's TLD (taglib) description.
But I don't see the CSS class names in here
http://www.icefaces.org/docs/v1_6_0/tld/index.html
Am I looking at the wrong place?

Another question is
How to change a specific component style?
Suppose I have many components of the same type.
Let say ice:inputTextArea, but only one of them I need to change its style.
but adding #componentId.cssClass inside xp-portlet.css didn't work.
Altering .iceInpTxtArea will change all textArea style.
bayer-dba

Joined: 03/Jul/2007 00:00:00
Messages: 99
Offline


Include your own css-file by
Code:
<ice:outputStyle href="../css/yourFile.css" rel="stylesheet" type="text/css" />


The basename of a customizable component is listed under "styleClass" in the TLD. If your use this attribute, you're changing the basename of the styling class for the component.

Example:
Default value is iceMnuItm
iceMnuItm (basename)
iceMnuItmImage (basename+...)
iceMnuItmLabel (basename+...)

Your css should contain these names (basename+...) to override a component in your application. Have a look at the original css for a better understanding. ;)

If you want a special styling use the style attribute.

General applying order:
icefaces-css, your css, component style

Dennis Bayer | JBoss 4.2.2GA - Sun RI - IceFaces 1.8.2 w/ Facelets
maxi_ng

Joined: 11/Jan/2008 00:00:00
Messages: 92
Offline


Hi bayer,

Thank you so much for your reply, I understand a lot more now.
But still there are something I don't understand.

but I still have one question, where should I put my own css?
how to reference to my own .css which is not inside icefaces.jar?

bayer-dba

Joined: 03/Jul/2007 00:00:00
Messages: 99
Offline


maxi_ng wrote:
but I still have one question, where should I put my own css?
how to reference to my own .css which is not inside icefaces.jar?
 


Just use the outputStyle-tag inside your jsp/jsf file and point relatively to the css file: "WebContent\css\file.css", for example.

Dennis Bayer | JBoss 4.2.2GA - Sun RI - IceFaces 1.8.2 w/ Facelets
maxi_ng

Joined: 11/Jan/2008 00:00:00
Messages: 92
Offline


Thank you bayer.
I've managed to reference to it.

last question.
General applying order:
icefaces-css, your css, component style

Is it icefaces-css< your css< component style ??

what is the meaning of this?
my style will have higher priority then icefaces default style?
then what is component style?

bayer-dba

Joined: 03/Jul/2007 00:00:00
Messages: 99
Offline


maxi_ng wrote:

last question.
General applying order:
icefaces-css, your css, component style

Is it icefaces-css< your css< component style ??

what is the meaning of this?
my style will have higher priority then icefaces default style?
then what is component style?
 


Priority: Yes.
Component Style: A lot of components have a style-attribute to define styles directly. This results in <div style="...">...</div>, for example. This attribute can override settings of the css-files which would be applied anyways.

Dennis Bayer | JBoss 4.2.2GA - Sun RI - IceFaces 1.8.2 w/ Facelets
maxi_ng

Joined: 11/Jan/2008 00:00:00
Messages: 92
Offline


Thank you bayer, problem solved.
TomAng

Joined: 27/Oct/2007 00:00:00
Messages: 20
Offline


Hi maxi_ng & bayer-dba,

Your posts are very useful information for me. Yet, I still don't get it about the basename.

Let's assume, I would like to overide the iceCmdLnk. On page1.jspx, I would like to have an iceCmdLnk with red color, and on page2.jspx with blue color.

So, how do I declare it in my css file ?

Thanks.
bayer-dba

Joined: 03/Jul/2007 00:00:00
Messages: 99
Offline


Use the style-attribute of the tag to define further classes. E.g: style="blue"

Afterwards you add blue and red as new classes in your css. A component can have several properties from different css-classes.

Regards

Dennis Bayer | JBoss 4.2.2GA - Sun RI - IceFaces 1.8.2 w/ Facelets
 
Forum Index -> Portals & Portlets
Go to:   
Powered by JForum 2.1.7ice © JForum Team