Problem with skinning accordion panel

[armdev]

Hello All,
I try to skin accordion panel like
http://97.107.138.40:8080/prime-showcas ... inning.jsf
but have not any result, I see only accordion panel.

Can I do it with only styleClass?

Code: Select all

<ui:define name="left">
   <f:view>   
 <p:resources/>
<style type="text/css">                  
    .pf-accordiontab-bd {  
      background: #FFFFCC;  
      border-color: #33CC00;  
    }  
    
    .pf-accordiontab-hd {    
      background: url(../design/nav.gif);  
    }  
    
    .pf-accordiontab-toggler-expanded {  
      background: url(../images/toggle_green_expanded.png) no-repeat;  
    }  
    
    .pf-accordiontab-toggler-collapsed {  
      background: url(../images/toggle_green_collapsed.png) no-repeat;  
    }  
    </style>
    <h:form>  
   
              <c:forEach items="#{CategoriesBean.mainMenuList}"  var="list">
                
                <p:accordionPanel>                                                                   
                  <p:tab  title="#{list.categoryName}">                     
                    <c:forEach items="#{list.subList}"  var="mlist">                      
                        <h:outputLink value="/articles/article.jsf">
                            <f:param name="subCategoryId" value="#{mlist.subcategoryId}"/>
                            <h:outputText value="#{mlist.name}"/>
                        </h:outputLink>                      
                      <br/>                      
                    </c:forEach>  
                  </p:tab>  
                </p:accordionPanel>
               
              </c:forEach>          
  
  
      
     
    </h:form>
  </f:view>
  </ui:define>
  

this is not working for me...
I want to try like
<p:accordionPanel styleClass="accordion">

How can i make styleClass accordion with

Code: Select all

<style type="text/css">                  
    .pf-accordiontab-bd {  
      background: #FFFFCC;  
      border-color: #33CC00;  
    }  
    
    .pf-accordiontab-hd {    
      background: url(../design/nav.gif);  
    }  
    
    .pf-accordiontab-toggler-expanded {  
      background: url(../images/toggle_green_expanded.png) no-repeat;  
    }  
    
    .pf-accordiontab-toggler-collapsed {  
      background: url(../images/toggle_green_collapsed.png) no-repeat;  
    }  
    </style>

?

[armdev]

Problem with .pf-accordiontab-toggler-expanded {
background: url(../images/toggle_green_expanded.png) no-repeat ;
}

.pf-accordiontab-toggler-collapsed {
background: url(../images/toggle_green_collapsed.png) no-repeat;
}
png images dysplayed in the background and in the left position, may be I do not understand css details

[cagatay.civici]

AccordionPanel is reimplemented in 0.9.1. for performance reasons, along the way skinning is changed too. So which version of PrimeFaces are you using? I'm guessing 0.9.0?