Theme use not working... what am I missing?

Question

Hello All,
I am attempting to style an inputText component. I want to limit the style to just one panel, so I've decided to use a theme.
In web.xml I've added the following two context entries:
<context-param>
<param-name>oracle.adf.view.rich.tonalstyles.ENABLED</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>false</param-value>
</context-param>
The latter configuration is just so that I can see that I'm overriding the correct skin selector.
I've created my own skin, and I am extending "fusion". I know that the skin is working, because other custom CSS classes that I've defined within the skin CSS file are being correctly applied to other labels that I'm using on the form.
I am trying to style the input textbox itself, so I've added the following information in my skin CSS:
af|inputText {
-tr-enable-themes: true;
af|inputText[theme="light"]::content
background-color:#F1F2F0;
border-color: #A6A7A6 #F1F2F0 #E3E4E2 #C2C3C1;
border-style: solid;
border-width: 1px 0 1px 1px;
display: inline;
font-family: Helvetica;
font-size: 10px;
height: 12px;
margin: 0;
I'm set the "light" theme, because it seems that I can't define my own theme name. That's fine... I've set the theme attribute on the parent panelGroupLayout component:
<af:panelGroupLayout id="pgSearchText" layout="horizontal"
halign="left" valign="top"
inlineStyle="text-align:left;"
theme="light">
<af:inputText id="itSearch" columns="10"/>
<af:commandImageLink id="cilGo" icon="/graphics/go_bn.gif"/>
</af:panelGroupLayout>
When this page renders in a browser, theme="light" is set on all elements of the input text HTML. However, the dynamically constructed CSS doesn't include my style for the "content" skin selector. It's set to the default style.
Where did I go wrong?
Thanks for your help.

Answer 1

I figured this out. The documentation example I was working from was incorrect. The "theme" definition within the CSS must follow the skin selector:
af|inputText::content[theme="light"] { ... }
This works. After I fixed this, then I was able to assign my own name to the theme.
Edited by: gratuitious on Jan 31, 2011 1:49 PM