8 Replies Latest reply on Oct 10, 2007 12:28 PM by Olivier THOMAS

    RichFaces and css

    Olivier THOMAS Newbie

      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

        • 1. Re: RichFaces and css
          Sergey Smirnov Master

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

          • 2. Re: RichFaces and css
            Olivier THOMAS Newbie

            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>

            • 3. Re: RichFaces and css
              Sergey Smirnov Master

              you answer made me speechless.

              • 5. Re: RichFaces and css
                Olivier THOMAS Newbie

                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 ?

                • 6. Re: RichFaces and css
                  Olivier THOMAS Newbie

                  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..

                  • 7. Re: RichFaces and css
                    Sergey Smirnov Master

                    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.

                    • 8. Re: RichFaces and css
                      Olivier THOMAS Newbie

                      Hello,

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

                      display:none
                      for class "rich-menu-item-icon".