RichFaces and css

[theophile]

Hi,

I want to use <rich:toolBar> with <rich:dropDownMenu and <rich:menuItem>. I have to use skinability but also customization for my company.
I write a css file with definition of the second css classes (eg :

<td class="dr-toolbar-int rich-toolbar-item ">

=> I give a new style for "rich-toobar-item").
But I do not manage to redefine the size of the submenu independently of that of the superior level. There's a conflict between "rich-menu-item-enabled / rich-menu-item-hover" and "rich-menu-item-label".
Our developpers don't have to use <rich:menuItem styleClass="">

Is it possible ?

Thanks

[sergeysmirnov]

What do it mean "don't have to use" ?

[theophile]

Thanks for your answer.

"don't have to use" means : we don't want the developpers use "styleclass=" because it's too complex for them. We just want to give them a css file which allows customization of <rich-menu>

[sergeysmirnov]

you answer made me speechless.

[fmarwede]

:-)

[theophile]

I understand ! We want our developpers can use only with Drag and Drop.
It's perhaps too complex for them to understand <rich:toolBar>, <rich:dropDownMenu...

You think it's impossible only with external css file given to our developers ?

[theophile]

Really sorry,

I was not clear I think. The problem is not the complexity of using the attribute styleclass for our developers (ouch !).

It's only that we have currently 100 applications in our company. Most of those applications are using the same layout and must obey to the same graphic standard.

So we would like to customise rich faces classes with a .css file that we'll give to every application, the app developper will only have to put the css in the application and youps ! all is compliant with our graphic standard.

It's our first approach with richfaces library, perhaps we are dreaming and this is not feasible. If the approach is not reallistic please tell us !

Coming back to the problem (I've already spent some days struggling with it - ouch !) :
I have the following Jsf code :

<rich:dropDownMenu value="Contrats" submitMode="None">
<rich:menuItem>
 <s:link id="editContratRf" action="#{editContrat.addContrat}" value="Creation Contrat" propagation="none"/>
</rich:menuItem>
</rich:dropDownMenu>

The menu item write the following HTML code :

<div class="dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled " id="_id21:_id24" onclick="this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; ; " onmouseout="this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('_id21:_id24:icon').className='dr-menu-icon rich-menu-item-icon '; $('_id21:_id24:anchor').className='rich-menu-item-label';" onmouseover="this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover '; $('_id21:_id24:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; $('_id21:_id24:anchor').className='rich-menu-item-label rich-menu-item-label-selected';">
 <span class="dr-menu-icon rich-menu-item-icon " id="_id21:_id24:icon">
 <img height="16" src="/aws/a4j_3_1_0images/spacer.gif.action" width="16" />
 </span>
 <span class="rich-menu-item-label" id="_id21:_id24:anchor">
 <a id="_id21:editContratRf" href="/aws/views/client/edit_client.action?actionMethod=views%2Fclient%2Fedit_client.jspx%3AeditContrat.addContrat">Creation Contrat</a>
 </span>
</div>

I want the second span element to fill all the div height (menuItem), and the text contained in the span to be outputed in the middle of the div.

Currently the text appears on the bottom of the div (menuItem).

Can you help me please ? I'm really stuck..

[sergeysmirnov]

I have no embedded css processor in me head to imagine how it looks like. Can you make a screenshot and show what you have and what you want.

[theophile]

Hello,

Thanks to css, i solve my problem.
I had to write

display:none

for class "rich-menu-item-icon".