6 Replies Latest reply on Dec 15, 2009 12:59 PM by Daniel Dausch

    Issue with style Classes and toolBar

    Daniel Dausch Newbie

      I am using RichFaces 3.3.2 and I am experiencing issues around formatting components on the rich:toolBar. I have defined my own .rich-toolbar-item style that seems to work for only certain toolbar items. The style manages output text on the toolbar, both size and color, but impacts the 2 command links and the 1 outputLink only from a size persective even when the styleClass is explicit. The color for these links, I believe, is picked up from the skin. Is there an order of precedence when the style classes are applied? It is confusing, for sure. Any thoughts? Here is my code below:

       

       

      <style>

       

      .rich-tool-tip{

       

      background-color: #eef2f8;

       

      border-color: #7196c8;

       

      font-size: 8pt;

       

      text-decoration: none;

      }

       

      .rich-toolbar-item{

       

      font-family: Arial,Verdana,sans-serif;

       

      font-size: 12px;

       

      font-weight:bold;

       

      color: black;

      }

       

      </style>

       

       

       

      <h:form>

       

       

      <rich:toolBar itemSeparator="line">

       

       

      <rich:toolBarGroup location="left">

       

      <h:outputText value="Welcome #{AcrViewController.employee.firstName} #{AcrViewController.employee.lastName}"

       

       

      rendered="#{empty AcrViewController.whoLoggedInAs}"/>

       

      <h:outputText value="Welcome #{AcrViewController.whoLoggedInAs.firstName} #{AcrViewController.whoLoggedInAs.lastName} (logged in as #{AcrViewController.employee.firstName} #{AcrViewController.employee.lastName})"

       

       

      rendered="#{!empty AcrViewController.whoLoggedInAs}"/>

       

      </rich:toolBarGroup>

       

      <rich:toolBarGroup itemSeparator="line" location="right" >

       

      <h:commandLink id="tasksLink" value="Tasks" styleClass="rich-toolbar-item">

       

      <rich:toolTip direction="bottom-left" for="tasksLink">

      This link will pop up a window

      <br/>

      and show any current tasks.

       

      </rich:toolTip>

       

      </h:commandLink>

       

      <h:outputLink id="helpLink"

       

       

      value="http://xxxxxxxxx/component/getcontent?objectId=09016fea80629f93&current=true"

       

       

      target="_blank" styleClass="rich-toolbar-item">

       

      <h:outputText value="Help"/>

       

      <rich:toolTip direction="bottom-left" for="helpLink">

      This link will provide the

      <br/>

      current ALM HELP document.

       

      </rich:toolTip>

       

      </h:outputLink>

       

      <h:commandLink id="logoutLink"

       

       

      action="#{AcrViewController.logout}" value="Logout" styleClass="rich-toolbar-item">

       

      <rich:toolTip direction="bottom-left" for="logoutLink">

      This link will logout you out of ALM

      <br/>

      and close the browser.

       

      </rich:toolTip>

       

      </h:commandLink>

       

       

       

      </rich:toolBarGroup>

       

       

      </rich:toolBar>

       

      </h:form>